QML视图（ListView）

ListView（列表视图）

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

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

常用的属性：

cacheBuffer	确定是否将委托保留在视图的可见区域之外.大于零，则视图可以在指定的缓冲区内保持尽可能多的委托实例化
count	返回项数
currentIndex currentItem currentSection	当前的索引 当前的项目 当前的部分：保存当前位于视图开头的部分
delegate	设置委托
displaced	设置通用过渡
displayMarginBeginning  displayMarginEnd	允许在视图几何图形之外显示委托，默认值为 0
footer	页脚
header headerItem	标题 标题项
highlight  highlightFollowsCurrentItem  highlightItem  （第二项为true才能使用） highlightMoveDuration highlightMoveVelocity highlightResizeDuration highlightResizeVelocity	需要突出的控件 保存突出显示是否由视图管理（默认为true） 保存从突出显示组件创建的突出显示项 高亮移动持续时间 高亮移动速度（默认值为 400 像素/秒） 高亮显示调整大小持续时间 高亮显示大小速度
keyNavigationEnabled keyNavigationWraps	保存列表的键导航是否已启用 保存列表是否换行键导航
model	保存为列表提供数据的模型
move moveDisplaced	保存过渡以应用于视图中由于视图模型中的移动操作而移动的项 保存过渡以应用于视图模型中的移动操作所取代的项
populate	保存要应用于最初为视图创建的项的过渡
remove removeDisplaced	保存要应用于从视图中删除的项的过渡 保存转换以应用于视图中因删除视图中的其他项而替换的项
add addDisplaced	保存要应用于从视图中添加的项的过渡 保存转换以应用于视图中因添加视图中的其他项而替换的项
spacing	间距

附加属性：

ListView.delayRemove	此附加属性保存是否可以销毁委托（默认为true）
ListView.isCurrentItem	如果此委托是当前项，则此附加属性为 true 用于调整当前项的外观
ListView.nextSection	属性保存下一个元素的部分
ListView.previousSection	属性保存前一个元素的部分
ListView.section	保存此元素的部分
ListView.view	保存管理此委托实例的视图

 信号：

add（）	将项目添加到视图后，将立即发出此附加信号
remove()	从视图中移除项目之前立即发出

方法：

positionViewAtBeginning() positionViewAtEnd()	把位置定位在开头 把位置定位在结尾
decrementCurrentIndex() incrementCurrentIndex()	递减当前索引 递增当前索引
forceLayout()	此方法强制 ListView 立即响应模型中的任何未完成更改。
indexAt itemAt	返回该位置的索引 返回该位置的项
positionViewAtIndex	定位视图

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

1.最常见的使用：

//创建模型
ListModel {  
    id:model1
    ListElement { name: "Bill Smith";number: "555 3264"}
    ListElement { name: "John Brown";number: "555 8426"}
    ListElement { name: "Sam Wise";number: "555 0473"}
}

//使用视图显示
ListView {
    width: 180; height: 200
    model: model1 //设置模型
    delegate: Text {    //使用Text显示数据
        text: name + ": " + number
    }
}

2.使用Component来进行委托

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

3.方向和布局方向：

orientation（方向）

ListView.Vertical (default)	竖直（默认）
ListView.Horizontal	水平

layoutDirection（水平的布局方向）

Qt.LeftToRight (default)	从左到右
Qt.RightToLeft	从右到左

 verticalLayoutDirection （竖直的布局方向）

ListView.TopToBottom (default)	从上到下
ListView.BottomToTop	从下到上

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

 ListView{
        anchors.fill: parent
        model: model1
        delegate:component1
        orientation: ListView.Horizontal//设置水平布局，从左到右
    }

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

ListView{
        anchors.fill: parent
        model: model1
        delegate:component1
        orientation: ListView.Horizontal//设置水平布局
        layoutDirection: Qt.RightToLeft//从右到左布局
    }

 

 3.突出（高亮）的使用

ListModel {
        id:model1
        ListElement { 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: 500
        Component {
            id: contactDelegate
            Item {
                width: 180; height: 40
                Column {
                    Text { text: '<b>Name:</b> ' + name }
                    Text { text: '<b>Number:</b> ' + number }
                }
            }
        }

        ListView {
            anchors.fill: parent
            model: model1 //设置模型
            delegate: contactDelegate //设置委托
            highlight: Rectangle { color: "lightsteelblue";} //设置高亮
            focus: true //获取焦点，使用键盘切换
        }
    }

添加弹动效果：

ListModel {
        id:model1
        ListElement { name: "Bill Smith";number: "555 3264"}
        ListElement { name: "John Brown";number: "555 8426"}
        ListElement { name: "Sam Wise";number: "555 0473"}
    }
    Component {
        id: highlight
        Rectangle {
            width: 180; height: 40
            color: "lightsteelblue"; radius: 5
            y: list.currentItem.y
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }
    Component{
        id:component1
        Column{
            spacing: 10
            Text {text:"姓名："+name }
            Text {text:"电话："+number}
        }
    }

    ListView {
        id: list
        width: 180; height: 200
        model: model1
        delegate: component1
        highlight: highlight
        highlightFollowsCurrentItem: false
        focus: true
    }

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

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

使用的方法：

      ListView {
            id:list1
            anchors.fill: parent
            model: model1
            Component {
                id: contactDelegate
                Item {
                    width: list1.width //方法一
                    height: list1.view.height //方法二
                    Column {
                        Text { text: '<b>Name:</b> ' + name }
                        Text { text: '<b>Number:</b> ' + number }
                    }
                }
            }
            delegate: contactDelegate
            highlight: Rectangle { color: "lightsteelblue";}
            focus: true
        }

 ListView.isCurrentItem的使用

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

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

        model: model1
        delegate: contactsDelegate
        focus: true
    }

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

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

ListView.InlineHeader	（默认）页眉位于内容的开头，并像普通项目一样与内容一起移动。
ListView.OverlayHeader	页眉位于视图的开头
ListView.PullBackHeader	页眉位于视图的开头。标头可以通过向前移动内容来推开，并通过向后移动内容来拉回。

视图中的堆叠顺序：

属性	z值
delegate	1
footer	1
header	1
highlight	0
section.deleate	2

例子：

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

 6.listView中的鼠标事件

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

currentIndex	当前项
indexAt（x,y）	获取x，y位置的索引

       ListView{
            id:list1
            anchors.fill: parent
            model: model1
            delegate:component1
            spacing: 10
            highlight: Rectangle{color: "lightsteelblue"}
            focus: true

            MouseArea{  //设置鼠标区域
                id:mouse1
                anchors.fill: parent
                onPressed: {
                    //获取鼠标位置的项，并作为当前项
                    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: nameModel
        ListElement { 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: nameDelegate
        Text {
            text: name;
            font.pixelSize: 24
            anchors.left: parent.left
            anchors.leftMargin: 2
        }
    }
    ListView {
        anchors.fill: parent
        model: nameModel
        delegate: nameDelegate
        focus: true
        highlight: Rectangle {
            color: "lightblue"
            width: parent.width
        }
        section {   //添加分组
            property: "team" //设置分组的属性
            criteria: ViewSection.FullString //设置分组标准
            delegate: Rectangle {  //设置代理
                color: "#b0dfb0"
                width: parent.width
                height: childrenRect.height + 4
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                    font.bold: true
                    text: section  //内容为分组的内容
                }
            }
        }
    }

参考文档：

ListView QML Type | Qt Quick 5.15.12

Qt Quick Examples - Views | Qt Quick 5.15.12