如何使QML ListView部分环绕项目？ < >我有一个QC++ ListVIEW，它的模型来自C++端。到目前为止，一切看起来都很好。现在列表项有一个节标题属性，我想根据它们的节对这些项进行分组。section delegate 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顺序可能会将section delegate元素置于list item元素之后，但事实并非如此。你有什么想法吗？

好的，我想你说的不是

ListView

。也许<>代码>树视图> /Cord>更适合你的目的，但这需要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
                            }
                        }
                    }
                }
            }
        }
    }
}

---

同样，我不知道您需要这些，所以上面的代码只是一个示例来展示我的想法。

节和项是兄弟项，不是树结构。所以你只能通过一些尺寸技巧来做到这一点。你想要归档的真正目标是什么？这是一个横向列表，我希望章节标题从属于该章节的第一项开始，但我不希望它在第一项结束时被截断。你知道我的意思吗？此外，我希望在背景中有一个圆角矩形，其中包括一个部分的所有项目。我想我可以通过相应地设计delegate列的样式来实现这一点，同时考虑该项是第一项、中间项还是最后一项。