在QML中ListView的数据分组与定位显示时,以前使用ListView进行数据分组时,都是在model中加入分组数据(分组的项),然后将model中的数据排好序后全部显示到ListView中,这样做也能达到数据分组的目的,但是数据维护太费力,我们自己好做的事情太多,埋下的隐藏问题也就越多。
这次介绍ListView自身的艺术section属性,可以达到数据分组显示的作用,通过设置如下三个属性:
section.property: "name";
section.criteria: ViewSection.FirstCharacter
section.delegate: sectionHeader
然后实现分组显示的代理sectionHeader,如下:
这里需要注意的是,虽然我们不需要对分组项(上图中的蓝色项)进行管理,但是我们需要对ListModel中要显示数据进行排序管理,不然会出现多个分组,也就是说,section不会自动排序,相同section的model数据必须放在连续的一块,不然的话,不连续的section会分别进行显示,这一点要特别注意(即使这样,也比以前所有的项全都自己管理强的多^_^)。
实现了以上功能后,还想模仿手机的联系人
这次介绍ListView自身的艺术section属性,可以达到数据分组显示的作用,通过设置如下三个属性:
section.property: "name";
section.criteria: ViewSection.FirstCharacter
section.delegate: sectionHeader
然后实现分组显示的代理sectionHeader,如下:
Component {
id:sectionHeader
Rectangle {
width: parent.width
height: 20
color: "steelblue"
Label {
text: section
font.bold: true
font.pixelSize: 20
anchors.left: parent.left
anchors.leftMargin: 10
}
}
}
设置了分组的显示样式,即可实现通过model中的name字段的首字母进行分组显示。话不多说先上图,其初步效果如下:
这里需要注意的是,虽然我们不需要对分组项(上图中的蓝色项)进行管理,但是我们需要对ListModel中要显示数据进行排序管理,不然会出现多个分组,也就是说,section不会自动排序,相同section的model数据必须放在连续的一块,不然的话,不连续的section会分别进行显示,这一点要特别注意(即使这样,也比以前所有的项全都自己管理强的多^_^)。
实现了以上功能后,还想模仿手机的联系人