简述

在走上Qt之路后，对QQ的界面便情有独钟，由衷感叹：

一个字——美
两个字——很美
三个字——非常美
四个字——真TM美

说实在QQ的界面做的很精、致，毕竟积累了十几年的功力。但是也有不足的地方，任何事物都不是十全十美的，最重要的是要做的尽善尽美。好了话不多说，代码走起。

代码之路

这次主要是对QQ聊天窗口的表情框的简单实现，下篇中将进一步展开。

先看看QQ的小表情框：

当我们将鼠标慢慢放在这个表情按钮上时会弹出小表情窗口，这个小窗口中的表情是最近所使用过的表情，下面我们就来讲一讲怎么实现这个表情框。
这里我们只需要用到QTableWidget控件即可，新建一个带UI的类（我这里用的VS，QtCreator同理），也可以新建一个不带UI的类，这里为了叙述方便就直接用QtDesigner了。

拖动一个QTableWidget控件到界面，设置界面和QTableWidget的宽高为136。然后对QTableWidget进行如下设置为下图右。效果为下图左。一个表情框搭建完毕，开始加载表情。

//添加表情
void MyEmotionWidget::addEmotionItem(QString fileName)
{// 获取当前添加到第几行第几列int row = m_emotionList.size() / ui.tableWidget->rowCount();int column = m_emotionList.size() % ui.tableWidget->rowCount();QTableWidgetItem* tableWidgetItem = new QTableWidgetItem;ui.tableWidget->setItem(row, column, tableWidgetItem);// 因为表情大部分为gif图片格式，所以这里用QMovie来显示QLabel* emotionIcon = new QLabel;emotionIcon->setMargin(4);QMovie* movie = new QMovie;movie->setScaledSize(QSize(24, 24));movie->setFileName(fileName);movie->start();emotionIcon->setMovie(movie);ui.tableWidget->setCellWidget(row, column, emotionIcon);m_emotionList.push_back(fileName);
}
//初始化表情
void MyEmotionWidget::initEmotion()
{this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);ui.tableWidget->setFocusPolicy(Qt::NoFocus);QString path = "Resources/emotion/%1.gif";for (int i = 0; i < 16; i++){addEmotionItem(path.arg(i + 1));}
}

几行代码轻松解决，附上效果图：

上图中所有的表情都是动态在显示，而我们要的效果则是鼠标悬浮在某个表情上，那个表情才动态显示，见下图，这个问题将在下一篇来讲解如何来解决。

可以下载QQ系统表情包进行试验哦！！！

QQ表情包下载

Qt 之 QQ系统表情（一）相关推荐

Vc++ - qt -仿照微信项目- 表情窗口设计
分享的力量是无穷的,在csdn上搜索关于表情窗口的设计,偶然发现之前有人做过关于表情这方面的工作,博主:前行中的小猪,相关系列文章 <<QQ之系统表情>>,这里提供<&l ...
Qt工作笔记-Qt元对象系统解析【2合1】
博文转载地址: https://blog.csdn.net/spwper/article/details/51332187 说Qt信号与槽是一个很好机制,不如说Qt的元对象系统很强大.这也是大家讲Qt ...
Qt模仿QQ聊天窗口界面（二）
Qt模仿QQ聊天窗口界面(二) Qt模仿QQ聊天窗口界面(二) 简述修改效果图后期规划代码结尾简述在上篇我们已经搭好了QQ聊天窗口的框架,这里在原来的基础上叠加功能,以及优化一些控件. ...
【原创】QT在嵌入式系统中显示中文的方法
[原创]QT在嵌入式系统中显示中文的方法此篇文章主要借鉴:http://zzqh007.blog.163.com/blog/static/44434847201011312168296/ 移植QT4 ...
QT实现太阳系系统八大行星
QT实现太阳系系统八大行星项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介演示结合了Qt 3D渲染和Qt Quick 2元素. Planets演示了如何实现将Qt ...
怎么制作gif动态图 QQ动态表情包怎么制作
在平时的聊天中经常会使用到GIF动图,不仅仅可以缓解气氛,还很有趣,那这些动态图是如何制作的呢?没有想象的那么难,今天来看看怎么制作的吧! 1.先准备好素材,要制作什么样的动图,可以是图片也可以是视频 ...
[练习]QQ/微信表情收藏-测试用例的编写 [简洁思路]
QQ电脑版添加表情: 微信添加表情: 手机版QQ添加表情: 总结上次经验,这次可以分成几个方向进行测试用例编写: 1. 功能方面 :正常的功能能不能正常使用,图片上限 2. 性能方面 :网络.时间.类 ...
安卓开发-最简单快速的仿微信聊天实现-附赠微信原生表情，QQ原生表情
前言:正常实现聊天功能想必大家都使用三方的Sdk比如环信融云集成的,但是聊天记录的保存只能有三天,想增加保存时长就需要花钱,so 我只好自己想办法实现了,这个demo是类似于留言板,并非即时通讯!只实 ...
Qt模仿QQ聊天窗口界面（一）
Qt模仿QQ聊天窗口界面(一) Qt模仿QQ聊天窗口界面(一) 简述效果图 QQ的聊天窗口我做的效果图代码篇结尾简述最近利用业余时间,模仿QQ做了一个聊天窗口界面,功能还不全,准备分几个部 ...
IM即时通讯项目讲解(一) 实现类似qq微信表情面板无缝切换
IM即时通讯项目讲解(一)--实现类似qq微信表情面板无缝切换标签(空格分隔): 开源项目 ###该系列技术课程来源慕课IM实战带后台的IM即时通讯App 全程MVP手把手打造 #####通过该课 ...

Qt 之 QQ系统表情（一）

简述