Mouse Area Scroll

PixyWitchy

Good morning,

I was trying to use mouseArea onWheel to do some animation on scrolling but it doesn't seem to work. Can someone give me an example of scroll detection with mouseArea?

Thank you,

sierdzio

MouseArea {
  acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.Wheel
  hoverEnabled: true

  onWheel: {
    // do some stuff here
  }
}

hoverEnabled might be unnecessary.

ODБOï

@sierdzio said in Mouse Area Scroll:

hoverEnabled might be unnecessary.

acceptedButtons also

Shrinidhi Upadhyaya

Hi @PixyWitchy , can you tell us more like which item you are using like Flickable,ListView,ScrollView etc.

And can you show us a sample example or code like what is expected UI and behavior.

Note:- Have a look once,Flickable[https://doc.qt.io/qt-5/qml-qtquick-flickable.html#dragging-prop]

PixyWitchy

@Shrinidhi-Upadhyaya this groupbox is inside a dialog and i use a repeater to create some data

GroupBox {
                id: groupBox
                title: multiSelectorDialog.message
                property var initSize: 0
                Layout.minimumWidth: 150

                Column {
                    id: columnBox
                    spacing: 10
                    Layout.fillWidth: true

                    MouseArea {
                        anchors.fill: parent
                        scrollGestureEnabled: true
                        onWheel: {
                            console.log("whee-whee")
                        }
                    }
                    // the Repeater will create all the checkbox using the c++ model
                    Repeater {
                        id: checkboxList

                        model: multiSelectorModel
                        CheckBox {
                            text: textOption
                            checked: check
                        }
                    }
                }
                onHeightChanged: window.height = dialog.height + height
                onWidthChanged: {
                    // to get responsive size
                    if (window.width == 0)
                    {
                        initSize = width
                    }
                    window.width = width + initSize + dialog.leftMargin + dialog.leftPadding
                }
            }

IntruderExcluder

Flickable is what you need. Simple example with GroupBox and scrollable content (20 default checkboxes):

    GroupBox {
        id: gb
        width: 200
        height: 200
        title: "Some Title"

        Flickable {
            anchors.fill: parent

            contentWidth: width
            contentHeight: column.implicitHeight
            clip: true

            Column {
                id: column
                width: parent.width

                Repeater {
                    visible: false
                    model: 20
                    delegate: CheckBox {
                        width: gb.width
                        text: "CheckBox %1".arg(model.index)
                    }
                }
            }
        }
    }