• 1909阅读
  • 2回复

分享一个类似微信聊天消息的列表(QML-ListView) [复制链接]

上一主题 下一主题
离线cycloveu
 

只看楼主 倒序阅读 楼主  发表于: 04-26
该ListView主要实现以下功能1.选中Item后该Item变色
2.当鼠标移动到Item上时候,Item变色,鼠标离开Item后,还原Item背景色
效果如下图:




只贴关键代码:(红字部分)
  1. Component {
  2.             id: personDelegate
  3.             Rectangle {
  4.                 id: personRect
  5.                 width: parent.width
  6.                 height: 60
  7.                 color: ListView.isCurrentItem ? "white" : "#F7F7F7"
  8.                 MouseArea {
  9.                     anchors.fill: parent
  10.                     onClicked: personRect.ListView.view.currentIndex = index
  11. [color=#ff0000]                    hoverEnabled: true //注意开启该属性用于启动onEntered/onExited信号[/color]
  12. [color=#ff0000]                    onEntered: personRect.color = "lightgray"[/color]
  13. [color=#ff0000]                    onExited: personRect.color = Qt.binding(function() { return this.ListView.isCurrentItem ? "white" : "#F7F7F7" }) //注意要使用Qt.binding来绑定属性[/color]
  14.                 }
  15.                 CircleImage {
  16.                     id: headItem
  17.                     width: parent.height - 10
  18.                     height: parent.height - 10
  19.                     anchors.left: parent.left
  20.                     anchors.leftMargin: 5
  21.                     anchors.verticalCenter: parent.verticalCenter
  22.                     source: head
  23.                 }
  24.                 Text {
  25.                     id: nameText
  26.                     anchors.left: headItem.right
  27.                     anchors.leftMargin: 5
  28.                     anchors.top: parent.top
  29.                     anchors.topMargin: 10
  30.                     text: name
  31.                     font.pixelSize: 13
  32.                     font.family: "Microsoft YaHe"
  33.                 }
  34.                 Text {
  35.                     id: signText
  36.                     anchors.left: headItem.right
  37.                     anchors.leftMargin: 5
  38.                     anchors.top: nameText.bottom
  39.                     anchors.topMargin: 10
  40.                     width: parent.width - head.width - 5
  41.                     text: lastChat
  42.                     color: "gray"
  43.                     elide: Text.ElideRight
  44.                 }
  45.                 Text {
  46.                     id: timeText
  47.                     anchors.top: parent.top
  48.                     anchors.topMargin: 10
  49.                     anchors.right: parent.right
  50.                     anchors.rightMargin: 5
  51.                     text: time
  52.                     color: "gray"
  53.                 }
  54.             }
  55.         }
  56.         ListView {
  57.             id: contactsList
  58.             anchors.left: parent.left
  59.             anchors.leftMargin: 1
  60.             anchors.right: parent.right
  61.             anchors.rightMargin: 1
  62.             anchors.top: searchBar.bottom
  63.             anchors.bottom: parent.bottom
  64.             spacing: 5
  65.             focus: true
  66.             clip: true
  67.             delegate: personDelegate
  68.             model: messagePageViewModel.messageListModel
  69.         }


离线liuchangyin

只看该作者 1楼 发表于: 04-27
离线nigoole

只看该作者 2楼 发表于: 04-27
来个QWidget版本的。。。
有句话说得好:好好学习,天天向上。加油~~!
快速回复
限100 字节
 
上一个 下一个