滚动条在 ScrollView qml 中不起作用

Question

我正在尝试在滚动视图中使用滚动条。滚动条出现了，我可以与之交互 (hover/pressed)，但它没有移动，我不明白为什么。我按照官方文档和在线示例编写了我的代码。

代码如下：

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

    }
}

好的，所以我将代码编辑为较小的版本，这样它就可以运行。

Answer 1

一些建议：

使用锚点或布局。不要使用固定值或某种零食，无论它是否有效。您的代码的长期价值将很糟糕。
您应该仔细阅读 (ScrollView documentatio). Also the Size section and the Touch and Mouse Interaction Section.

我可以在没有动画的情况下修改您的示例。

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

滚动条在 ScrollView qml 中不起作用

Scroll Bar is not working in ScrollView qml

qt

qml