1.视图模型介绍
在qml中、常见的view视图有:
- listview: 列表视图,视图中数据来自listmodel、xmllistmodel或c++中继承自qabstractitemmodel或qabstractlistmodel的自定义模型类
- tableview: 和excel类似的视图
- gridview: 网格视图,类似于home菜单那样,排列着一个个app小图标
- pathview: 路径视图,可以根据用户自定义的path路径来显示不一样的视图效果
- swipeview: 滑动视图,使用一组页面填充。每次只显示一个页面。用户可以通过横向滑动在页面之间导航,一般会将它与pageindicator结合使用
本章首先来学习listview.以微信好友列表为例:
里面的每个好友就是由一个个 item 组成的,存在视图中的model里,然后写一个delegate组件,即可通过listview显示出来.
由于时间不是很多,所以本章实现的微信好友列表和聊天列表(v1版本)是通过模拟数据实现的,等后面有时间后,再来实现个一个真正的内网聊天工具.
2.demo实现(支持自适应)
好友列表如下图所示:
聊天列表如下图所示:
整个效果如下所示:
觉得gif模糊的话,可以转弯去bilibilihttps://www.bilibili.com/video/bv1z64y1r7kl/
由于代码上传csdn,会导致有些同学可能没积分无法下载,所以已经上传群里了.
如果下载后学习有收获,一定要来这里给我点个赞呀,都没动力更新文章了,赞的人太少了
3.重要组件-实现气泡组件源码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import qtquick 2.0import "bubblenormal.js" as bubblenormalimport "bubbleblue.js" as bubbleblueimport "bubbleblack.js" as bubbleblackitem { id: container property var bubbleindex: 0 property string msgtext: "" property bool issend: true property int iconheight: 40 property int maxwidth: 100 canvas { id: canvas anchors.fill: parent onpaint: { bubble().drawbubble(getcontext('2d')); } } text { id: text text: msgtext font.pixelsize: 17 font.family: "microsoft yahei" wrapmode: text.wrapanywhere horizontalalignment: text.alignleft verticalalignment: text.alignvcenter anchors.fill: parent } component.oncompleted: { bubble().inittext(); bubble().reupdatesize(); canvas.requestpaint(); } onbubbleindexchanged: { bubble().inittext(); bubble().reupdatesize(); canvas.requestpaint(); } function bubble() { switch (bubbleindex) { case 0 : return bubblenormal case 1 : return bubbleblue case 2 : return bubbleblack default: return bubblenormal } }} |
代码如上所示,只要用户更改了bubbleindex值,那么我们就会去马上调用替换后对应的气泡js文件的function(),进行初始化消息、重绘气泡背景。这个组件实现后,我们如果想实现其它的气泡,也可以直接往里加就好了
4.重要组件-实现聊天列表委托源码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/****************************************************************************** 聊天列表委托** author : 诺谦 https://www.cnblogs.com/lifexy/** create : 2021-6-12****************************************************************************/import qtquick 2.12import qtgraphicaleffects 1.12import "./bubble" as bubbleimport "qrc:/common.js" as commonitem { id: container property var headsrc property var myheadsrc : "qrc:/head/myhead.jpg" property var bubbleindex : 0 height: _layout.height + 10 width: listview.view.width state: msgtype states: [ state { name: "hint" anchorchanges { target: _layout; anchors.horizontalcenter: container.horizontalcenter; anchors.verticalcenter: container.verticalcenter; } }, state { name: "hintdate" anchorchanges { target: _layout; anchors.horizontalcenter: container.horizontalcenter; anchors.verticalcenter: container.verticalcenter; } }, state { name: "recv" anchorchanges { target: _layout; anchors.left: container.left; anchors.verticalcenter: container.verticalcenter; } }, state { name: "send" anchorchanges { target: _layout; anchors.right: container.right; anchors.verticalcenter: container.verticalcenter; } } ] row { id: _layout anchors.leftmargin: 20 anchors.rightmargin: 20 spacing: 4 layoutdirection : msgtype == "send" ? qt.righttoleft : qt.lefttoright headimage { id: _head width : 50 height : 50 headurl: msgtype == "recv" ? headsrc : myheadsrc visible: msgtype == "recv" || msgtype == "send" } text { id: _hint visible: msgtype == "hintdate" || msgtype == "hint" text: msgtype == "hintdate" ? getchatdate() : msg color: "#b0b0b0" font.pixelsize: 14 font.family: "microsoft yahei" wrapmode: text.wrapanywhere elide: text.elideright width: container.width - 40 height: 30 horizontalalignment: text.alignhcenter verticalalignment: text.alignvcenter } bubble.chatbubble { id: _msg visible: msgtype == "recv" || msgtype == "send" msgtext: msgtype == "recv" || msgtype == "send" ? msg : "" issend: msgtype == "send" ? true : false iconheight: _head.height maxwidth: container.width - _layout.anchors.leftmargin * 2 - _head.width * 2 - _layout.spacing * 2 bubbleindex: container.bubbleindex } } // 判断消息时间,与当前时间间隔多久,来动态显示 function getchatdate () { var total = new date() - date; if (total < (1000*60*60*24)) { return date.tolocaletimestring(qt.locale(), "hh:mm"); } else if (total < (1000*60*60*24) * 2) { return "昨天 "+date.tolocaletimestring(qt.locale(), "hh:mm"); } else if (total < (1000*60*60*24) * 3) { return "前天 "+date.tolocaletimestring(qt.locale(), "hh:mm"); } else { return date.tolocalestring(qt.locale(), "yyyy年m月d日 hh:mm"); } } } |
代码如上所示,我们会去判断消息类型：
- 如果消息类型是"hint"类型,就直接居中显示。
- 如果消息类型是"hintdate"类型,则调用getchatdate()来动态获取要如何显示时间.
- 如果消息类型是"recv"类型,则靠左显示对方头像,并加上气泡消息
- 如果消息类型是"send"类型,则靠又显示自己头像,并加上气泡消息
以上就是qt quick-listview高仿微信好友列表和聊天列表的详细内容，更多关于qt 微信好友列表和聊天列表的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/lifexy/p/14878664.html
