我有一个QML ListView,其模型来自C ++。到目前为止,一切看起来都很好。现在,列表项具有节标题属性,我想根据其节对项进行分组。部分委托UI元素应替代属于该部分的所有项目。我似乎无法绕开section元素显示为另一个列表项。
再次,而不是
--------- ------ ------ --------- ------ ------
|section| |item| |item| |section| |item| |item|
--------- ------ ------ --------- ------ ------
我想要这个
------------------------ ------------------------
| ------ ------ | | ------ ------ |
|section |item| |item| | |section |item| |item| |
| ------ ------ | | ------ ------ |
------------------------ ------------------------
这基本上是到目前为止我正在使用的代码:
ListView {
width: styles.thumbnailListWidth
height: styles.thumbnailListHeight
orientation: ListView.Horizontal
model: handler.stepList // stepList is generated in C++ code
delegate: Column {
Rectangle {
id: thumbnailContainer
width: 196
height: styles.thumbnailHeight
z: 100
Image {
id: screenshot
anchors.fill: parent
source: "image://steps/screenshot_" + index
}
}
}
section.property: "sectionHeadline"
section.criteria: ViewSection.FullString
section.delegate: Rectangle {
id: sectionContainer
anchors.left: thumbnailContainer.left
width: 300
height: 50
z: 0
Text {
text: section
color: colors.darkCharcoal05
font.family: fonts.montserratBold.name
font.pixelSize: 20
}
}
}
我认为对齐方式和z顺序可能会将节委托元素置于列表项元素的后面,但事实并非如此。关于如何解决这个问题的任何想法?
答案 0 :(得分:0)
好的,我认为您要谈论的不是ListView
。也许TreeView
更适合您的目的,但这需要C ++模型。作为TreeView
的轻量级选项,您可以使用类似以下的内容:
import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 800
height: 300
RowLayout {
id: rowView
property var items: [
{name: "France", color: "lightblue", children: ["Paris", "Lyon", "Nantes"]},
{name: "Germany", color: "orange", children: ["Berlin", "Hamburg"]},
{name: "Italy", color: "gold", children: ["Rome", "Milan", "Turin", "Venice"]},
]
anchors.centerIn: parent
spacing: 2
Repeater {
model: rowView.items
Layout.alignment: Qt.AlignVCenter
delegate: Rectangle {
height: 40
radius: 5
width: itemRow.width + 2
color: modelData.color
RowLayout {
id: itemRow
spacing: 2
height: 30
anchors.verticalCenter: parent.verticalCenter
Text {
text: modelData.name
leftPadding: 10
rightPadding: 10
}
Repeater {
model: modelData.children
delegate: Rectangle {
radius: 5
color: "lightgreen"
width: itemText.width + 20
height: parent.height
Text {
id: itemText
text: modelData
anchors.centerIn: parent
}
}
}
}
}
}
}
}
同样,我不知道您需要什么,所以上面的代码只是一个展示我的想法的例子。