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

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样式

[html] view plaincopyprint?

  1. <style type="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>

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

[cpp] view plaincopyprint?

  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();  

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

[cpp] view plaincopyprint?

  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.     }else if(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. }  

这里主要参考了网上的代码,在此声明下 O(∩_∩)O~

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

看下效果图

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

2816
来自专栏Clive的技术分享

修改CentOS服务器时间为北京时间

8764
来自专栏前端知识分享

第159天:前端知识体系框架

Web Components:http://css-tricks.com/modular-future-web-components//

1433
来自专栏向治洪

iOS开发入门笔记

iOS开发入门笔记 本文面向已有其它语言(如Java,C,PHP,Javascript)编程经验的iOS开发初学者,初衷在于让我的同事一小时内了解如何开始开发i...

4606
来自专栏c#开发者

datagrid资料+ by iCeSnaker - Program rhapsody

datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.c...

3649
来自专栏菩提树下的杨过

flash 显示 qq客服状态

前几天看到有园友写了一篇“ flash查看对方qq是否在线 ”,正好今天有一个朋友搞flash全站,想使用这个功能,但是有些小要求,点击图标后,要求弹出QQ对话...

20710
来自专栏Objective-C

Swift-MVVM 简单演练(三)

3013
来自专栏IMWeb前端团队

用Flux实现TodoMVC

本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github 下载。...

2145
来自专栏葡萄城控件技术团队

如何将GridViewEX升级到UWP(Universal Windows Platform)平台

引言 上一篇文章中,我们主要讲解了如何在保证GridView控件的用户体验基础上,扩展GridView生成GridViewEx控件,增加动态添加新分组功能等,本...

2288
来自专栏木宛城主

SharePoint 中时间轴 Timeline的实现

客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Ti...

2366

扫码关注云+社区

领取腾讯云代金券