QT QML 界面设计教程14——图片列表视图控件样式

MyListViewPics.qml

import QtQuick 2.0
import QtQuick.Controls 2.4
//Item {
    ListView{
        id:myListViewPics
        x:15
        //y:15
        width: parent.width-40
        height: 300
        model: patientList
        property int imgWidth: 1
        property int imgHight: 1
        property string imgPath: "qrc:/image/xx.png"
        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:"2021/07/29"
                font.pixelSize: 16
                color:"black"
       
             }
         }
        Rectangle{
            y:0
            id:separator1
            border.width: 2
            border.color: "green"
            width: 440
            height: 2
            radius: 0
        }
        delegate: Rectangle {
            height: 200
            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!");
                    }
                }

            }
            Rectangle{
                id:patientImage
                x:parent.x+180
                y:20
                border.width: 2
                border.color: "green"
                width: myListViewPics.imgWidth
                height: myListViewPics.imgHight
                radius: 0
                Image {
                    id: name
                    source: myListViewPics.imgPath
                    width: myListViewPics.imgWidth
                    height: myListViewPics.imgHight
                }

            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    myListViewPics.currentIndex = index  //实现item切换
                    console.log("click")
                }
            }
        }

    }
//}

调用：

  MyListViewPics{
            y:parent.y
            imgHight: 150
            imgWidth: 400
        }