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

Posted on by

1.視圖模型介紹

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

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

本章首先來學習ListView.以微信好友列表為例:

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

由於時間不是很多,所以本章實現的微信好友列表和聊天列表(v1版本)是通過模擬數據實現的,等後面有時間後,再來實現個一個真正的內網聊天工具.

2.demo實現(支持自適應)

好友列表如下圖所示:

聊天列表如下圖所示:

整個效果如下所示:

覺得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 微信好友列表和聊天列表的資料請關註WalkonNet其它相關文章！

推薦閱讀：