如何使 QML 列表视图宽度与其委托的宽度相同？

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(在那里委派行实际上是附加的)，然后你可以使用它的宽度的儿童矩形。

更新代码:

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