http://blog.csdn.net/esonpo/article/details/25974999

1：使用Qt下面的QListview來實現QQ類似效果，差強人意

2：使用QWebview載入html css樣式來完成，發現效果不錯，但是畢竟webview佔用巨大的記憶體

3：使用QTextBrower載入css，但是好像只支援css2.1版本，css3完全不支援，這樣的話，花哨的樣式應該是無法實現

前章寫了使用delegate實現氣泡效果，但是始終無法做到與QQ匹敵的效果，好多功能不能實現

現在使用第二種方法

   第二種方式主要是使用QWebview來載入css樣式來實現功能，

  首先需要寫好css樣式，新建一個css檔案，裡面只寫css樣式

1. <styletype="text/css">
2. .triangle-left{float:left;max-width:300px;border:1px solid #b6b6b7; border-radius:10px;padding:15px;background:#efeff0;margin:0  0 15px 25px; position:relative; display:inline-block;box-shadow:0 4px 8px #888888;word-wrap: break-word;}  
3.        .triangle-left:before{position:absolute; content:"";display:block;}  
4.        .triangle-left.left:before{border-color:rgba(0, 0, 0, 0) #B6B6B7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:8px 19px 10px 40px;border-style:solid;bottom:auto;left:-60px;top:8px;}  
5.        .triangle-left:after{position:absolute; content:"";display:block;}  
6.        .triangle-left.left:after{border-color:rgba(0, 0, 0, 0) #efeff0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:8px 19px 10px 40px;border-style:solid;bottom:auto;left:-57px;top:8px;}  
7.        .triangle-right{float:right;max-width:300px;border:1px solid #b6b6b7;border-radius:10px;padding:15px;background:#d3edf9;position:relative;display:inline-block;margin:0 25px 15px 0;box-shadow:0 4px 8px #888888;word-wrap: break-word;}  
8.        .triangle-right:before{position:absolute; content:"";display:block;}  
9.        .triangle-right.right:before{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #B6B6B7;border-width:8px 40px 10px 19px;border-style:solid;bottom:auto;right:-60px;top:8px;}  
10.        .triangle-right:after{position:absolute; content:"";display:block;}  
11.        .triangle-right.right:after{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d3edf9;border-width:8px 40px 10px 19px;border-style:solid;bottom:auto;right:-57px;top:8px;}  
12.        .triangle-time{text-align:center;color:#999;font-size:12px; font-family:Arial;clear:both;margin:5px 0;}  
13.        img{max-width:300px;margin:5px 0;}  
14. </style>

1. QFile file(":/send.html");  
2.     if(!file.open(QIODevice::ReadOnly))  
3.     {  
4.         //chatStyle.html doesn't exsit
5.         messageList="";  
6.     }  
7.     else
8.     {  
9.         messageList = file.readAll();  
10.         messageList += "<div class=\"container\">";  
11.         ui->webView->setHtml(messageList);  
12.     }  
13.     file.close();  

1. void YibanChat::AddMessageToList(QString mcontent,   //訊息內容
2.                                  QString authorName, //訊息傳送者暱稱
3.                                  int senderType,QStringList imgList)     //傳送者身份
4. {  
5.     qDebug()<<"mcontent======================>  "<<imgList;  
6.     for(int i=0;i<imgList.count();i++){  
7.         if(imgList.at(i).isEmpty()){  
8.             break;  
9.         }  
10.         QImage fileInfo(imgList.at(i));  
11.         QSize iW =  fileInfo.size();  
12.         if(iW.width()>200 || iW.height()>200){  
13.             mcontent.append("<img src=\""+imgList.at(i)+"\" width=\"200\" height=\"200\"\" /> ");  
14.         }else{  
15.             mcontent.append("<img src=\""+imgList.at(i)+"\" width=\""+iW.width()+"\" height=\""+iW.height()+"\" /> ");  
16.         }  
17.     }  
18.     QString strTime = QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss");  
19.     if(senderType < 0){  
20.         messageList+=("<p>"
21.                       "<div style=\"text-align:left;padding-left:150px\">"+strTime+"</div></p>");  
22.         messageList+=("<p class=\"Me\"></p><p class=\"triangle-right\"><strong>[");  
23.     }elseif(senderType > 0){  
24.         messageList+=("<p>"
25.                       "<div style=\"text-align:left;padding-left:150px\">"+strTime+"</div></p>");  
26.         messageList+=("<p class=\"U\"></p><p class=\"triangle-left\">[<strong>");  
27.     }else{  
28.         messageList+=("<p class=\"root\"></p><p class=\"rootsaid\">[<strong>");  
29.     }  
30.     messageList+=authorName;  
31.     messageList+=tr("]:</strong></br>");  
32.     messageList+=mcontent;  
33.     messageList+=tr("</p><div class=\"clear\"></div>");  
34.     ui->webView->setHtml(messageList+"</div></body>",  
35.                          QUrl(QCoreApplication::applicationDirPath()+"//"));  
36.     ui->webView->setHtml(messageList+"<a id='butt'></a></div></body>",  
37.                          QUrl(QCoreApplication::applicationDirPath()+"//"));  
38.     QWebFrame* mf = ui->webView->page()->mainFrame();  
39.     mf->scrollToAnchor("butt");  
40.     imgLst.clear();  
41. }  

我之後實現了新增圖片和截圖傳送的功能而已

看下效果圖

但是這個只支援單視窗聊天，要是每個聊天視窗都例項一個webview的話，記憶體吃不消，有人提到使用一個webview，然後寫個html實現多個tab切換和新建、刪除等功能，由於html只是有限，遂未做研究，希望有心之人可以實現之。