如何使 QML ListView 宽度成为其委托的宽度？

Question

我创建了一个用户可以滚动的 ListView。我注意到滚动条没有出现，滚动也不起作用。

我发现问题是因为我将 ListView 宽度指定为 contentWidth。例如，如果我将其设置为 100，则会出现滚动条并且我可以滚动。但是，我希望 ListView 宽度由其内容决定（这就是我使用 contentWidth 的原因）。我做错了吗，我发现的有关此事的所有其他主题都说 contentWidth 应该起作用......

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15
    
Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentWidth

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            width: contentWidth
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}

Answer 1

一些评论：

• 在 ListView（Flickable 的子类型）上，您必须手动设置 contentWidth。默认情况下它是-1，这意味着它尚未设置。（尽管在这种情况下，如果未设置，contentWidth 将使用宽度。）

• 对于这种布局和指定的高度，您需要为 ListView 打开剪裁。它通常是关闭的，因为它们经常用于全窗口布局。你需要把它放在这里才能让它看起来实际上是 100 高。

• 根据三个 TextField 子项，每行都有自己的隐式宽度。设置它的宽度只会干扰它。

• 如果您希望 ListView 匹配其内容宽度，那么您必须进入其 contentItem（委托行实际附加的位置），然后您可以使用其childrenRect 的宽度。

更新的代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15

Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentItem.childrenRect.width
        clip: true

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}