QML flickable无法正常工作

Question

I'm trying to learn QML so that I'll be able to create a smartphone app. Right now I'm trying to create a list where each item should be "flickable" , this is what I want: When you grab a list item you should be able to drag it to the left (to reveal a menu below) and the actual list item should not completely disappear to the left edge, but still be a bit visible so you can drag it back. A solution as simple as possible would be appreciated :)!

Here's my start at it (only making the last rectangle flickable):

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

}

Answer 1

I figured it out! You just have to set the contentWidth to larger than the width of the 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
            }
        }

Answer 2

I like to set the contentWidth and contentHeight depending on the size of the Children. The only important thing is you have to bind to the size of contentItem.childrenRect. This took me almost a day to realize, maybe it will help you.

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