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

更新時(shí)間：2021年06月13日 08:54:01 作者：諾謙

本文以微信好友列表為例給大家學(xué)習(xí)listview的相關(guān)知識，通過實(shí)例demo給大家詳解qt quick-ListView仿微信好友列表和聊天列表的實(shí)現(xiàn)方法，需要的朋友參考下吧

1.視圖模型介紹

在Qml中、常見的View視圖有:

ListView: 列表視圖,視圖中數(shù)據(jù)來自ListModel、XmlListModel或c++中繼承自QAbstractItemModel或QAbstractListModel的自定義模型類
TableView: 和excel類似的視圖
GridView: 網(wǎng)格視圖,類似于home菜單那樣,排列著一個(gè)個(gè)app小圖標(biāo)
PathView: 路徑視圖,可以根據(jù)用戶自定義的path路徑來顯示不一樣的視圖效果
SwipeView: 滑動(dòng)視圖,使用一組頁面填充。每次只顯示一個(gè)頁面。用戶可以通過橫向滑動(dòng)在頁面之間導(dǎo)航,一般會將它與PageIndicator結(jié)合使用

本章首先來學(xué)習(xí)ListView.以微信好友列表為例:

里面的每個(gè)好友就是由一個(gè)個(gè) item 組成的,存在視圖中的model里,然后寫一個(gè)delegate組件,即可通過ListView顯示出來.

由于時(shí)間不是很多,所以本章實(shí)現(xiàn)的微信好友列表和聊天列表(v1版本)是通過模擬數(shù)據(jù)實(shí)現(xiàn)的,等后面有時(shí)間后,再來實(shí)現(xiàn)個(gè)一個(gè)真正的內(nèi)網(wǎng)聊天工具.

2.demo實(shí)現(xiàn)(支持自適應(yīng))

好友列表如下圖所示:

聊天列表如下圖所示:

整個(gè)效果如下所示:

覺得GIF模糊的話,可以轉(zhuǎn)彎去bilibilihttps://www.bilibili.com/video/BV1Z64y1R7kL/

由于代碼上傳CSDN,會導(dǎo)致有些同學(xué)可能沒積分無法下載,所以已經(jīng)上傳群里了.

如果下載后學(xué)習(xí)有收獲,一定要來這里給我點(diǎn)個(gè)贊呀,都沒動(dòng)力更新文章了,贊的人太少了

3.重要組件-實(shí)現(xiàn)氣泡組件源碼

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值,那么我們就會去馬上調(diào)用替換后對應(yīng)的氣泡js文件的function(),進(jìn)行初始化消息、重繪氣泡背景。這個(gè)組件實(shí)現(xiàn)后,我們?nèi)绻雽?shí)現(xiàn)其它的氣泡,也可以直接往里加就好了

4.重要組件-實(shí)現(xiàn)聊天列表委托源碼

/****************************************************************************
**  聊天列表委托
** 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
        }
    }


    // 判斷消息時(shí)間,與當(dāng)前時(shí)間間隔多久,來動(dòng)態(tài)顯示
    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");
        }
    } 
}

代碼如上所示,我們會去判斷消息類型：