使用qt quick-ListView仿微信好友列表和聊天列表的示例代码


Posted in Python onJune 13, 2021

1.视图模型介绍

在Qml中、常见的View视图有:

  • ListView: 列表视图,视图中数据来自ListModel、XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类
  • TableView: 和excel类似的视图
  • GridView: 网格视图,类似于home菜单那样,排列着一个个app小图标
  • PathView: 路径视图,可以根据用户自定义的path路径来显示不一样的视图效果
  • SwipeView: 滑动视图,使用一组页面填充。每次只显示一个页面。用户可以通过横向滑动在页面之间导航,一般会将它与PageIndicator结合使用

本章首先来学习ListView.以微信好友列表为例:

使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

里面的每个好友就是由一个个 item 组成的,存在视图中的model里,然后写一个delegate组件,即可通过ListView显示出来.

由于时间不是很多,所以本章实现的微信好友列表和聊天列表(v1版本)是通过模拟数据实现的,等后面有时间后,再来实现个一个真正的内网聊天工具.

2.demo实现(支持自适应)

好友列表如下图所示:

使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

聊天列表如下图所示:

使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

整个效果如下所示:

使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

觉得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"类型,则靠又显示自己头像,并加上气泡消息

以上就是qt quick-ListView高仿微信好友列表和聊天列表的详细内容,更多关于qt 微信好友列表和聊天列表的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
Python中遍历字典过程中更改元素导致异常的解决方法
May 12 Python
python实现微信小程序自动回复
Sep 10 Python
python构建基础的爬虫教学
Dec 23 Python
python 在指定范围内随机生成不重复的n个数实例
Jan 28 Python
详解python中的线程与线程池
May 10 Python
Django 实现前端图片压缩功能的方法
Aug 07 Python
python scipy卷积运算的实现方法
Sep 16 Python
利用python实现.dcm格式图像转为.jpg格式
Jan 13 Python
tensorflow指定GPU与动态分配GPU memory设置
Feb 03 Python
Python实现AI自动抠图实例解析
Mar 05 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
Mar 30 Python
详解python tkinter 图片插入问题
Sep 03 Python
python基础入门之普通操作与函数(三)
python基础入门之字典和集合
Python OpenCV实现传统图片格式与base64转换
Jun 13 #Python
python实现A*寻路算法
Python实现生成bmp图像的方法
Jun 13 #Python
Python实现随机生成迷宫并自动寻路
python中opencv实现图片文本倾斜校正
Jun 11 #Python
You might like
mysql总结之explain
2012/02/27 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
php实现微信模板消息推送
2018/03/30 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
PHP7 windows支持
2021/03/09 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
天网面试题
2013/04/07 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书