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.7Item {
width: 360
height: 360Rectangle { 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) } } }
}
@