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

离线cycloveu

侠客

只看楼主倒序阅读楼主发表于: 2017-04-26

该ListView主要实现以下功能1.选中Item后该Item变色
2.当鼠标移动到Item上时候，Item变色，鼠标离开Item后，还原Item背景色
效果如下图：

只贴关键代码：(红字部分)

复制代码

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
}