最近在开发一个项目的界面,需要用到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"
}
}
}
运行效果: