简述
在走上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系统表情(一)
发布评论