QML ScrollView不滾動

Question

我需要使用QML創建一個長格式。 該窗體將無法放入窗口內，因此我需要使其可滾動。 但是我無法使滾動視圖起作用。 這是我的問題的最小工作示例：

import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 1280
    height: 720
    title: qsTr("Hello World")

    Rectangle{
        anchors.centerIn: parent
        width: parent.width*0.8;
        height: parent.height*0.7;

        ScrollView {
            anchors.fill: parent
            clip: true
            contentHeight: parent.height

            Rectangle{
                id: rect1
                width: parent.width
                height: 200
                color: "#ffff00"
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Rectangle{
                id: rect2
                width: parent.width
                height: 500
                color: "#ff00ff"
                anchors.top: rect1.bottom
                anchors.horizontalCenter: parent.horizontalCenter
            }


            Rectangle{
                id: rect3
                width: parent.width
                height: 500
                color: "#00ffff"
                anchors.top: rect2.bottom
                anchors.horizontalCenter: parent.horizontalCenter
            }

        }

    }


}

據我了解，這應該允許我滾動才能看到3個矩形。 但是，我只看到第一個和第二個的上半部分，因此無法滾動。

任何幫助將不勝感激

Answer 1

將scrollview的高度和寬度設置為childs高度的總和！

Answer 2

由於ScrollView包含多個項目，因此您需要調整自己的大小 ，並將contentHeight顯式設置為所有項目的組合高度。

為了進行測試，可以將垂直滾動條始終設置為打開，以查看內容高度如何影響滾動條。

我注釋掉了水平中心錨點，因為它不是必需的（矩形的寬度是scrollview的寬度）。

ScrollView {
    anchors.fill: parent
    clip: true
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    contentHeight: rect1.height+rect2.height+rect3.height

    Rectangle{
        id: rect1
        width: parent.width
        height: 200
        color: "#ffff00"
        //anchors.horizontalCenter: parent.horizontalCenter
    }

    Rectangle{
        id: rect2
        width: parent.width
        height: 500
        color: "#ff00ff"
        anchors.top: rect1.bottom
        //anchors.horizontalCenter: parent.horizontalCenter
    }


    Rectangle{
        id: rect3
        width: parent.width
        height: 500
        color: "#00ffff"
        anchors.top: rect2.bottom
        //anchors.horizontalCenter: parent.horizontalCenter
    }

}

如果用項目包裹矩形並將項目implicitHeight高度設置為其高度，則ScrollView會正確檢測到contentHeight。

ScrollView {
    anchors.fill: parent
    clip: true
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    Item {
        width: parent.width
        height: rect1.height+rect2.height+rect3.height
        implicitHeight: height
        Rectangle{
            id: rect1
            width: parent.width
            height: 200
            color: "#ffff00"
        }
        Rectangle{
            id: rect2
            width: parent.width
            height: 500
            color: "#ff00ff"
            anchors.top: rect1.bottom
        }
        Rectangle{
            id: rect3
            width: parent.width
            height: 500
            color: "#00ffff"
            anchors.top: rect2.bottom
        }
    }
}

大多數項目的默認隱式大小為0x0，這就是為什么必須顯式設置項目的隱式高度的原因。 但是，某些項目具有固有的隱式大小，例如圖像和文本。 這意味着如果將TextArea放置到ScrollView中，則如果文本足夠長，它將自動變為可滾動的。

ScrollView {
    anchors.fill: parent
    clip: true
    TextArea {
        readOnly: true
        text: online ? provider.loadedText : "Offline"
        wrapMode: Text.WordWrap
    }
}