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.

Answer 1

As @closer_ex said, you can you a MouseArea for doing a manually scroll. and if you attach a Scrollbar to your Flickable, it can be really easy. so this is the simplified version:

Flickable {

    interactive: false

    MouseArea {
        anchors.fill: parent
        preventStealing: true

        onWheel: event => {
                        if (event.angleDelta.y > 0) {
                            scrollBar.decrease()
                        } else {
                            scrollBar.increase()
                        }
                    }
    }

    ScrollBar.vertical: ScrollBar {
        id: scrollBar
        visible: false
    }
}

Answer 2

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.

Answer 3

setting "interactive" to false should disable flicking.

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

Answer 4

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