QML ScrollView 不滚动

Posted 2023-02-16

【中文标题】QML ScrollView 不滚动

【英文标题】：QML ScrollView does not scroll

【发布时间】：2019-09-10 21:59:40

【问题描述】：

我需要使用 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 个矩形。但是我只看到第一个和第二个的上半部分，我无法滚动。

任何帮助将不胜感激

【参考方案1】：

因为您的 ScrollView 包含多个项目，您需要自己处理 sizing 并将 contentHeight 明确设置为所有项目的组合高度。

为了进行测试，您可以将垂直滚动条设置为始终打开，以查看内容高度如何影响滚动条。

我注释掉了水平中心锚定，因为它不是必需的（矩形的宽度是滚动视图宽度）。

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
    

【讨论】：

谢谢！！设置 contentHeight 是关键！！

【参考方案2】：

将滚动视图的高度和宽度设置为孩子高度相加的总和！