基于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?
- <style type="text/css">
- .triangle-left{float:left;max-width:300px;border:1pxsolid#b6b6b7;border-radius:10px;padding:15px;background:#efeff0;margin:0015px25px;position:relative;display:inline-block;box-shadow:04px8px#888888;word-wrap:break-word;}
- .triangle-left:before{position:absolute;content:"";display:block;}
- .triangle-left.left:before{border-color:rgba(0,0,0,0)#B6B6B7rgba(0,0,0,0)rgba(0,0,0,0);border-width:8px19px10px40px;border-style:solid;bottom:auto;left:-60px;top:8px;}
- .triangle-left:after{position:absolute;content:"";display:block;}
- .triangle-left.left:after{border-color:rgba(0,0,0,0)#efeff0rgba(0,0,0,0)rgba(0,0,0,0);border-width:8px19px10px40px;border-style:solid;bottom:auto;left:-57px;top:8px;}
- .triangle-right{float:right;max-width:300px;border:1pxsolid#b6b6b7;border-radius:10px;padding:15px;background:#d3edf9;position:relative;display:inline-block;margin:025px15px0;box-shadow:04px8px#888888;word-wrap:break-word;}
- .triangle-right:before{position:absolute;content:"";display:block;}
- .triangle-right.right:before{border-color:rgba(0,0,0,0)rgba(0,0,0,0)rgba(0,0,0,0)#B6B6B7;border-width:8px40px10px19px;border-style:solid;bottom:auto;right:-60px;top:8px;}
- .triangle-right:after{position:absolute;content:"";display:block;}
- .triangle-right.right:after{border-color:rgba(0,0,0,0)rgba(0,0,0,0)rgba(0,0,0,0)#d3edf9;border-width:8px40px10px19px;border-style:solid;bottom:auto;right:-57px;top:8px;}
- .triangle-time{text-align:center;color:#999;font-size:12px;font-family:Arial;clear:both;margin:5px0;}
- img{max-width:300px;margin:5px0;}
- </style>
然后C++代码里面new 一个QWebview实例，去加载这段css文件
[cpp] view plaincopyprint?
- QFilefile(":/send.html");
- if(!file.open(QIODevice::ReadOnly))
- {
- //chatStyle.htmldoesn'texsit
- messageList="";
- }
- else
- {
- messageList=file.readAll();
- messageList+="<divclass="container">";
- ui->webView->setHtml(messageList);
- }
- file.close();
初始化后接收发的消息然后加入webview内显示，这里只要是拼装html+css
[cpp] view plaincopyprint?
- voidYibanChat::AddMessageToList(QStringmcontent,//消息内容
- QStringauthorName,//消息发送者昵称
- intsenderType,QStringListimgList)//发送者身份
- {
- qDebug()<<"mcontent======================>"<<imgList;
- for(inti=0;i<imgList.count();i++){
- if(imgList.at(i).isEmpty()){
- break;
- }
- QImagefileInfo(imgList.at(i));
- QSizeiW=fileInfo.size();
- if(iW.width()>200||iW.height()>200){
- mcontent.append("<imgsrc=""+imgList.at(i)+""width="200"height="200""/>");
- }else{
- mcontent.append("<imgsrc=""+imgList.at(i)+""width=""+iW.width()+""height=""+iW.height()+""/>");
- }
- }
- QStringstrTime=QDateTime::currentDateTime().toString("yyyy-MM-ddhh:mm:ss");
- if(senderType<0){
- messageList+=("<p>"
- "<divstyle="text-align:left;padding-left:150px">"+strTime+"</div></p>");
- messageList+=("<pclass="Me"></p><pclass="triangle-right"><strong>[");
- }else if(senderType>0){
- messageList+=("<p>"
- "<divstyle="text-align:left;padding-left:150px">"+strTime+"</div></p>");
- messageList+=("<pclass="U"></p><pclass="triangle-left">[<strong>");
- }else{
- messageList+=("<pclass="root"></p><pclass="rootsaid">[<strong>");
- }
- messageList+=authorName;
- messageList+=tr("]:</strong></br>");
- messageList+=mcontent;
- messageList+=tr("</p><divclass="clear"></div>");
- ui->webView->setHtml(messageList+"</div></body>",
- QUrl(QCoreApplication::applicationDirPath()+"//"));
- ui->webView->setHtml(messageList+"<aid='butt'></a></div></body>",
- QUrl(QCoreApplication::applicationDirPath()+"//"));
- QWebFrame*mf=ui->webView->page()->mainFrame();
- mf->scrollToAnchor("butt");
- imgLst.clear();
- }
这里主要参考了网上的代码，在此声明下 O(∩_∩)O~
我之后实现了添加图片和截图发送的功能而已
看下效果图
但是这个只支持单窗口聊天，要是每个聊天窗口都实例一个webview的话，内存吃不消，有人提到使用一个webview，然后写个html实现多个tab切换和新建、删除等功能，由于html只是有限，遂未做研究，希望有心之人可以实现之。
优质内容筛选与推荐>>1、验证码被绕过的方法
2、linux下使用mono运行vs程序和windows下的一些区别
3、[Leetcode + Lintcode] 34. Search for a Range
4、常见的 4 种HTML5错误用法，你用错了几个
5、mysql中 in 、not in 、exists、not exists 用法和差别