QML flickable not working

I am trying to learn QML to create a smartphone app. Right now I'm trying to create a list in which each item should be "flickable" , this is what I want: when you grab the list item, you can drag it to the left (until the menu below is shown) and the actual list item should not completely disappear on the left edge, but still be a little visible so you can drag it back. The solution would be as simple as possible :)!

Here is my beginning in it (only to create the last rectangle):

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Column {
        spacing: 5
        Rectangle {
            color: "green"
            width: 360
            height: 360/3
        }

        Rectangle {
            color: "red"
            width: 360
            height: 360/3
        }

        Flickable{
            interactive: true
            boundsBehavior: Flickable.StopAtBounds
            contentHeight: flickme.height
            contentWidth: flickme.width
            width: 360
            height: 360/3
            Rectangle {
                id:flickme
                color: "yellow"
                width: 360
                height: 360/3
            }
        }
    }

}
+3
source share
2 answers

! contentWidth Flickable.

Flickable{
            interactive: true
            boundsBehavior: Flickable.StopAtBounds
            contentHeight: flickme.height
            contentWidth: flickme.width*1.8
            width: 360
            height: 360/3
            Rectangle {
                id:flickme
                color: "yellow"
                width: 360
                height: 360/3
            }
        }
+3

contentWidth contentHeight Children. , contentItem.childrenRect. , , , .

Flickable {
    interactive: true
    boundsBehavior: Flickable.StopAtBounds
    contentHeight: contentItem.childrenRect.height
    contentWidth: contentItem.childrenRect.width
    width: 360
    height: 360/3
    Rectangle {
        id:flickme
        color: "yellow"
        width: 360
        height: 360/3
    }
}
+1

All Articles