QT qml listview自定义分组

最新推荐文章于 2024-11-20 10:07:12 发布

Lathon1114

最新推荐文章于 2024-11-20 10:07:12 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

文章标签： qt

本文链接：https://blog.csdn.net/Lathon1114/article/details/133209747

文章讲述了开发者在使用QtQuick2.15的ListView时遇到的问题，即第一组会自动添加分组矩形。通过移除第一组的分组属性，解决了预期中不需要分组矩形的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发一个项目的界面，需要用到listview的section分组功能在每组前面增加一个矩形分割，但是经过验证后发现，第一组也会自动增加分组矩形，预期不需要，于是将第一组的分组属性group去掉，达到了预期效果

主界面main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Loader{
        anchors.fill: parent
        sourceComponent: listViewTest
    }


    Component {
        id: listViewTest
        ListViewTest {

        }
    }
}

ListViewTest.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    anchors.fill: parent
    ListView {
        id: listview
        anchors.fill: parent
        clip: true
        model: listModel
        currentIndex: 1

        // 分割不同分组的矩形
        section.property: "group"
        section.criteria: ViewSection.FirstCharacter
        section.delegate: Rectangle {
            width: parent.width
            height: 10
            color: "red"
        }

        delegate: Rectangle {
            width: parent.width
            height: 45
            Text {
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 16
                font.bold: true
                text: model.name
            }
            // 分割线
            Rectangle {
                visible: index !== listview.count - 1
                anchors.bottom: parent.bottom
                height: 1
                width: parent.width - 40
                anchors.horizontalCenter: parent.horizontalCenter
                color: "#1A000000"
            }
        }
    }

    // 要求第一组不需要分组矩形，从第二组开始才需要，所以第一组不加group属性
    ListModel {
        id: listModel

        ListElement {
            name: "Item1"
        }
        ListElement {
            name: "Item2"
        }
        ListElement {
            name: "Item3"
        }
        ListElement {
            name: "Item4"
        }
        ListElement {
            group: "1"
            name: "Item5"
        }
        ListElement {
            group: "1"
            name: "Item6"
        }
        ListElement {
            group: "1"
            name: "Item7"
        }
        ListElement {
            group: "1"
            name: "Item8"
        }
    }
}

运行效果：