ListView（列表视图）

ListView显示从内置 QML 类型（如 ListModel 和 XmlListModml）创建的模型的数据，或者在从 QAbstractItemModel 或 QAbstractListModel 继承的C++中定义的自定义模型类。

• ListView继承自flickable，所以具有弹动效果
• ListView按照水平或垂直布局 

常用的属性：

附加属性：

 信号：

方法：

以下为以上属性和方法的使用：

1.最常见的使用：

//创建模型
ListModel {  id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}
}//使用视图显示
ListView {width: 180; height: 200model: model1 //设置模型delegate: Text {    //使用Text显示数据text: name + ": " + number}
}

2.使用Component来进行委托

ListModel {id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}}Component{id:component1Row{spacing: 10Text {text:"姓名："+name }Text {text:"电话："+number}}}ListView{anchors.fill: parentmodel: model1  //设置模型delegate:component1 //委托}

3.方向和布局方向：

orientation（方向）

layoutDirection（水平的布局方向）

 verticalLayoutDirection （竖直的布局方向）

使用水平布局方向，从左到右：

 ListView{anchors.fill: parentmodel: model1delegate:component1orientation: ListView.Horizontal//设置水平布局，从左到右}

 使用水平布局方向，从右到左：

ListView{anchors.fill: parentmodel: model1delegate:component1orientation: ListView.Horizontal//设置水平布局layoutDirection: Qt.RightToLeft//从右到左布局}

 3.突出（高亮）的使用

ListModel {id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}}Rectangle {x:50;width: 200;height: 500Component {id: contactDelegateItem {width: 180; height: 40Column {Text { text: 'Name: ' + name }Text { text: 'Number: ' + number }}}}ListView {anchors.fill: parentmodel: model1 //设置模型delegate: contactDelegate //设置委托highlight: Rectangle { color: "lightsteelblue";} //设置高亮focus: true //获取焦点，使用键盘切换}}

添加弹动效果：

ListModel {id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}}Component {id: highlightRectangle {width: 180; height: 40color: "lightsteelblue"; radius: 5y: list.currentItem.yBehavior on y {SpringAnimation {spring: 3damping: 0.2}}}}Component{id:component1Column{spacing: 10Text {text:"姓名："+name }Text {text:"电话："+number}}}ListView {id: listwidth: 180; height: 200model: model1delegate: component1highlight: highlighthighlightFollowsCurrentItem: falsefocus: true}

4.委托中使用视图属性位置

委托会根据需要实例化，并且可以随时销毁。因此，状态永远不应存储在委托中

使用的方法：

      ListView {id:list1anchors.fill: parentmodel: model1Component {id: contactDelegateItem {width: list1.width //方法一height: list1.view.height //方法二Column {Text { text: 'Name: ' + name }Text { text: 'Number: ' + number }}}}delegate: contactDelegatehighlight: Rectangle { color: "lightsteelblue";}focus: true}

 ListView.isCurrentItem的使用

用于设置内容的属性，判断是否为当前项。

ListModel {id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}}ListView {width: 180; height: 200Component {id: contactsDelegateRectangle {id: wrapperwidth: 180height: contactInfo.height//当前项的话，背景颜色为黑色，不是的话为红色color: ListView.isCurrentItem ? "black" : "red"Text {id: contactInfotext: name + ": " + number//当前项的话，字体为红色，不是的话为黑色color: wrapper.ListView.isCurrentItem ? "red" : "black"}}}model: model1delegate: contactsDelegatefocus: true}

 5.标头和页脚和堆叠顺序

headerPositioning、footerPositioning （标头和页脚的定位）

视图中的堆叠顺序：

例子：

ListModel {id:model1ListElement { name: "Bill Smith";number: "555 3264"}ListElement { name: "John Brown";number: "555 8426"}ListElement { name: "Sam Wise";number: "555 0473"}}Component{id:component1Row{spacing: 10Text {text:"姓名："+name }Text {text:"电话："+number}}}ListView{id:list1anchors.fill: parentheader: Component{ //添加标题Rectangle{width: list1.widthcolor: "red"height: 30Text { text:"标题"}}}footer: Component{ //添加页脚Rectangle{width: list1.widthcolor: "red"height: 30Text { text:"页脚"}}}model: model1  //设置模型delegate:component1 //委托}

 6.listView中的鼠标事件

鼠标点击项，变为当前项：

       ListView{id:list1anchors.fill: parentmodel: model1delegate:component1spacing: 10highlight: Rectangle{color: "lightsteelblue"}focus: trueMouseArea{  //设置鼠标区域id:mouse1anchors.fill: parentonPressed: {//获取鼠标位置的项，并作为当前项list1.currentIndex=list1.indexAt(mouse1.mouseX,mouse1.mouseY)}}}

7.对列表视图进行分组：

section group（组）

section.criteria （分组的标准）

ViewSection.FullString（默认）	根据值创建部分
ViewSection.FirstCharacter	根据值的第一个字符创建部分

section.delegate （分组的代理）

section.property  （分组的属性）

section.labelPositioning（标签定位）

ViewSection.InlineLabels	部分标签在分隔部分的项目委托之间内联显示（默认）
ViewSection.CurrentLabelAtStart	当前分区标签在移动视图时会粘附在视图的开头
ViewSection.NextLabelAtEnd	下一个部分标签（超出所有可见部分）在移动视图时粘在视图的末尾

注意： 向 ListView 添加节不会自动按节条件对列表项重新排序。如果模型不是按部分排序的，则创建的部分可能不是唯一的;不同部分之间的每个边界都将导致创建部分标题，即使该部分存在于其他地方也是如此。

例子：

ListModel {id: nameModelListElement { name: "Alice"; team: "Crypto" }ListElement { name: "Bob"; team: "Crypto" }ListElement { name: "Jane"; team: "QA" }ListElement { name: "Victor"; team: "QA" }ListElement { name: "Wendy"; team: "Graphics" }}Component {id: nameDelegateText {text: name;font.pixelSize: 24anchors.left: parent.leftanchors.leftMargin: 2}}ListView {anchors.fill: parentmodel: nameModeldelegate: nameDelegatefocus: truehighlight: Rectangle {color: "lightblue"width: parent.width}section {   //添加分组property: "team" //设置分组的属性criteria: ViewSection.FullString //设置分组标准delegate: Rectangle {  //设置代理color: "#b0dfb0"width: parent.widthheight: childrenRect.height + 4Text {anchors.horizontalCenter: parent.horizontalCenterfont.pixelSize: 16font.bold: truetext: section  //内容为分组的内容}}}}

参考文档：

ListView QML Type | Qt Quick 5.15.12

Qt Quick Examples - Views | Qt Quick 5.15.12