Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Mouse Area Scroll



  • 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,


  • Moderators

    MouseArea {
      acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.Wheel
      hoverEnabled: true
    
      onWheel: {
        // do some stuff here
      }
    }
    

    hoverEnabled might be unnecessary.



  • @sierdzio said in Mouse Area Scroll:

    hoverEnabled might be unnecessary.

    acceptedButtons also



  • 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]



  • @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
                    }
                }
    


  • 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)
                        }
                    }
                }
            }
        }
    

Log in to reply