QT - 13.1.1 ListView 的简单使用

 

。

/****
QT - 13.1.1 ListView 的简单使用
****/
import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Window {
    id:rootItem
    visible: true
    width: 720
    height: 600
    color: "#EEEEEE"

    Component{
        id:phoneDelegate
        Item {
            id: wrapper
            width: parent.width
            height: 30

            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currenIndex = index
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text {
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize:
                        wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: 120
                }

                Text {
                    text:cost
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize:
                        wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: 80
                }

                Text {
                    text: manufacture
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize:
                        wrapper.ListView.isCurrentItem ? 22:18
                    Layout.fillWidth: true
                }
            }
        }
    }

    ListView{
        id:listview
        anchors.fill: parent
        delegate: phoneDelegate

        model: ListModel{
            id:phoneModel
            ListElement{
                name:"iphone 12"
                cost: "8000"
                manufacture: "Apple"
            }
            ListElement{
                name:"P 40"
                cost: "9300"
                manufacture: "HuaWei"
            }
            ListElement{
                name:"MI 6"
                cost: "5999"
                manufacture: "XiaoMi"
            }

        }

        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

    }

}

 

。

 

。