QML 聊天控件

基于 腾讯IM的 QML 聊天控件，支持at 某人

 

效果如下：

 

源码如下：

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    property int space: 17
    property string toCHead : ""
    Connections{
        target: IMController
        onReceiveMessage:{
            appendData(name,content,time,1)
            chatView.positionViewAtEnd()
        }

        onFindMember:{
            imMembers.addMember(name,id)
        }

    }

    ListModel{
        id:chatModel

        ListElement{
            chatNameE:"xxx"
            chatFlagE:1
            chatContentsE:"今晚吃啥？"
            chatTimeE:"1397031550000"
        }

        ListElement{
            chatNameE:"xxxx"
            chatFlagE:0
            chatContentsE:"蒸羊羔、蒸熊掌、蒸鹿尾儿、烧花鸭、烧雏鸡、烧子鹅、卤猪、卤鸭、酱鸡、腊肉、松花小肚儿、晾肉香肠、什锦苏盘、熏鸡白肚儿、清蒸八宝猪、江米酿鸭子、罐儿野鸡、罐儿鹌鹑、卤什锦、卤子鹅、山鸡、兔脯、菜蟒"
            chatTimeE:"1397031554530"
        }
    }
    Rectangle{
        id:viewRect
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.topMargin: space
        anchors.leftMargin: space
        anchors.rightMargin: space
        anchors.bottom: input.top
        ListView{
            id:chatView
            anchors.fill: parent
            spacing:12
            delegate: IMItem{
                width: chatView.width
                chatName: chatNameE
                chatContents: chatContentsE
                chatTime: chatTimeE
                chatFlag: chatFlagE
            }
            clip:true
            model:chatModel
        }
    }
    IMScrollBar{
        id:scBar
        anchors.right: viewRect.right
        anchors.rightMargin: 2
        anchors.top: viewRect.top
        anchors.bottom: viewRect.bottom
        width: 10
        scrollColor: "#dbe1e5"
        opacity: 0
        orientation: Qt.Vertical
        position: chatView.visibleArea.yPosition
        pageSize: chatView.visibleArea.heightRatio
        clip: true
    }
    states: State {
        name: "ShowBars"
        when: chatView.movingVertically || chatView.movingHorizontally
        PropertyChanges { target: scBar; opacity: 1 }
    }



    //

    function appendData(name,str,time,iflag,isGroup)
    {
        if(iflag === 0)
        {
            chatModel.append({"chatNameE": name,  "chatContentsE":str, "chatFlagE":0,"chatTimeE":time});
            IMController.sendMessage(str,isGroup)
        }else{
            console.log("IMArea ",name,str,time)
            chatModel.append({"chatNameE": name,  "chatContentsE":str, "chatFlagE":1,"chatTimeE":time});
        }
    }

    Rectangle{
        id:input
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        anchors.leftMargin: space
        anchors.rightMargin: space
        anchors.bottomMargin: space
        height: enabled?30:0
        radius: 6
        border.color: "#FFC45C"

        onEnabledChanged: {
            if(!enabled){
                content.text=""
            }
        }
        TextField{
            id:content
            anchors.fill: parent
            maximumLength:30
            placeholderText: qsTr("请输入你想说的…")
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    opacity: 0
                }
                font {
                    pointSize: 10
                }
            }
            Keys.onReturnPressed:{
                var curTime=new Date().getTime();
                var tmpTime= curTime.toString();

                var isGroup
                console.log("onReturnPressed",content.text.search(toCHead),toCHead)
                if(content.text.search(toCHead) != -1&&toCHead.length>1){
                    isGroup=0
                }else{
                    isGroup=1
                }
                appendData(MainController.teacherName(),content.text,tmpTime,0,isGroup)

                chatView.positionViewAtEnd()
                content.text=""
            }
            onTextChanged: {
                if(content.text==="@") {
                    imMembers.clearData()
                    IMController.GetGroupMemberInfoList()

                    imMembers.openDia()
                }else{
                    imMembers.closeDia()
                }
            }
        }
    }

    IMGroupMembers {
        id:imMembers
        anchors.bottom: input.bottom
        anchors.left: input.left
        anchors.bottomMargin: 20
        anchors.leftMargin: 20
        onCurIDChanged: {
            toCHead = "@"+curID+" "
            content.text = toCHead
        }
    }
}