QML-ListView

//类似Repeater，批量生成组件
ListView{
        width: 180;height: 200
        model: ["Button","Rectangle","MouseArea"]
        //按钮间距
        spacing: 10
        delegate:Button{
            text: modelData
        }
    }

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    Rectangle{
        width: 500
        height: 500
        Component{
            id:sectionHeading
            Rectangle{
                width:container.width
                height: childrenRect.height
                color: "lightsteelblue"
                //控件的标题
                property string section: "标题123abc"
                Text {
                    text: parent.section
                    font.bold: true
                    font.pixelSize: 20
                }
            }
        }

        ListView{
            id:list
            width: 180
            height: 200
            //放到父控件中心
            anchors.centerIn:parent
            //头矩形
            header:Rectangle{
                width: 400
                height: 20
                color: "blue"
            }
            //尾矩形
            footer: Rectangle{
                width: 400
                height: 20
                color: "green"
            }

            model: ListModel{
                ListElement{
                    name:"Bill Smith"
                    number:"001"
                }
                ListElement{
                    name:"John Brown"
                    number:"002"
                }
                ListElement{
                    name:"Sam Wise"
                    number:"003"
                }
            }
            //数字 控制了所有的数据间隔
            spacing: 10
            //变为横向滑动
            flickableDirection:Flickable.HorizontalFlick

            //一个选中样式的背景
            highlight: Rectangle {
                color: "lightsteelblue"
                radius: 5
            }

            //控制了每一项数据是如何绘制的
            delegate:Rectangle{
                color:"transparent"
                width: list.width
                height: 50
                Text{
                    id: txt
                    text: name + " " + number
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        //点击后将highlight移动到点击位置
                        console.log(list.currentIndex = index)
                    }
                }
            }
            section.property: "number"
            section.criteria: ViewSection.FullString
            section.delegate: sectionHeading
        }
    }
}