ScrollView 内的 ColumnLayout 不会调整其内容的大小答案

【问题标题】：ColumnLayout inside ScrollView doesn't resize its contentScrollView 内的 ColumnLayout 不会调整其内容的大小
【发布时间】：2020-10-21 05:06:20
【问题描述】：

它的外观如下：

第三个和第四个Card 都用ColumnLayout 布局。唯一的区别是第四个Card 中的ColumnLayout 在ScrollView 内部。这是main.qml：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: "Test Window"

    GridLayout{
        anchors.fill: parent
        columns: 2
        rows: 2
        Card{
            header: "H1"
            ColumnLayout{
                Text{text: "text 1"}
                Text{text: "text 2"}
                Text{text: "text 3"}
            }
        }
        Card{
            header: "H2"
            Text{text: "text 2"}
        }
        Card{
            header: "H3"
            ColumnLayout{
                Field{
                    label: "Name"
                    placeholder: "name"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
            }
        }
        Card{
            header: "H4"
            ScrollView{
                /*
                anchors.fill: parent
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: parent.width
                Layout.preferredWidth: parent.width
                contentWidth: parent.width
                width: parent.width
                */

                clip: true
                ColumnLayout{
                    //anchors.fill: parent
                    Field{
                        label: "Name"
                        placeholder: "name"
                    }
                    Field{
                        label: "Age"
                        placeholder: "age"
                    }
                    Field{
                        label: "Address"
                        placeholder: "address"
                    }
                    Field{
                        label: "Age"
                        placeholder: "age"
                    }
                    Field{
                        label: "Address"
                        placeholder: "address"
                    }
                }
            }
        }
    }
}

我已经尝试过在 4th Card 中注释掉的所有内容，但这些都没有帮助！这是Card.qml：

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item {
    default property alias content: content.children /*content.data*/
    property alias header: header.text
    property double margin: 10
    property double separatorMargin: 5

    Layout.fillHeight: true
    Layout.fillWidth: true
    Layout.margins: 10

    Rectangle{
        id: rect
        anchors.fill: parent
        ColumnLayout{
            anchors.fill: parent
            Text{
                id: header
                font.bold: true
                leftPadding: margin
                topPadding: margin
            }
            Rectangle{
                id: separator
                Layout.fillWidth: true
                Layout.leftMargin: separatorMargin
                Layout.rightMargin: separatorMargin
                height: 2
                border.color: "black"
            }
            StackLayout {
                id: content
                Layout.preferredHeight: parent.height
                Layout.leftMargin: margin
                Layout.rightMargin: margin
            }
        }
    }
    DropShadow{
        anchors.fill: rect
        source: rect
        radius: 10
        samples: 15
        color: "black"
    }
}

这里是Field.qml：

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout{
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label{
        id: label
        Layout.minimumWidth: 50
    }
    TextField{
        id: field
        Layout.fillWidth: true
        Layout.preferredHeight: 30
        font.pointSize: 12
        verticalAlignment: Qt.AlignVCenter
    }
}

【问题讨论】：

标签： qt layout qml scrollview

【解决方案1】：

我不知道为什么发布问题后我会得到一些答案！

This 有一个解决方案，我想补充一下：

width: Math.max(implicitWidth, scrollview.availableWidth)

在ColumnLayout内。

编辑

如果我添加，这不起作用：

ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

以下是关闭水平条后的样子：

【讨论】：