QML ListView简介

1.简介

ListView有一个模型，它定义了要显示的数据，还有一个委托，它定义了数据应该如何显示。ListView中的项是水平或垂直布局的。ListView 继承自 Flickable。

常用属性：

• count : int：有多少子项
• model : model：此属性保存为列表提供数据的模型。
• delegate : Component：定义了数据应该如何显示
• orientation : enumeration：设置列表的方向是水平还是垂直
• currentIndex : int：当前项的索引
• currentItem : Item：当前项
• highlight : Component：高亮
• add : Transition：添加项目时的动画
• remove : Transition：删除项目时的动画
• move : Transition：移动项目时的动画
• populate : Transition：为视图创建的项的动画
• section.criteria : enumeration：分组显示全称还是首字母
• section.delegate : Component ：分组代理
• section.property : string：每个分组基础的属性的名称。

2.示例

示例1：设置model，设置代理，设置选中高亮，设置文字等属性。

Window {
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")
 
    ListModel{
        id :listModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }
 
    ListView{
        id:list
        spacing: 10
        width: 200
        height: 500
        model: listModel
        //orientation: Qt.Horizontal
        //highlightFollowsCurrentItem: false
        delegate: Rectangle{
            width: list.width
            height: 50
            Text{//设置文字属性
                text:name + number
                color:"red"
                font.bold: true
                anchors.centerIn: parent    //设置文字居中
            }
            color:"transparent" //使model的颜色透明，为了显示出highlight颜色
 
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index   //点击选中哪一项
                }
            }
        }
 
        highlight: Rectangle {  //高亮
            width: 180
            height: 40
            color: "black"
            y: list.currentItem.y
            Behavior on y { //点击选中的时候会有个动画
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }
}

示例2：设置页脚、页眉，分组显示，代码里有注释。

Window {
    visible: true
    width: 500
    height: 500
    title: qsTr("Hello World")
 
    Component {
        id: sectionHeading
        Rectangle {
            width: list.width
            height: childrenRect.height
            color: "lightsteelblue" // 控制颜色
 
            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }
 
    ListModel{
        id :listModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
            size: "small"
        }
        ListElement {
            name: "Bill Smith2"
            number: "555 3264"
            size: "small"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
            size: "mid"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
            size: "big"
        }
    }
    Rectangle{
        x:80
        y:80
        width: 400
        height: 400
        border.width: 2
        border.color: "black"
        ListView{
            id:list
            spacing: 10
            width: 200
            height: 300
            footer: Rectangle{  //设置页脚
                height: 20
                width: list.width
                color: "red"
            }
            header: Rectangle{  //设置页眉
                height: 20
                width: list.width
                color: "blue"
            }
 
            section.property: "size"                    //设置分组名称
            section.criteria: ViewSection.FullString    //设置显示全称 还是 首字母
            section.delegate: sectionHeading            //设置代理
 
            anchors.centerIn: parent
            model: listModel
            delegate: Rectangle{
                width: list.width
                height: 50
                Text{//设置文字属性
                    text:name + number
                    color:"red"
                    font.bold: true
                    anchors.centerIn: parent    //设置文字居中
                }
                color:"transparent" //使model的颜色透明，为了显示出highlight颜色
 
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        list.currentIndex = index   //点击选中哪一项
                    }
                }
            }
 
            highlight: Rectangle {  //高亮
                width: 180
                height: 20
                color: "black"
            }
        }
    }
}

示例3：设置添加动画，删除、移动等操作动画类似。

Window {
    visible: true
    width: 500
    height: 500
    title: qsTr("Hello World")
 
    ListModel{
        id :listModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
    }
    Rectangle{
        x:80
        y:80
        width: 400
        height: 400
        border.width: 2
        border.color: "black"
        ListView{
            id:list
            spacing: 10
            width: 200
            height: 300
            anchors.centerIn: parent
            model: listModel
            delegate: Rectangle{
                width: list.width
                height: 50
                Text{//设置文字属性
                    text: name + number
                    color:"red"
                    font.bold: true
                    anchors.centerIn: parent    //设置文字居中
                }
            }
            add: Transition {
                NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
            }
        }
        Button{
            x:20
            y:20
            width: 50
            height: 50
            text: "add"
            onClicked: {
                var data = {'name':"赵六",'number':"778 0899"}
                listModel.append(data);
            }
        }
    }
}