Qt Quick QML Flickable disable flicking and enable only scrolling

Question

I have two Flickable inside a column and I want to scroll vertically first Flickable when user scrolls second Flickable.

Rectangle { 
id: root
anchors.fill: parent

Flickable {
  id: first
  anchors.left: parent.left
  width: parent.width/2 
  height: parent.height

  // Rest of the Contents
  // I have also some TextFields and ComboBoxs here
}

Flickable {
  id: second
  anchors.left: first.right
  width: parent.width/2
  height: parent.height

  onFlickEnded: {
    first.contentY = second.contentY;
  }

  // Rest of the Contents
  // I have also some TextFields and ComboBoxs here
}

}

I am able to do this by using onFlickEnded event, is this correct way? How can I disable flicking effect when user clicks and drag and just have scrolling effect using mouse wheel?

Should I use ScrollView instead, but I am not able to scroll it as I did with Flickable.

score 0 · Answer 1 · answered Nov 12 '21 at 17:34

0

Using the onFlickStarted you can immediately call cancelFlick() on the flickable that you are wanting disabled. Then handle it using onContentYChanged.

answered Nov 12 '21 at 17:34

user17397699

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 12 '21 at 19:14

score 0 · Answer 2 · answered Mar 26 '22 at 10:33

In order to disable mouse dragging in a Flickable, you need to set interactive to false first, then add a MouseArea to it as follows:

        MouseArea
        {
            id: mousearea
            anchors.fill: parent
            //so that flickable won't steal mouse event
            //however, when the flickable is flicking and interactive is true
            //this property will have no effect until current flicking ends and interactive is set to false
            //so we need to keep interactive false and scroll only with flick()
            preventStealing: true

            //scroll velocity
            property real nextVelocity: 0
            property real curWeight: baseWeight
            property real baseWeight: 4
            property real maxWeight: 12
            property real stepWeight: 2
            property real maxVelocity: 2400
            property real minVelocity: -2400
            Timer
            {
                id: timer
                interval: 1000 / 60
                repeat: false
                running: false

                onTriggered: parent.scroll()
            }

            function scroll()
            {
                var velocity = -parent.verticalVelocity + nextVelocity
                parent.flickDeceleration = Math.abs(velocity) * 2.7
                console.log(nextVelocity, parent.verticalVelocity, velocity)
                parent.flick(0, velocity)
                nextVelocity = 0
                curWeight = baseWeight
            }

            onWheel:
            {
                wheel.accepted = true
                var deltay = wheel.angleDelta.y
                nextVelocity += curWeight * deltay

                if(nextVelocity > maxVelocity)
                    nextVelocity = maxVelocity
                else if(nextVelocity < minVelocity)
                    nextVelocity = minVelocity

                curWeight += stepWeight
                if(curWeight > maxWeight)
                    curWeight = maxWeight

                timer.start()
            }

            //make sure items can only be clicked when view is not scrolling
            //can be removed if you don't need this limitation
            onPressed:
            {
                mouse.accepted = parent.moving ? true : false
            }
            onReleased:
            {
                mouse.accepted = parent.moving ? true : false
            }
            onClicked:
            {
                mouse.accepted = parent.moving ? true : false
            }
        }

This prevents mouse click from being propagated to the flickable, and scrolls with increasing velocity as you scroll the wheel faster, while keeping the flicking duration around a fixed number. You can adjust it to suit your needs.

score -2 · Answer 3 · answered Jun 02 '20 at 12:30

-2

setting "interactive" to false should disable flicking.

Instead of "onFlickEnded" you can use "onContentYChanged".

answered Jun 02 '20 at 12:30

luffy

2,246
3
22
28

2

Adding interactive: false make it non scrollable using both mouse drag and scroll wheel, I want to have scrolling but disable flicking. – User7723337 Jun 02 '20 at 13:45

Qt Quick QML Flickable disable flicking and enable only scrolling

3 Answers3