Search code examples
qtuser-interfaceqmlqt-quick

QML flickable not working


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

}

Solution

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