CODEWITHSUNDEEP
qtqml
Fakhr Ali
Fakhr Ali

Reputation: 128

Scroll Bar is not working in ScrollView qml

I'm trying to use a scrollbar inside a scrollview. The scrollbar shows up and I can interact with it (hover/pressed), but it doesn't move, and I can't understand why. I wrote my code by following the official documentation and online examples.

Here's the code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Window {

    width: 740
    height: 580
    visible: true
    color: "#00000000"
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle
        color: "#40405f"
        anchors.fill: parent

        Button {
            id: button
            text: qsTr("Menu")
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: 10
            anchors.bottomMargin: 466
            anchors.topMargin: 74
            onClicked: animationMenu.running = true
        }

        ScrollView {
            id: scrollView
            width: 0
            anchors.left: button.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: 10
            anchors.bottomMargin: 10
            anchors.topMargin: 10
            clip: true

            Rectangle {
                id: rectangle1
                color: "#00000000"
                border.color: "#00000000"
                border.width: 0
                anchors.fill: parent

                PropertyAnimation {
                    id: animationMenu
                    target: scrollView
                    property: "width"
                    to: if(scrollView.width == 0) return 240; else return 0
                    duration: 800
                    easing.type: Easing.InOutQuint
                }

                Column {
                    id: columnMenu
                    width: 0
                    anchors.fill: parent
                    spacing: 10

                    Button {
                        id: button1
                        text: qsTr("Button")
                    }

                    Button {
                        id: button2
                        text: qsTr("Button")
                    }

                    Button {
                        id: button3
                        text: qsTr("Button")
                    }

                    Button {
                        id: button4
                        text: qsTr("Button")
                    }
                }
            }

            ScrollBar {
                id: vbar
                hoverEnabled: true
                orientation: Qt.Vertical
                size: scrollView.height / rectangle1.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                wheelEnabled: true
                pressed: true
                active: true
            }
        }

    }
}

Ok, so I edited the code to a smaller version so that it can be run.

Upvotes: 0

Views: 1829

Answers (1)

oria66
oria66

Reputation: 123

Some advices:

  1. Use anchors or Layouts. Do not use fixed values or some kind of treats, no matter if it works. The long term value of your code will be bad.
  2. You should read carefully the (ScrollView documentatio). Also the Size section and the Touch and Mouse Interaction Section.

I am able to modify your example without the animation.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.15

Window {
    width: 740
    height: 580
    visible: true
    color: "#00000000"
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle
        color: "#40405f"
        anchors.fill: parent

        RowLayout{
            anchors.fill: parent

            Button {
                id: button
                text: qsTr("Menu")
                width: 100
                height: 50
            }

            ScrollView {
                id: scrollView
                Layout.fillWidth: true
                Layout.fillHeight: true

                RowLayout{
                    implicitHeight: 2000
                    implicitWidth: 2000

                    Column {
                        id: columnMenu
                        width: 0
                        anchors.fill: parent
                        spacing: 10

                        Repeater{
                            model: 50
                            delegate:  Button {
                                text: qsTr("Button")
                            }
                        }
                    }
                }
            }
        }
    }
}

Upvotes: 1

Related Questions