如何使 QML ListView 部分环绕项目？答案

【问题标题】：How to make QML ListView section surround items?如何使 QML ListView 部分环绕项目？
【发布时间】：2018-07-23 14:53:27
【问题描述】：

我有一个 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 顺序可能会将部分委托元素置于列表项元素之后，但事实并非如此。关于如何解决这个问题的任何想法？

【问题讨论】：

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

标签： c++ qt listview qml

【解决方案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
                            }
                        }
                    }
                }
            }
        }
    }
}

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

【讨论】：