使用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 json模块使用实例
Apr 11 Python
python内置函数:lambda、map、filter简单介绍
Nov 16 Python
Django项目实战之用户头像上传与访问的示例
Apr 21 Python
matplotlib subplots 调整子图间矩的实例
May 25 Python
Django Rest framework之权限的实现示例
Dec 17 Python
扩展Django admin的list_filter()可使用范围方法
Aug 21 Python
Python爬取腾讯视频评论的思路详解
Dec 19 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
Feb 29 Python
python Canny边缘检测算法的实现
Apr 24 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
Sep 26 Python
记录一下scrapy中settings的一些配置小结
Sep 28 Python
C站最全Python标准库总结,你想要的都在这里
Jul 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
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
环境卫生倡议书
2014/08/29 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
社会实践活动总结
2015/02/05 职场文书
保送生自荐信
2015/03/06 职场文书
任长霞观后感
2015/06/16 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
使用Django框架创建项目
2022/06/10 Python