December 8, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

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

December 8, 2010

anselmolsm anselmolsm
Ant Farmer
384 posts

Put a ListView (which inherits Flickable) inside an Item that appears only when this button is clicked. Something like this:

  1. import Qt 4.7
  2.  
  3. Item {
  4.     width: 360
  5.     height: 360
  6.  
  7.     //Button
  8.     Rectangle {
  9.         width: 50
  10.         height: 50
  11.         color: "red"
  12.         MouseArea {
  13.             anchors.fill:  parent
  14.             onClicked: {
  15.                 list.visible = true;
  16.             }
  17.         }
  18.     }
  19.  
  20.     // This List is a custom element
  21.     List {
  22.         id: list
  23.         visible: false
  24.         anchors.fill:  parent
  25.     }
  26. }

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

 Signature 

Anselmo L. S. Melo (anselmolsm)
www.anselmolsm.org

December 8, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

Where do I add the items in my list?

December 8, 2010

anselmolsm anselmolsm
Ant Farmer
384 posts

kyleplattner, for more details, check this example [doc.qt.nokia.com] .

 Signature 

Anselmo L. S. Melo (anselmolsm)
www.anselmolsm.org

December 8, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

I followed the example exactly and the text will not show up.

December 8, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

Here is code I am using:

  1.  Rectangle {
  2.         id: rectangle2
  3.         x: 155
  4.         y: 117
  5.         width: 248
  6.         height: 336
  7.         radius: 22
  8.         border.width: 1
  9.         smooth: true
  10.         border.color: "#000000"
  11.         gradient: Gradient {
  12.             GradientStop {
  13.                 position: 0
  14.                 color: "#5e5e5e"
  15.             }
  16.  
  17.             GradientStop {
  18.                 position: 1
  19.                 color: "#444444"
  20.             }
  21.         }
  22.  
  23.         ListView {
  24.             id: list_view1
  25.             x: 155
  26.             y: 117
  27.             width: 250
  28.             height: 338
  29.             model: ListModel {}
  30.                 delegate: Text {
  31.                     text: name + ": " + number
  32.                 }
  33.  
  34.         }
  35.     }

December 8, 2010

Bradley Bradley
Lab Rat
300 posts

Here is a complete example. Is something like this what you are looking for?

  1. import Qt 4.7
  2.  
  3. Item {
  4.     width: 360
  5.     height: 360
  6.  
  7.     Rectangle {
  8.         id: button
  9.         width: buttonText.width + 10
  10.         height: buttonText.height + 10
  11.         radius: 3
  12.         border.width: 1
  13.         smooth: true
  14.         border.color: "#000000"
  15.         gradient: Gradient {
  16.             GradientStop {
  17.                 position: 0
  18.                 color: "#5e5e5e"
  19.             }
  20.             GradientStop {
  21.                 position: 1
  22.                 color: "#444444"
  23.             }
  24.         }
  25.         Text {
  26.             x: 5
  27.             y: 5
  28.             id: buttonText
  29.             text: "Press here"
  30.             color: "#ffffff"
  31.         }
  32.         MouseArea {
  33.             anchors.fill:  parent
  34.             onClicked: {
  35.                 list.visible = !list.visible
  36.             }
  37.         }
  38.     }
  39.  
  40.     ListView {
  41.         id: list
  42.         visible: false
  43.         anchors.top:  button.bottom
  44.         anchors.bottom:  parent.bottom
  45.         anchors.right:  parent.right
  46.         anchors.left:  parent.left
  47.         model: ListModel {
  48.             ListElement {
  49.                 name: "Bill Smith"
  50.                 number: "555 3264"
  51.             }
  52.             ListElement {
  53.                 name: "John Brown"
  54.                 number: "555 8426"
  55.             }
  56.             ListElement {
  57.                 name: "Sam Wise"
  58.                 number: "555 0473"
  59.             }
  60.         }
  61.         delegate: Text {
  62.             text: name + ": " + number
  63.         }
  64.     }
  65. }

 Signature 

Nokia Certified Qt Specialist.

December 8, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

Great, that gets the list to show up but what about scrolling with a flick gesture?

December 8, 2010

Bradley Bradley
Lab Rat
300 posts

Sorry. Forgot to anchor the width. Updated. Try it now.

 Signature 

Nokia Certified Qt Specialist.

December 9, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

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

December 9, 2010

Bradley Bradley
Lab Rat
300 posts

I would add something like this to the ListView

  1.         highlight: Rectangle {
  2.             width: list.currentItem.width
  3.             color: "lightsteelblue"
  4.             radius: 5
  5.         }
  6.         focus: true
  7.         MouseArea {
  8.             anchors.fill: parent
  9.             onClicked: {
  10.                 list.currentIndex = list.indexAt(mouseX, mouseY)
  11.             }
  12.         }

 Signature 

Nokia Certified Qt Specialist.

December 9, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

Thanks so much, that does it.

December 13, 2010

hyperborean72 hyperborean72
Lab Rat
6 posts

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.

 
  ‹‹ Photoshop QML Exporter      Horizontal ListView / ListModel + Stretching ››

You must log in to post a reply. Not a member yet? Register here!