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



  • 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: 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
        }
    }
    

    }
    @



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.