关闭

Qt 之 QQ系统表情(一)

标签: qt界面qq聊天
2026人阅读 评论(2) 收藏 举报
分类:

简述

在走上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表情包下载

4
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Qt 之 QQ系统表情(一)

在走上Qt之路后,对QQ的界面便情有独钟,由衷感叹:一个字——美 两个字——很美 三个字——非常美 四个字——真TM美说实在QQ的界面做的很精、致,毕竟积累了十几年的功力。但是也有不足的地方,任...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-08-30 22:03
  • 2026

Qt 之 QQ系统表情—实现动态显示效果

简述在Qt 之 QQ系统表情(五) 中 我们实现了自定义系统表情窗口,这一篇将简单介绍如何实现QQ聊天界面中小表情窗口切换至正常表情窗口的动画效果。先看看QQ的效果: 当鼠标悬浮在表情按钮之上显示...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-09-26 22:15
  • 2645

【Qt】仿QQ表情选择控件

表情选择控件在聊天应用中经常要用到,做起来虽然不复杂但是很繁琐,特别是有些图标需要按顺序排列。每次重做必然是很费时,所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWidget,方便直...
  • xiaohui_hubei
  • xiaohui_hubei
  • 2014-08-24 15:36
  • 2481

Qt 之 QQ系统表情(二)

简述继上篇Qt 之 QQ系统表情(一) 中我们实现了简单的表情框,但是还遗留了一个问题,虽然我们能够显示动态的表情,但是总不能让表情框中的每一个表情都动态显示吧(见下图一),这样的效果显然不是我们要...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-08-31 09:29
  • 907

Qt 之 QQ系统表情(四)

简述继Qt 之 QQ系统表情(三) 中我们用了两种方法实现了当前鼠标位置的表情动态显示,在这一篇中我们将对其进行拓展,增加一些新特效以及能够自定义表情窗口(包括表情的行列数 , 表情的大小,表情的个数...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-09-06 18:31
  • 1104

Qt 之 QQ系统表情(五)

简述在Qt 之 QQ系统表情(四) 中我们通过用nativeEvent事件的方法实现了自定义表情窗口,这一篇将通过继承QLabel的方式来实现。同时我也在研究过程中发现了一些小问题。代码Go!代码之路...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-09-07 08:50
  • 1850

Qt 之 QQ系统表情(三)

简述继上篇Qt 之 QQ系统表情(二) 中我们实现了当鼠标悬浮在某个表情时动态显示,其他的都显示为静态样式,但是方法并不是很好,下面我们介绍另外两种比较好的方法来实现这个效果。代码走起!代码之路上一篇...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-09-01 21:57
  • 1391

Qt 之实现 QQ系统表情窗口

  • 2016-09-07 11:41
  • 267KB
  • 下载

QQ 系统表情包

  • 2016-08-30 22:48
  • 257KB
  • 下载

IOS QQ5.5选择系统图片、表情Demo

  • 2015-11-12 15:49
  • 232KB
  • 下载
    博客介绍

    前行中的小猪!


    博客主要包含了Qt学习的一些基础内容,欢迎大家一起交流、讨论。


    博客将会不断更新,更多精彩、好玩的内容等着你!


    文章中的大图被压缩可能不是很清晰,可以放大网页进行浏览

    Qt 分享交流

    Qt 学习、爱好者 欢迎一起交流!

    群号:311750285
    个人资料
    • 访问:190532次
    • 积分:2855
    • 等级:
    • 排名:第14378名
    • 原创:72篇
    • 转载:0篇
    • 译文:1篇
    • 评论:217条
    最新评论