有没有办法将部分添加到QListView？

Question

我正在使用Qt5.2和C++来实现一个应用程序,需要显示一个列表,其中的部分类似于下面的示例图片:

模拟http://www.ngo-hung.com/files/images/contact_list_view_1.png

请注意我没有实现移动应用程序,我不需要右侧的字母索引.除了实现QTreeView之外,我有什么建议可以实现这个目标吗？谢谢.

Answer 1

ListViewQML 中内置了对节的支持。在下面的示例中，我有一个 ListModel，其中该部分是通过“sec”角色定义的。定义ListView了一个部分委托和一个联系委托：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    title: "ListView sections demo"
    ListView {
        anchors.fill: parent
        model: contacts
        header: ListViewHeaderDelegate { }
        delegate: ListViewDelegate { }
        section.property: "sec"
        section.delegate: ListViewSectionDelegate { }
    }
    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" }
    }
}

// ListViewHeaderDelegate.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Frame {
    width: ListView.view.width
    background: Rectangle { color: "red" }
    RowLayout {
        width: parent.width
        AppIconButton { icon.source: "address-book-32.svg" }
        AppHeadingText { text: qsTr("All Contacts") }
    }
}

// ListViewDelegate.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Frame {
    width: ListView.view.width
    RowLayout {
        width: parent.width
        AppIconButton {
            icon.source: "user-32.svg"
            icon.color: "green"
        }
        ColumnLayout {
            Layout.fillWidth: true
            AppText { text: fn }
            AppText { text: qsTr("Full name: %1 %2").arg(fn).arg(sn) }
        }
    }
}

// ListViewSectionDelegate.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Frame {
    width: ListView.view.width
    background: Rectangle { color: "lightsteelblue" }
    RowLayout {
        AppHeadingText { text: section }
    }
}

// AppIconButton.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Item {
    id: iconButton
    property alias icon: button.icon
    Layout.preferredWidth: icon.width
    Layout.preferredHeight: icon.height
    Button {
        id: button
        anchors.centerIn: parent
        background: Item {}
        icon.width: 32
        icon.height: 32
        icon.color: "white"
    }
}

// AppText.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Text {
    Layout.fillWidth: true
}

// AppHeadingText.qml
AppText {
    color: "white"
}

// address-book-32.svg : https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/address-book-32.svg
// user-32.svg : https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/user-32.svg

您可以在线尝试！