Как добавить разделы в GridView

Question

У меня есть код, который позиционирует изображения как сетка, используя GridView. Мне нужен такой же внешний вид только с использованием ListView. Зачем мне это нужно? Потому что ListView имеет section то, что не имеет GridView. Я хочу добавить изображения в раздел. Ключом к разделу будет дата изображения.

Вот как это выглядит сейчас с GridView

Это должно выглядеть так же с ListView, но я не знаю, как это сделать. Ее мой код.

 Page
 {
    id: page
    JsonListModel
    {
        id: jsonModel
        source: page.jsonData
        keyField: "id"
    }
    GridView
    {
        id: view

        anchors.topMargin: dp(5)
        anchors.fill: parent
        cellWidth:(parent.width/3)
        cellHeight: cellWidth
        model: jsonModel
        clip: true
        boundsBehavior: Flickable.OvershootBounds // for flicking
        snapMode: ListView.SnapToItem // to stop at begin of item


        delegate: Item
        {
            id: photo

            property var view: GridView.view
            property var isCurrent: GridView.isCurrentItem

            height: view.cellHeight
            width: view.cellWidth

            AppImage
            {
                id: appImage
                anchors
                {
                    rightMargin:
                    {
                        (index+1)%3 === 0 ? 0 : 3
                    }
                    bottomMargin: dp(20)
                    fill: parent
                }
                source: model.img_url
            }

            Text
            {
                anchors
                {
                    horizontalCenter: parent.horizontalCenter
                    top: appImage.bottom
                    topMargin: dp(2)
                    bottomMargin: dp(3)
                }
                renderType: Text.NativeRendering
                text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "")
                font.pointSize: sp(9)
            }
        }
    }
}

И как это должно выглядеть, как должно выглядеть

Answer 1

Хорошо, я думаю, что не существует готового решения, соответствующего вашим потребностям. GridView не имеет раздела, а LisView не имеет столбцов. Я могу предложить свое собственное псевдо-решение, своего рода обходной путь. Мы можем создать сетку и в этой сетке мы можем создавать разделы. Поскольку GridView не имеет свойства columnSpan, я думаю, что вместо него можно использовать GridLayout.

Итак, это элемент "view":

GridSection.qml

import QtQuick 2.12
import QtQuick.Layouts 1.12

Flickable {
    id: root
    property int columns: 1
    property ListModel model: ListModel {}
    property Component itemDelegate: Item {}
    property Component sectionDelegate: Item {}
    contentHeight: layout.height
    contentWidth: layout.width
    GridLayout {
        id: layout
        columns: 3
        columnSpacing: 0
        rowSpacing: 0
        Component.onCompleted: {
            var lastSection = "";
            for(var i = 0;i < root.model.count;i ++)
            {
                var element = root.model.get(i);
                if(element.section !== lastSection)
                    root.sectionDelegate.createObject(layout, { "name": element.section, "Layout.columnSpan": root.columns });

                root.itemDelegate.createObject(layout, { "name": element.name });
                lastSection = element.section;
            }
        }
    }
}

и использование:

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: main
    visible: true
    width: 400
    height: 400

    GridSection {
        anchors.fill: parent
        columns: 3
        model: ListModel {
            ListElement { name: "element1"; section: "section1" }
            ListElement { name: "element2"; section: "section1" }
            ListElement { name: "element3"; section: "section1" }
            ListElement { name: "element4"; section: "section2" }
            ListElement { name: "element5"; section: "section2" }
            ListElement { name: "element6"; section: "section3" }
            ListElement { name: "element7"; section: "section3" }
            ListElement { name: "element8"; section: "section3" }
            ListElement { name: "element9"; section: "section3" }
        }
        itemDelegate: Rectangle {
            property string name
            color: "greenyellow"
            width: 100
            height: 50
            Text {
                text: name
                anchors.centerIn: parent
            }
        }
        sectionDelegate: Rectangle {
            property string name
            width: 300
            height: 20
            color: "orange"
            Text {
                text: name
                anchors.centerIn: parent
            }
        }
    }
}

Поскольку мы не можем создать динамические c свойства в QML мы должны сначала создать stati c свойства (property string name) в делегатах. Но вы можете сделать то же самое в C ++, используя setProperty без определения значений c.