Horizontal ListView / ListModel + Stretching



  • Greetings Qt Coders,

    I'm using a ListView + ListModel in QML in an horizontal fashion.

    Concretely I want my first two buttons to be anchored on the left and the third one anchored on the right.
    With traditional layout this was done adding a Stretch item between the second and the third.

    But I'm not sure how to do that in QML.

    Any idea ?

    Thanks.

    B.A.



  • Something like the following?

    Anchors are used to position the buttons on the left and right of the parent and the list view is anchored to the sides of the buttons.
    @
    import Qt 4.7

    Item {
    width: 360
    height: 360

    Rectangle {
        id: buttonLeft
        anchors.left: parent.left
        width: buttonLeftText.width + 10
        height: buttonLeftText.height + 10
        radius: 3
        border.width: 1
        smooth: true
        border.color: "#000000"
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#5e5e5e"
            }
            GradientStop {
                position: 1
                color: "#444444"
            }
        }
        Text {
            x: 5
            y: 5
            id: buttonLeftText
            text: "<"
            color: "#ffffff"
        }
        MouseArea {
            anchors.fill:  parent
            onClicked: {
                list.currentIndex = Math.max(0, list.currentIndex-1)
    
            }
        }
    }
    
    Rectangle {
        id: buttonRight
        anchors.right: parent.right
        width: buttonRightText.width + 10
        height: buttonRightText.height + 10
        radius: 3
        border.width: 1
        smooth: true
        border.color: "#000000"
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#5e5e5e"
            }
            GradientStop {
                position: 1
                color: "#444444"
            }
        }
        Text {
            x: 5
            y: 5
            id: buttonRightText
            text: ">"
            color: "#ffffff"
        }
        MouseArea {
            anchors.fill:  parent
            onClicked: {
                list.currentIndex = Math.min(list.count-1, list.currentIndex+1)
            }
        }
    }
    
    ListView {
        id: list
        clip: true
        spacing: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.right:  buttonRight.left
        anchors.left:  buttonLeft.right
        orientation: ListView.Horizontal
        model: ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }
        delegate: Text {
            text: name + ": " + number + (index == list.count-1 ? "" : ",")
        }
        highlight: Rectangle {
            width: list.currentItem.width
            color: "lightsteelblue"
            radius: 5
        }
        focus: true
        MouseArea {
            anchors.fill:  parent
            onClicked: {
                list.currentIndex = list.indexAt(mouseX, mouseY)
            }
        }
    }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.