28.qt quick-ListView高仿微信好友列表和聊天列表

諾謙發表於2021-06-12
QTUIView

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"型別,則靠又顯示自己頭像,並加上氣泡訊息

 

相關文章