使用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实现k均值算法示例(k均值聚类算法)
Mar 16 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
May 29 Python
在pycharm中使用git版本管理以及同步github的方法
Jan 16 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
Jun 11 Python
pycharm显示远程图片的实现
Nov 04 Python
利用PyQt中的QThread类实现多线程
Feb 18 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
Apr 08 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
Apr 15 Python
Python基于pip实现离线打包过程详解
May 15 Python
Python实现查找数据库最接近的数据
Jun 08 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
Jul 05 Python
python 如何调用 dubbo 接口
Sep 24 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
DIY实用性框形天线
2021/03/02 无线电
在PHP中执行系统外部命令
2006/10/09 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php给图片加文字水印
2015/07/31 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
深入分析PHP设计模式
2020/06/15 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python如何调用外部系统命令
2019/08/07 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
简单而又朴实的个人求职信分享
2013/12/12 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
大学生思想汇报范文
2013/12/31 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
抵押贷款承诺书
2014/05/30 职场文书
篮球社团活动总结
2014/06/27 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
竞选稿之小学班干部
2019/10/31 职场文书