如何在QML的Rectangle上添加ScrollView，解决锚点报错及覆盖内容问题

根因说明 #

• 锚点报错：当你把Column放入ScrollView内部后，Column的父级变为ScrollView的内容容器，原有代码中anchors.top: label.bottom引用了父层级外的label元素，违反了QML锚点只能绑定父级或同层级兄弟元素的规则。
• ScrollView覆盖全部内容：未给ScrollView设置正确的锚定范围，默认填充满父级容器就会盖住顶部的标题栏区域。

修改后完整代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15

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

    ScrollView {
        anchors.top: label.bottom
        anchors.left: root.left
        anchors.right: root.right
        anchors.bottom: root.bottom
        ScrollBar.horizontal.visible: false

        Column  {
            width: root.width
            anchors.horizontalCenter: parent.horizontalCenter
            topPadding: 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
                    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
                    }
                }
            }
        }
    }
}

关键修改说明 #

• ScrollView锚定顶部为label的底部，其余三边绑定根容器root，确保不会覆盖顶部标题栏。
• Column放入ScrollView内部后，锚点仅绑定ScrollView的内容容器，不再引用外部元素，解决锚点报错问题。
• 关闭横向滚动条，内容布局和原有逻辑保持一致，滚动范围随Column内容高度自动适配。

内容的提问来源于stack exchange，提问作者Isidore