为什么不能在 ColumnLayout 中使用 ScrollView？答案

【问题标题】：Why can't I use a ScrollView within a ColumnLayout?为什么不能在 ColumnLayout 中使用 ScrollView？
【发布时间】：2020-01-02 23:08:37
【问题描述】：

我在 ListView 周围有一个 ScrollView。但是当我把它放在一个 ColumnLayout 中时，ListView 就消失了。

我的实际代码更大更复杂，但我已将问题简化为这个小例子。

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: theModel
        ListElement { display: "one" }
        ListElement { display: "two" }
        ListElement { display: "three" }
        ListElement { display: "four" }
        ListElement { display: "five" }
    }

    ColumnLayout {
        ScrollView
        {
            width: 150
            height: 150
            clip: true
            ListView {
                model: theModel
                anchors.fill: parent
                delegate: Column {
                    TextField {
                        text: display
                    }
                }
            }
        }
        Rectangle {
            color: "black"
            width: 100
            height: 30
        }
    }
}

如果没有 ColumnLayout 和 Rectangle，我会得到一个可滚动的窗口，按预期显示 ListView 的一部分。但是在包含它们的情况下，除了矩形上方的一些空白区域之外，没有任何 ListView 的迹象。

【问题讨论】：

我宁愿为 ColumnLayout 定义大小（宽度/高度或其他方式），然后使嵌套项适合。现在我们的 ColumnLayout 没有大小，也没有定位在那个窗口中。
好点@alexander-v。我逐渐掌握了这个窍门！我在下面的答案中使用了 anchors.fill: parent。

标签： qt qml

【解决方案1】：

一个Qt Quick Layout调整其所有子项的大小（例如ColumnLayout调整子项的高度，RowLayout调整子项的宽度），因此您应该使用Layoutattached property来指示如何布局它们，而不是设置尺寸。例如

ScrollView {
    Layout.maximumHeight: 150 // height will be updated according to these layout properties

    width: 150
    clip: true
    ListView {
        model: theModel
        anchors.fill: parent
        delegate: Column {
            TextField {
                text: display
            }
        }
    }
}

【讨论】：

谢谢！这帮助我意识到我根本不想要一个布局，我想要一个定位器。（即列而不是列布局）。请参阅下面的答案。
@NigelSharp 您的评论似乎与您出版物的标题相矛盾：我根本不需要布局 - 为什么我不能在其中使用 ScrollView一个列 - 布局？

【解决方案2】：

布局会更改其子级的大小和位置。但是当我指定孩子的大小时，我只想改变位置。为此使用了定位器（特别是使用 Column 而不是 ColumnLayout）。此外，我还没有设置父布局 (/Positioner) 的大小，所以我现在使用 anchors.fill: parent 来设置。

    Column {
        anchors.fill: parent
        ScrollView
        {
            width: 150
            height: 150
            clip: true
            ListView {
                model: theModel
                anchors.fill: parent
                delegate: Column {
                    TextField {
                        text: display
                    }
                }
            }
        }
        Rectangle {
            color: "black"
            width: 100
            height: 30
        }
    }

感谢其他人的评论和回答帮助我实现了这一点！

【讨论】：

Positioner 或 Layout 的选择有一些原则，但最重要的是，如果一个容器的大小（由它自己或它的父级）指定，则应该考虑一个 Layout，否则，如果容器的大小是根据其子项计算得出的，定位器在大多数情况下都适合。
anchors.fill 在这里没有多大意义，除非您希望 Column 占用的空间超过其子项所需的空间。没有它，它将隐含地具有 150 的宽度（其子项的最大宽度）和 180 的高度（其子项的高度之和。