分享一个类似微信聊天消息的列表(QML-ListView) - QTCN开发网

Component {
            id: personDelegate

            Rectangle {
                id: personRect
                width: parent.width
                height: 60
                color: ListView.isCurrentItem ? "white" : "#F7F7F7"

                MouseArea {
                    anchors.fill: parent
                    onClicked: personRect.ListView.view.currentIndex = index
[color=#ff0000]                    hoverEnabled: true //注意开启该属性用于启动onEntered/onExited信号[/color]
[color=#ff0000]                    onEntered: personRect.color = "lightgray"[/color]
[color=#ff0000]                    onExited: personRect.color = Qt.binding(function() { return this.ListView.isCurrentItem ? "white" : "#F7F7F7" }) //注意要使用Qt.binding来绑定属性[/color]
                }

                CircleImage {
                    id: headItem
                    width: parent.height - 10
                    height: parent.height - 10
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    source: head
                }

                Text {
                    id: nameText
                    anchors.left: headItem.right
                    anchors.leftMargin: 5
                    anchors.top: parent.top
                    anchors.topMargin: 10
                    text: name
                    font.pixelSize: 13
                    font.family: "Microsoft YaHe"
                }

                Text {
                    id: signText
                    anchors.left: headItem.right
                    anchors.leftMargin: 5
                    anchors.top: nameText.bottom
                    anchors.topMargin: 10
                    width: parent.width - head.width - 5
                    text: lastChat
                    color: "gray"
                    elide: Text.ElideRight
                }

                Text {
                    id: timeText
                    anchors.top: parent.top
                    anchors.topMargin: 10
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    text: time
                    color: "gray"
                }
            }
        }

        ListView {
            id: contactsList
            anchors.left: parent.left
            anchors.leftMargin: 1
            anchors.right: parent.right
            anchors.rightMargin: 1
            anchors.top: searchBar.bottom
            anchors.bottom: parent.bottom

            spacing: 5
            focus: true
            clip: true

            delegate: personDelegate
            model: messagePageViewModel.messageListModel
        }