Is there a way to add sections to QListView? - qt

Question

I'm using Qt5.2 anc C++ to implement an application and need to display a list with sections similar to the example image below:
(source: ngo-hung.com)
Please note I'm not implementing a mobile app and I don't need the alphabet index on the right. Any suggestions how I can achieve this other than implementing a QTreeView?
Thanks.

Answer 1

ListView in QML has built-in support for sections. In the following example, I have a ListModel where the section is defined via a "sec" role. The ListModel defines a section delegate as well as a contact delegate:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Page {
id: page
header: Frame {
background: Rectangle {
color: "red"
}
RowLayout {
width: parent.width
Item {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Button {
anchors.centerIn: parent
background: Item {}
icon.source: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/address-book-32.svg"
icon.width: 32
icon.height: 32
icon.color: "white"
}
}
Text {
Layout.fillWidth: true
text: qsTr("All Contacts")
color: "white"
}
}
}
anchors.fill: parent
ListView {
anchors.fill: parent
model: contacts
delegate: Frame {
width: ListView.view.width
RowLayout {
width: parent.width
Item {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Button {
anchors.centerIn: parent
background: Item {}
icon.source: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/user-32.svg"
icon.width: 32
icon.height: 32
icon.color: "green"
}
}
ColumnLayout {
Layout.fillWidth: true
Text {
Layout.fillWidth: true
text: fn
}
Text {
Layout.fillWidth: true
text: qsTr("Full name: %1 %2").arg(fn).arg(sn)
}
}
}
}
section.property: "sec"
section.delegate: Frame {
width: ListView.view.width
background: Rectangle {
color: "lightsteelblue"
}
Text {
text: section
color: "white"
}
}
}
ListModel {
id: contacts
ListElement {
sec: "B"; fn: "Branda"; sn: "Respass"
}
ListElement {
sec: "C"; fn: "Chana"; sn: "Hollin"
}
ListElement {
sec: "D"; fn: "Delisa"; sn: "Deak"
}
ListElement {
sec: "D"; fn: "Demetrius"; sn: "Zona"
}
ListElement {
sec: "D"; fn: "Dwain"; sn: "Mark"
}
}
}
You can Try it Online!