Horizontal ListView / ListModel + Stretching

[bunjee]

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.

[baysmith]

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)
        }
    }
}

}
@