QML做一个聊天框

╰+攻爆jí腚メ 2022-10-22 02:50 220阅读 0赞

用QML做聊天界面的思路一般都是用ListView来展示聊天记录。我也做了一个简易的聊天框，效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

虽然思路很简单，但是实现时遇到不少QML的Bug，比如滚动时图片闪烁、拉伸时位置/宽度绑定错误（所以我放弃了Layout）等，可能在别的版本还会有其他QML渲染上的Bug。

代码连接：[https://github.com/gongjianbo/MyTestCode2021/tree/master/Qml/TalkList][https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_TalkList]

不同类型的消息我用了不同的delegate，因为要动态选择delegate又使用了Loader进行加载。为了在Loader的sourceComponent里像一般的ListView delegate那样访问model数据，需要把Component声明到Loader里。

delegate: Loader{
            sourceComponent: {
                switch(model.type){
                case TalkData.Text:
    
                    return text_comp;
                case TalkData.Audio:
                    return audio_comp;
                }
                return none_comp;
            }
    
            //放到delegate才能attach model
            Component{
                id: text_comp
                TalkItemText{ }
            }
            Component{
                id: audio_comp
                TalkItemAudio{ }
            }
            Component{
                id: none_comp
                Item{ }
            }
        }

Text不能选中文本，所以我用TextEdit来展示消息。不过这样也只能选中一个Label里的文本，不能全选。

下面贴两个主体代码，即文本行delegate的代码（完整代码请在上面的github连接下）：

code 1.delegate item 基类

import QtQuick 2.12
    import QtQuick.Layouts 1.12
    
    //信息delegate的基类
    //龚建波 2021-3-29
    Item {
        id: control
    
        width: parent.ListView.view.width
        height: Math.max(profileHeight,
                         content_item.height)
    
        //profile picture头像
        property int profileHeight: 48
        property int messageHeight: 48
    
        property int leftWidth: 110
        property int rightWidth: 110
        property int contentWidth: Math.max(10,control.width-control.leftWidth-control.rightWidth)
        property bool isUser: (model.user===model.sender)
        property color messageBgColor: control.isUser?"#98E892":"#FFFFFF"
    
        default property alias contentItems: content_item.children
    
        Item{
            id: left_item
            height: control.height
            width: control.leftWidth
            //目前头像为固定，动态值可以放model
            Image {
                visible: !control.isUser
                width: control.profileHeight
                height: control.profileHeight
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/Image/profile_48_gray.png"
                //fillMode: Image.PreserveAspectFit
            }
        }
    
        Column{
            id: content_item
            x: control.leftWidth
            width: control.contentWidth
            spacing: 6
            //layoutDirection: control.isUser?Qt.RightToLeft:Qt.LeftToRight
        }
        Item {
            id: right_item
            height: control.height
            width: control.rightWidth
            anchors.right: parent.right
            //头像没必要放两个，可以动态锚定
            //但是区分开后可以写一些差异化的操作
            Image {
                visible: control.isUser
                width: control.profileHeight
                height: control.profileHeight
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/Image/profile_48_gray.png"
                //fillMode: Image.PreserveAspectFit
            }
        }
    
        //Component.onCompleted: {
        //    console.log('init',index);
        //}
        //Component.onDestruction: {
        //    console.log('free',index);
        //}
    }

code 2.delegate text

import QtQuick 2.12
    
    //文本信息delegate
    //龚建波 2021-3-29
    TalkItemBase {
        id: control
    
        //ColumnLayout在拉伸时计算有问题，暂时用Column+Row
        Row{
            width: control.contentWidth
            layoutDirection: control.isUser?Qt.RightToLeft:Qt.LeftToRight
            Rectangle{
                id: wrap_item
                radius: 4
                width: text_item.width
                height: text_item.height
                color: control.messageBgColor
    
                //指向发言人小三角
                Rectangle{
                    width: 10
                    height: 10
                    y: control.messageHeight/2-10
                    anchors.horizontalCenter: control.isUser?parent.right:parent.left
                    rotation: 45
                    color: control.messageBgColor
                }
    
                TalkLabel{
                    id: text_item
                    text: model.text_text
                    width: Math.min(control.contentWidth,textWidth)
                }
            }
        }
    
        Row{
            width: control.contentWidth
            layoutDirection: control.isUser?Qt.RightToLeft:Qt.LeftToRight
            TalkLabel{
                text: model.datetime
                padding: 0
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20221022/611fba8bee074a039f9df53caf859afb.png
[https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_TalkList]: https://github.com/gongjianbo/MyTestCode2021/tree/master/Qml/TalkList