Modal Flickable List

kyleplattner

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

anselmolsm

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

Where do I add the items in my list?

anselmolsm

kyleplattner, for more details, check "this example":http://doc.qt.nokia.com/4.7/qml-listview.html#example-usage .

kyleplattner

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

kyleplattner

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
            }

    }
}@

baysmith

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

}
@

kyleplattner

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

baysmith

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

kyleplattner

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

baysmith

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

@

kyleplattner

Thanks so much, that does it.

hyperborean72

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.