Question

我在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的迹象。

Answer 1

Qt Quick Layout调整其所有子项的大小（例如ColumnLayout调整子项的高度，RowLayout调整子项的宽度），因此您应使用Layout attached 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
            }
        }
    }
}

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

感谢他人的评论和回答，帮助我实现了这一目标！

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

2 个答案: