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
12 replies
Put a ListView (which inherits Flickable) inside an Item that appears only when this button is clicked. Something like this:
- import Qt 4.7
- Item {
- 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?)
kyleplattner, for more details, check this example [doc.qt.nokia.com] .
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: 360
- Rectangle {
- 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
- }
- }
- }
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.
You must log in to post a reply. Not a member yet? Register here!