CODEWITHSUNDEEP
qtqmlqtquick2
Mike
Mike

Reputation: 878

Qml Flickable overwrite content

I tried to enable scrolling of the content in my application using a Flickable. Now content is scrollable, but content hides the top content.

Code: 

Flickable {
    anchors.top: pageMessagesHeader.bottom
    anchors.topMargin: 20

    boundsBehavior: Flickable.DragOverBounds
    contentHeight: contentItem.childrenRect.height
    contentWidth: contentItem.childrenRect.width
    height: 500
    width: 400
    ScrollBar.vertical: ScrollBar {}

    Rectangle {
        color: "white"
        height: 1000
        width: 400
        id: listMessages
    }

    }

Before scroll

After

Upvotes: 0

Views: 1020

Answers (1)

derM
derM

Reputation: 13691

Here you can find a sentence:

Flickable does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true.

Which is the solution.

Just add

clip: true

to your code, and you'll be good.

Clipping has some perfomance disavantages which can greatly affect the application as it grows. Hence, its usage, especially outside the views scenario, should be evaluated carefully.

Upvotes: 1

Related Questions