CODEWITHSUNDEEP
gridviewqmlqtquick2stackview
user023835
user023835

Reputation: 27

Turning off the bouncing animation for QML GridView elements

I am building an QtQuick application by using StackView. Everything is going well except one major thing for me. I am using GridView to create some buttons or tables by using delegates. But if user clicks on these delegates (rectangle for my situation) and drag it to top or bottom, elements (rectangles) are moving. When user release it, its coming back to original position. I am looking for a solution to keep them fixed. Here is my snippet

ListModel {
    id: stepList
    ListElement { name: "button1";   src:"/images/stepsTitleActive.png"; }
    ListElement { name: "button2";  src:"/images/stepsTitle.png" ; }
}

GridView {
    id: stepListGrid
    anchors.fill: parent
    anchors.leftMargin: 42
    anchors.topMargin: 73
    model: stepList
    cellHeight: 31
    cellWidth: 164
    delegate: Rectangle {  // this is the place where i create buttons
        id: rectfor
        width: 158
        height: 31
        color: "transparent"
        radius: 20

        Text {                // t his is the place where i put some texts in the buttons
            color: "#4A4A4A"
            text: name
            font.family: "SF Pro Text"
            font.weight: 500
            font.pixelSize: 11
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 9
            z: 999
        }

        Image {          // this is the place background for buttons(rectangles)
            id: stepListBackground
            anchors.fill: parent
            source: src
        }
    }
}

User can click and hold on button1 and can move it up and down, with whole gridview elements. I want to disable it. I've read this document below but could not figure it out.

https://doc-snapshots.qt.io/qt6-dev/qml-qtquick-gridview.html#delegate-prop

Upvotes: 0

Views: 624

Answers (1)

iam_peter
iam_peter

Reputation: 3914

GridView is a Flickable and Flickable was made for mobile use. You need to set the property boundsBehavior to Flickable.StopAtBounds. The default is Flickable.DragAndOvershootBounds. Have a look at the Flickable documentation.

This fixes the overshoot behavior, but if enough items are in your GridView it can still be dragged/flicked by the user. To deactivate that you need to set interactive to false. If you do so you need to make sure that your users can still scroll the GridView to reach all the items that are potentially out of view. Probably you need to decorate the Flickable/GridView with a ScrollView.

Upvotes: 2

Related Questions