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

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

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

1.視圖模型介紹

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

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

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

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

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

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

好友列表如下圖所示:

聊天列表如下圖所示:

整個效果如下所示:

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

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

如果下載后學習有收獲,一定要來這里給我點個贊呀,都沒動力更新文章了,贊的人太少了

3.重要組件-實現(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值,那么我們就會去馬上調用替換后對應的氣泡js文件的function(),進行初始化消息、重繪氣泡背景。這個組件實現(xiàn)后,我們如果想實現(xiàn)其它的氣泡,也可以直接往里加就好了

4.重要組件-實現(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
        }
    }


    // 判斷消息時間,與當前時間間隔多久,來動態(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");
        }
    } 
}

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