基于Qt的类QQ气泡聊天的界面开发(二)

1：使用Qt下面的QListview来实现QQ类似效果，差强人意

2：使用QWebview加载html css样式来完成，发现效果不错，但是毕竟webview占用巨大的内存

3：使用QTextBrower加载css，但是好像只支持css2.1版本，css3完全不支持，这样的话，花哨的样式应该是无法实现

前章写了使用delegate实现气泡效果，但是始终无法做到与QQ匹敌的效果，好多功能不能实现

现在使用第二种方法

   第二种方式主要是使用QWebview来加载css样式来实现功能，

  首先需要写好css样式，新建一个css文件，里面只写css样式

然后C++代码里面new 一个QWebview实例，去加载这段css文件

QFile file(":/send.html");
    if(!file.open(QIODevice::ReadOnly))
    {
        //chatStyle.html doesn't exsit
        messageList="";
    }
    else
    {
        messageList = file.readAll();
        messageList += "
";
        ui->webView->setHtml(messageList);
    }
    file.close();

初始化后接收发的消息然后加入webview内显示，这里只要是拼装html+css

void YibanChat::AddMessageToList(QString mcontent,   //消息内容
                                 QString authorName, //消息发送者昵称
                                 int senderType,QStringList imgList)     //发送者身份
{
    qDebug()<<"mcontent======================>  "<200 || iW.height()>200){
            mcontent.append(" ");
        }else{
            mcontent.append(" ");
        }
    }
    QString strTime = QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss");
    if(senderType < 0){
        messageList+=("
"
                      "
"+strTime+"
");
        messageList+=("
[");
    }else if(senderType > 0){
        messageList+=("
"
                      "
"+strTime+"
");
        messageList+=("
[");
    }else{
        messageList+=("
[");
    }
    messageList+=authorName;
    messageList+=tr("]:
");
    messageList+=mcontent;
    messageList+=tr("
");
    ui->webView->setHtml(messageList+"

", QUrl(QCoreApplication::applicationDirPath()+"//")); ui->webView->setHtml(messageList+"

", QUrl(QCoreApplication::applicationDirPath()+"//")); QWebFrame* mf = ui->webView->page()->mainFrame(); mf->scrollToAnchor("butt"); imgLst.clear(); }这里主要参考了网上的代码，在此声明下 O(∩_∩)O~

我之后实现了添加图片和截图发送的功能而已

看下效果图

但是这个只支持单窗口聊天，要是每个聊天窗口都实例一个webview的话，内存吃不消，有人提到使用一个webview，然后写个html实现多个tab切换和新建、删除等功能，由于html只是有限，遂未做研究，希望有心之人可以实现之。