欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-08 20:52:22
1.视图模型介绍在qml中、常见的view视图有: listview: 列表视图,视图中数据来自listmodel、xmllistmodel或c++中继承自qabstractitemmodel或...

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,会导致有些同学可能没积分无法下载,所以已经上传群里了.

如果下载后学习有收获,一定要来这里给我点个赞呀,都没动力更新文章了,赞的人太少了

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

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 微信好友列表和聊天列表的资料请关注其它相关文章!