qml实现的聊天界面

最新推荐文章于 2024-06-06 14:24:20 发布

李玉峰

最新推荐文章于 2024-06-06 14:24:20 发布

阅读量2.2k

点赞数

分类专栏： QT编程

本文链接：https://blog.csdn.net/qq_16383977/article/details/79719728

版权

这篇博客介绍了如何利用Qml和Qt来实现一个聊天界面，包括实现列表项的文字选择和复制功能、删除功能、上滑加载更多历史消息，以及如何在C++中与Qml交互进行数据操作。示例代码展示了具体的实现细节。

摘要由CSDN通过智能技术生成

非常感谢【Qml+Qt】聊天机器人|http://www.qtcn.org/bbs/read-htm-tid-62920.html提供的思路

自己增加了需要的一些功能：实现了listview的delegate文字可以鼠标选择并复制、接受键盘ctrl+c复制，item的删除，鼠标上滑到最顶端时加载更多item，摒弃了互动聊天方式，只用于推送，若需要建议参考以上链接

直接贴代码：

import QtQuick 2.6

import QtQuick.Layouts 1.3

import QtQuick.Controls 2.0

Rectangle {

    id: root

    color: "#f5f5f5"

    function add_message(timetext,issame,text,who,istip,type,id)

        if(text.length <= 0)

            return;

        listView.model.insert(0, {
 "content": text, "send": who,"msgTime":timetext,"same":issame,"tip":istip,

                                  "send_type": type,"id": id});

        //verScrollBar.increase()

        //滚动条移动到最下面

        verScrollBar.setPosition(1.0)

    function add_more_message(timetext,issame,text,who,istip,type,id)

        if(text.length <= 0)

            return;

        var count=listView.model.count

        listView.model.insert(count, {
 "content": text, "send": who,"msgTime":timetext,"same":issame,"tip":istip,

                                  "send_type": type,"id": id});

        //verScrollBar.increase()

        //verScrollBar.setPosition(1.0)

    function clearListview()

        listView.model.clear()

    function re_edit_item(index)

        var count=listView.model.count

        if(count>0){

            listView.model.remove(index,1)

    property bool showtip: false

    function show_tip()

        showtip=true

    function hide_tip()

        showtip=false

    ColumnLayout {

        id:page

        anchors.fill: parent

        //接受键盘事件focus必须为true

        focus: true

        //由于messageText接受不到键盘事件，定义一个信号

        //page接收到ctrl+c使通知messagetext copy

        signal ctrl_c()

        Keys.onPressed: {

            if((event.modifiers===Qt.ControlModifier) && (event.key===Qt.Key_C)){

                //发射信号

                page.ctrl_c()

            event.accepted=true

        Rectangle {

            id:tiprect

            width: tiptext.implicitWidth+10

            height: 30

            color: "#f5f5f5"

            anchors.horizontalCenter: parent.horizontalCenter

            visible:showtip

            Label {

                id: tiptext

                text: "查看更多消息请前往消息记录"

                verticalAlignment: Text.AlignVCenter

                horizontalAlignment: Text.AlignHCenter

                color: "#1f61ff"

                font.family: "微软雅黑"

                font.pointSize: 9

                anchors.fill: parent

                anchors.margins:0

        ListView {

            id: listView

            Layout.fillWidth: true

            Layout.fillHeight: true

            Layout.margins:14

            Layout.rightMargin: 0

            displayMarginBeginning: 40

            displayMarginEnd: 40

            verticalLayoutDirection: ListView.BottomToTop

            spacing:14

关注