使用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中lambda函数 list comprehension 和 zip函数使用指南
Sep 28 Python
Python的加密模块md5、sha、crypt使用实例
Sep 28 Python
浅谈django model的get和filter方法的区别(必看篇)
May 23 Python
关于Python中空格字符串处理的技巧总结
Aug 10 Python
python中的文件打开与关闭操作命令介绍
Apr 26 Python
如何在django里上传csv文件并进行入库处理的方法
Jan 02 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
Jun 05 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
Aug 13 Python
给你一面国旗 教你用python画中国国旗
Sep 24 Python
Python实现LR1文法的完整实例代码
Oct 25 Python
Python的信号库Blinker用法详解
Dec 31 Python
Python django中如何使用restful框架
Jun 23 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
php实现把数组按指定的个数分隔
2014/02/17 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
新东网科技Java笔试题
2012/07/13 面试题
《逃家小兔》教学反思
2014/02/23 职场文书
疾病捐款倡议书
2014/05/13 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
古诗之感恩老师
2019/10/24 职场文书