CODEWITHSUNDEEP
qt
Jake quin
Jake quin

Reputation: 742

How to use the scroll on a horizontal QML scrollview

I would like to use the scroll on my mouse to scroll on a horizontal scrollview. How to do i achieve this here is the code for my sample scroll view.

        ScrollView {
        id:scrollview

        ListView {
            anchors.fill: parent
            model: 30
            orientation: ListView.Horizontal
            delegate: Component{

                Item{
                    height: scrollview.height
                    width: scrollview.height

                    Rectangle{
                        anchors.fill: parent
                        color:"lightgrey"
                        Text{
                            anchors.centerIn: parent
                            text: index
                        }
                    }

                }
            }
        }
    }

I would like to achieve a scroll like in the vertical view but instead just in the horizontal orientation

Upvotes: 1

Views: 1982

Answers (1)

Rick Pat
Rick Pat

Reputation: 869

I got it to work with a MouseArea on top of the ScrollView that listens for mouse wheel events but passes through other events.

ScrollView {
    id:scrollview

    property int scrollSpeed: 30

    ListView {

        anchors.fill: parent
        model: 30
        orientation: ListView.Horizontal
        delegate: Component {

            Item {
                height: scrollview.height
                width: scrollview.height

                Rectangle {
                    anchors.fill: parent
                    color:"lightgrey"
                    Text {
                        anchors.centerIn: parent
                        text: index
                    }
                }

            }
        }
    }

}

MouseArea {
    anchors.fill: scrollview

    onWheel: {
        if (wheel.angleDelta.y > 0) {
            scrollview.flickableItem.contentX -= scrollview.scrollSpeed;
            if (scrollview.flickableItem.contentX < 0) {
                scrollview.flickableItem.contentX = 0;
            }
        } else {
            scrollview.flickableItem.contentX += scrollview.scrollSpeed;
            if (scrollview.flickableItem.contentX + scrollview.flickableItem.width > scrollview.flickableItem.contentWidth) {
                scrollview.flickableItem.contentX = scrollview.flickableItem.contentWidth -  scrollview.flickableItem.width;
            }
        }
    }
    onClicked: mouse.accepted = false;
    onPressed: mouse.accepted = false;
    onReleased: mouse.accepted = false;
    onDoubleClicked: mouse.accepted = false;
    onPositionChanged: mouse.accepted = false;
    onPressAndHold: mouse.accepted = false;
}

Upvotes: 2

Related Questions