我需要在我的矩形上设置 ScrollView，我该怎么做？

Question

整个问题是 我试图实现它，但总是遇到一些问题， 比如，ScrollView 覆盖了全部内容，或者我遇到了 Column-item

的问题

Cannot anchor to an item that isn't a parent or sibling.

我的整个标签的画面在这里

我需要放置滚动视图的标签

Rectangle{
    id:root
    color: "white"
    anchors.fill: parent
            Rectangle{
                id:label
                color: "#F6F6F6"
                width: root.width
                height: root.height * 0.20
                z: parent.z + 4
                Text{
                    width: label.width
                    height: label.height
                    text: getImageName()
                        font.family: "Abel"
                        font.pointSize: 24
                        color: "#4A3F35"
                        lineHeight: 24
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                }
            }
            Column  {
                anchors.top: label.bottom
                anchors.horizontalCenter: root.horizontalCenter
                anchors.topMargin: label.height * 0.5
                spacing: label.height * 0.3
                Repeater {
                        id:secondTabRepeater
                        model: getAmountOfMountedVolumes()
                        Rectangle{
                            id:driveInfoRectangle
                            width: root.width * 0.87
                            height: root.height * 0.20
                            color:"white"
                            radius: 5
                            border.color: getUsbDevice(index)
                            border.width: 2
                            //border.color: "#4A3F35"
                            Text {
                                id: memorySizeText
                                text: getUsbSpace(index) + " Gb"
                                anchors.fill: parent
                                font.family: "Abel"
                                font.pointSize: 22
                                color: "#4A3F35"
                                lineHeight: 22
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                            }
                            Text {
                                id: drivePathText
                                text: getUsbDevice(index)
                                anchors.fill: parent
                                anchors.bottomMargin: 5
                                font.family: "Abel"
                                font.pointSize: 14
                                color: "#4A3F35"
                                lineHeight: 12
                                verticalAlignment: Text.AlignBottom
                                horizontalAlignment: Text.AlignHCenter
                            }
                            
                        }
                }
            }
}

Answer 1

试试这个： 我在一个 Flickable 中添加 ScrollBar 到你的代码中，现在它可以工作了。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle{
        id:root
        color: "white"
        anchors.fill: parent
        Rectangle{
            id:label
            color: "#F6F6F6"
            width: root.width
            height: root.height * 0.20
            z: parent.z + 4
            Text{
                width: label.width
                height: label.height
                text:"Example"
                font.family: "Abel"
                font.pointSize: 24
                color: "#4A3F35"
                lineHeight: 24
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }

        Flickable{

            width: parent.width
            height: parent.height
            contentHeight: mColumnId.implicitHeight
            contentWidth:  mColumnId.implicitWidth

            Column  {
                id:mColumnId
                anchors.top: label.bottom
                anchors.horizontalCenter: root.horizontalCenter
                anchors.topMargin: label.height * 0.5
                spacing: label.height * 0.3
                Repeater {
                    id:secondTabRepeater
                    model: 10
                    Rectangle{
                        id:driveInfoRectangle
                        width: root.width * 0.87
                        height: root.height * 0.20
                        color:"white"
                        radius: 5
                        border.color: getUsbDevice(index)
                        border.width: 2
                        //border.color: "#4A3F35"
                        Text {
                            id: memorySizeText
                            text: getUsbSpace(index) + " Gb"
                            anchors.fill: parent
                            font.family: "Abel"
                            font.pointSize: 22
                            color: "#4A3F35"
                            lineHeight: 22
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }
                        Text {
                            id: drivePathText
                            text: getUsbDevice(index)
                            anchors.fill: parent
                            anchors.bottomMargin: 5
                            font.family: "Abel"
                            font.pointSize: 14
                            color: "#4A3F35"
                            lineHeight: 12
                            verticalAlignment: Text.AlignBottom
                            horizontalAlignment: Text.AlignHCenter
                        }

                    }
                }
            }

            ScrollBar.vertical: ScrollBar{}
            ScrollBar.horizontal: ScrollBar{}

        }
    }
}