angle {
    id: rectangle
    width: 600
    height: 200
    color: "white"
    border.width: 2
    border.color: "blue"
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

    ListView {
        id: listView
        focus: true

        width: 350
        height: 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        clip: true

        orientation: ListView.Horizontal
        preferredHighlightBegin: 125
        preferredHighlightEnd: 225
        highlightMoveDuration: 200
        highlightRangeMode: ListView.StrictlyEnforceRange

        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
        delegate: Rectangle {
            width: 100
            height: 50
            color: colorCode

            Text {
                text: name
                font.bold: true
                anchors.centerIn: parent
                color: "white"
            }
        }
    }

    Text {
        text: qsTr("center")
        anchors.bottom: listView.top
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Text {
        text: qsTr("left")
        anchors.top: listView.bottom
        anchors.right: listView.left
    }

    Text {
        text: qsTr("right")
        anchors.top: listView.bottom
        anchors.left: listView.right
    }
}

Text {
    anchors.bottom: rectangle.top
    anchors.left: rectangle.left
    text: qsTr("parent")
}