How to add Section footer, Section summary and Grand Total in ListView

问题

Here's my ListView with section:

ListView{
    id: listView
    width: parent.width
    height: parent.height
    model: testContext.List
    interactive: false

    delegate: ItemDelegate {
        width: parent.width
        padding: 3
        leftPadding: 15
        rightPadding: scroll.width
        contentItem: RowLayout{
            Text{
                id: nameText
                text: modelData.name
                Layout.preferredWidth: (parent.width - scroll.width) / 3
            }
            Text{
                text: modelData.isActive
                Layout.preferredWidth: (parent.width - scroll.width) / 3
            }
            Text{
                text: modelData.age
                Layout.preferredWidth: (parent.width - scroll.width) / 3
                horizontalAlignment: Text.AlignRight
            }
        }
        background: Rectangle{
            width: parent.width - scroll.width + 5
            color: hovered? "gray" : "white"
        }
        highlighted: ListView.isCurrentItem
        onClicked: listView.currentIndex = index

        Binding{
            target: nameText
            property: "font.bold"
            value: hovered | highlighted
        }
    }

    section.property: "modelData.group"
    section.delegate: Rectangle{
        width: parent.width - scroll.width + 5
        height: 18
        color: "lightsteelblue"
        Text {
            height: parent.height
            text: section
            font.bold: true
            verticalAlignment: Text.AlignVCenter
        }
    }
    ScrollBar.vertical: ScrollBar{id: scroll; width: 15}
}

My last 3 questions are based on almost identical c++ code so I think there's no need to copy-paste all those in this question. Here's the c++ code I started with and here I've added one more Q_PROPERTY in my Model. In addition to that I've added another Q_PROPERTY named group in my Model:

class AClass : public QObject
{
    Q_OBJECT
    PROPERTY(QString, group)
    PROPERTY(QString, name)
    PROPERTY(int, age)
    PROPERTY(bool, isActive)
};

and set group in the constructor of ViewModel:

Test::Test(QObject *parent) : QObject(parent)
{
    ...
    if(i < 4) a->setgroup("Group 1");
    else if (i < 7) a->setgroup("Group 2");
    else a->setgroup("Group 3");
    ...
}

the QML is also identical to my previous question except for:

section.property: "modelData.group"
section.delegate: Rectangle{
    width: parent.width - scroll.width + 5
    height: 18
    color: "lightsteelblue"
    Text {
        height: parent.height
        text: section
        font.bold: true
        verticalAlignment: Text.AlignVCenter
    }
}

and I also have removed background color from itemDelegate. With all those changes the ListView now looks like this:

What I want now is to add a footer for each section, section total beneath the modelData.age column and a grand total at the bottom. In WPF we've CollectionViewSource, GroupStyle and IValueConverter to achieve that easily and can present things with ItemsControl or any derivative of that like this:

How can I do that in QML?

来源：https://stackoverflow.com/questions/62640366/how-to-add-section-footer-section-summary-and-grand-total-in-listview

标签

listview

qml

sections