QT QML 界面设计教程13——简单的列表视图控件样式

MyListView.qml

列表很简单，只有三列

import QtQuick 2.0
import QtQuick.Controls 2.4
//Item {
    ListView{
        id:myListView
        x:15
        //y:15
        width: parent.width-40
        height: 300
        model: patientList
        onFocusChanged: {
            console.log("changed!");
        }
        header:Rectangle{
            id:listHead
            y:parent.y-120
            width: parent.width
            height: 20
            color:"white"
            Label{
                x:parent.x+20
                y:-20
                id:label
                text:"编号"
                font.pixelSize: 16
                color:"black"
                //anchors.horizontalCenter: parent.horizontalCenter
                //anchors.top: parent.top
                //anchors.topMargin: 30
             }
             Label{
                 x:parent.x+180
                 y:-20
                 id:label2
                 text:"姓名"
                 font.pixelSize: 16
                 color:"black"
                 //anchors.horizontalCenter: parent.horizontalCenter
                 //anchors.top: parent.top
                 //anchors.topMargin: 30
             }
             Label{
                 x:parent.x+340
                 y:-20
                 id:label3
                 text:"年龄"
                 font.pixelSize: 16
                 color:"black"
                 //anchors.horizontalCenter: parent.horizontalCenter
                 //anchors.top: parent.top
                 //anchors.topMargin: 30
             }
         }
        Rectangle{
            y:0
            id:separator1
            border.width: 2
            border.color: "green"
            width: 440
            height: 2
            radius: 0
        }
        delegate: Rectangle {
            height: 30
            width: parent.width
            color: ListView.isCurrentItem?"lightgreen":"white" //选中颜色设置
            y:parent.y+100

            border.color: Qt.lighter(color, 1.1)
            Text {
                x:parent.x

                font.pixelSize: 16
                text: model.getNo //调用每个对象的data()方法
                color: "black"
                anchors.verticalCenter: parent.verticalCenter
                Connections{
                    target: model //监听这个对象
                    onDataChanged:{
                        console.log("changed!");
                    }
                }

            }
            Text {
                x:parent.x+180

                font.pixelSize: 16
                text: model.getName //调用每个对象的方法
                color: "black"
                anchors.verticalCenter: parent.verticalCenter
                Connections{
                    target: model //监听这个对象
                    onDataChanged:{
                        console.log("changed!");
                    }
                }
            }
            Text {
                x:parent.x+340

                font.pixelSize: 16
                text: model.getDate //调用每个对象的方法
                color: "black"
                anchors.verticalCenter: parent.verticalCenter
                Connections{
                    target: model //监听这个对象
                    onDataChanged:{
                        console.log("changed!");
                    }
                }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    myListView.currentIndex = index  //实现item切换
                    console.log("click")
                }
            }
        }

    }
//}

调用：

     MyListView{
                x:parent.x
                y:parent.y
            }