使用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支持断点续传的多线程下载示例
Jan 16 Python
一个超级简单的python web程序
Sep 11 Python
Python爬虫之模拟知乎登录的方法教程
May 25 Python
对pandas的dataframe绘图并保存的实现方法
Aug 05 Python
python编程之requests在网络请求中添加cookies参数方法详解
Oct 25 Python
python中的内置函数max()和min()及mas()函数的高级用法
Mar 29 Python
如何用python整理附件
May 13 Python
Python小工具之消耗系统指定大小内存的方法
Dec 03 Python
python+selenium 定位到元素,无法点击的解决方法
Jan 30 Python
Python PyCharm如何进行断点调试
Jul 05 Python
500行代码使用python写个微信小游戏飞机大战游戏
Oct 16 Python
如何将PySpark导入Python的放实现(2种)
Apr 26 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
php mysql数据库操作分页类
2008/06/04 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
一个实用的php验证码类
2017/07/06 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Vuex简单入门
2017/04/19 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python实现猜单词游戏
2020/05/22 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
销售经理岗位职责
2014/03/16 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
离婚协议书怎么写
2014/09/12 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
项目合作协议书
2014/09/23 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python