28.qtquick-listview高仿微信好友列表和聊天列表(代码片段)

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
        
    

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