Modal Flickable List
-
I am still relatively new to QML. What I am after is a modal list to appear after a button is pressed and the user is able flick through the list with drag gestures. How would I accomplish this in QML?
Kyle
-
Put a ListView (which inherits Flickable) inside an Item that appears only when this button is clicked. Something like this:
@
import Qt 4.7Item {
width: 360
height: 360//Button Rectangle { width: 50 height: 50 color: "red" MouseArea { anchors.fill: parent onClicked: { list.visible = true; } } } // This List is a custom element List { id: list visible: false anchors.fill: parent }
}
@Of course, it is just a pretty simple example. You have to add stuff to close the List element, etc.
(Did I understand what you want to do?) -
Where do I add the items in my list?
-
kyleplattner, for more details, check "this example":http://doc.qt.nokia.com/4.7/qml-listview.html#example-usage .
-
I followed the example exactly and the text will not show up.
-
Here is code I am using:
@ Rectangle {
id: rectangle2
x: 155
y: 117
width: 248
height: 336
radius: 22
border.width: 1
smooth: true
border.color: "#000000"
gradient: Gradient {
GradientStop {
position: 0
color: "#5e5e5e"
}GradientStop { position: 1 color: "#444444" } } ListView { id: list_view1 x: 155 y: 117 width: 250 height: 338 model: ListModel {} delegate: Text { text: name + ": " + number } } }@
-
Here is a complete example. Is something like this what you are looking for?
@
import Qt 4.7
Item {
width: 360
height: 360Rectangle { id: button width: buttonText.width + 10 height: buttonText.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: buttonText text: "Press here" color: "#ffffff" } MouseArea { anchors.fill: parent onClicked: { list.visible = !list.visible } } } ListView { id: list visible: false anchors.top: button.bottom anchors.bottom: parent.bottom anchors.right: parent.right anchors.left: parent.left 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 } }
}
@ -
Great, that gets the list to show up but what about scrolling with a flick gesture?
-
Sorry. Forgot to anchor the width. Updated. Try it now.
-
So I implemented a list with a highlight but how can I set it up so that my highlight moves with mouse clicks (screen taps)?
-
I would add something like this to the ListView
@
highlight: Rectangle { width: list.currentItem.width color: "lightsteelblue" radius: 5 } focus: true MouseArea { anchors.fill: parent onClicked: { list.currentIndex = list.indexAt(mouseX, mouseY) } }
@
-
Thanks so much, that does it.
-
Hello,
I have a problem with that snippet.
When I click on the list within its initial view, it performs fine: the highlight runs to the item currently clicked. But when I scroll that flickable ListView, and my visible area starts for instance with 'index=3' item, this line:list.currentIndex = list.indexAt(mouseX, mouseY)
still seems to calculate currentIndex as index at initial view when the visible area starts with 'index=1' item.
So the larger list and the scrolling distance, the further the highlight from the actual item it should be below.Did I misunderstand your idea?
Please help.