How to make QML ListView section surround items?

Question

I have a QML ListView with a model coming from the C++ side. So far everything looks fine. Now the list items have a section headline property and I want to group the items according to their sections. The section delegate UI element should surrond all items belonging to that section. I can't seem to get around having the section element appear as another list item.

Again, instead of

--------- ------ ------ --------- ------ ------
|section| |item| |item| |section| |item| |item|
--------- ------ ------ --------- ------ ------

I want this

------------------------ ------------------------
|        ------ ------ | |        ------ ------ |
|section |item| |item| | |section |item| |item| |
|        ------ ------ | |        ------ ------ |
------------------------ ------------------------

This is basically the code I'm working with so far:

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

I thought the alignment and the z order might bring the section delegate element behind the list item element, but it doesn't. Any ideas on how to go about this?

Sections and items are siblings, it's not a tree structure. So you can do that only with some size trick. What is you real target you want to archive? — folibis
It's a horizontal list and I want the section headline to start above the first item that belongs to the section, but I don't want it to be cut off at the end the first item. You know what I mean? Also, I want a rounded rectangle in background that includes all items of one section. I'm thinking I could probably achieve this by styling the delegate column accordingly, taking into account whether the item is the first, a middle or the last item. — sthoepner

folibis folibis · Accepted Answer · 2018-07-24T07:10:04

Ok, I think that item you are talking about is not ListView. Maybe TreeView is better suited to your purpose but that requires C++ model. As a lightweight option of TreeView you can use something like following:

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

Again, I don't know for what you need all this so the code above is just an example to show my idea.

How to make QML ListView section surround items?

1 Answers