如何使QML ListView节包围项?

时间:2018-07-23 14:53:28

标签: c++ qt listview qml

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

1 个答案:

答案 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
                            }
                        }
                    }
                }
            }
        }
    }
}

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