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.重要组件-实现气泡组件源码

import QtQuick 2.0
import "BubbleNormal.js" as BubbleNormal
import "BubbleBlue.js" as BubbleBlue
import "BubbleBlack.js" as BubbleBlack Item {
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.重要组件-实现聊天列表委托源码

/****************************************************************************
** 聊天列表委托
** Author : 诺谦 https://www.cnblogs.com/lifexy/
** Create : 2021-6-12
****************************************************************************/ import QtQuick 2.12
import QtGraphicalEffects 1.12
import "./bubble" as Bubble
import "qrc:/Common.js" as Common Item {
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"类型,则靠又显示自己头像,并加上气泡消息

28.qt quick-ListView高仿微信好友列表和聊天列表的更多相关文章

  1. Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现

    Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...

  2. 31.qt quick-使用SwipeView添加滑动视图-高仿微信V2版本

    在上章我们学习了ListView,然后实现了: 28.qt quick-ListView高仿微信好友列表和聊天列表,本章我们来学习SwipeView滑动视图,并出高仿微信V2版本: 1.Contain ...

  3. Android 高仿微信实时聊天 基于百度云推送

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天终于有幸利用百 ...

  4. Android 高仿微信即时聊天 百度云为基础的推

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天最终有幸利用百 ...

  5. 转-Fragment+ViewPager组件(高仿微信界面)

    http://www.cnblogs.com/lichenwei/p/3982302.html 什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开 ...

  6. GSD_WeiXin(高仿微信)应用源码

    高仿微信计划:已经实现功能 1.微信首页(cell侧滑编辑.下拉眼睛动画.下拉拍短视频.点击进入聊天详情界面) 2.通讯录(联系人字母排序.搜索界面) 3.发现(朋友圈) 4.我(界面) 待实现功能( ...

  7. Android高仿微信(一)——如何消除启动时的白屏

    默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...

  8. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

  9. 实例源码--IOS高仿微信打飞机游戏(完整功能)

    下载源码 技术要点: 1. IOS游戏开发基础框架 2. 高仿打飞机游戏 3. 游戏背景音频技术 4.源码详细的中文注释 ……. 详细介绍: 1. IOS游戏开发基础框架 此套源码为涉及IOS游戏开发 ...

随机推荐

  1. 安装google cloud sdk报错解决方法总结(超全)

    前提:python环境最好是2.7,如果是python3可能会出很多小毛病:能用64位系统就尽量用64位,32位系统安装也很多毛病 一.Error1:Unzip Failed: Error openi ...

  2. 前端用网址生成二维码(jquery)

    1.加载jquery.qrcode.min.js 2.html部分: 3.js部分:url为生成二维码的网址 附: jquery.qrcode.min.js下载 链接:https://pan.baid ...

  3. VMware Workstation中安装Hyper-V

    1:在虚拟机设置中,CPU属性中勾选"Virtualize Intel VT-x/EPT or AMD-V/RVI"来启用虚拟机的CPU支持虚拟化. 2:2.在虚拟机文件所在目录中 ...

  4. Asp.NetCore Web应用程序中的请求管道和中间件

    你是否会迷惑当我们请求一个ASP.NetWeb应用程序以后,它是怎么处理这些请求的,后台是怎么工作的,今天就讲一下Asp.NetCore Web应用程序中的请求处理过程. 上一节,我们讲到,Start ...

  5. Mybatis学习之自定义持久层框架(三) 自定义持久层框架:读取并解析配置文件

    前言 前两篇文章分别讲解了JDBC和Mybatis的基本知识,以及自定义持久层框架的设计思路,从这篇文章开始,我们正式来实现一个持久层框架. 新建一个项目 首先我们新建一个maven项目,将其命名为I ...

  6. leecode之Implement strStr()

    KMP算法的实现: #include <stdio.h> #include <string.h> #include <stdlib.h> int strStr(ch ...

  7. golang:函数总结

    golang保留的函数 init(), main()是golang的保留函数,有如下特点: main() 只能用在main包中,仅可定义一个,init() 可定义任意包,可重复定义,建议只定义一个 两 ...

  8. linux 视频输出xrandr设置命令

    linux 视频输出xrandr设置命令 沈祥佑关注 0.592019.03.28 17:44:09字数 397阅读 6,886 xrandr 不带参数的xrandr 命令会列出系统支持的视频接口名称 ...

  9. Linux如何设置用户登录超时(闲置时间)vi /etc/profile ... export TMOUT=900

    Linux如何设置用户登录超时(闲置时间) 转载莫负寒夏ai 最后发布于2019-08-08 15:04:22 阅读数 1897  收藏 展开 1. 针对所有用户 # vi /etc/profile ...

  10. Windows 10 创建虚拟网卡

    想把虚拟机桥接到我的电脑,但我连的是无线网电脑没查网线,所以就创建个虚拟网卡吧. 1.win + x 打开设备管理器 2.网络适配器  + 操作 + 添加过时硬件  3.下一步  4.选-->安 ...