如何使QML ListView部分围绕项目

Question

我有一个QML ListView，它的模型来自C++端。到目前为止一切都很好。现在列表项有一个节标题属性，我想根据它们的节对项进行分组。section delegate UI元素应替代属于该section的所有项。我似乎无法让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顺序可能会将section delegate元素放在list item元素后面，但事实并非如此。有什么想法吗？

Answer 1

好吧，我想你说的项目不是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
}
}
}
}
}
}
}
}

同样，我不知道你需要什么，所以上面的代码只是一个例子来展示我的想法。