热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【QtUI】仿QQ表情选择控件

表情选择控件在聊天应用中经常要用到,做起来虽然不复杂但是很繁琐,特别是有些图标需要按顺序排列。每次重做必然是很费时,所以我将聊天表情选择控件封装成一个独立的类QFaceSelect
     表情选择控件在聊天应用中经常要用到,做起来虽然不复杂但是很繁琐,特别是有些图标需要按顺序排列。每次重做必然是很费时,所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWidget,方便直接应用到自己的项目中。
先来看看效果图:
,

测试程序是一个对话框,里面放有一个QPushButton和一个QLabel,水平布局。点击按钮弹出“表情选择框",选择表情后"表情选择框"关闭,QLabel中显示刚才选择的表情。"表情选择框"中的表情都是gif图片,排列顺序和QQ一样。

如何应用到自己的项目中?
     下面是QFaceSelectWidget项目的文件结构,其中gui目录下存放了两个类文件QFaceSelectWidget和QGifLabel,前者是”表情选择框“,后者用来显示Gif动画。res.qrc下面是用到的表情资源,main.cpp 是测试代码。
,

步骤1:将C++文件拷贝到你的项目中
qfaceselectwidget.cpp
qfaceselectwidget.h
qgiflabel.cpp
qgiflabel.h

步骤2:将表情资源添加到你的资源文件中

步骤3:使用
     在需要用到”表情选择框“的源文件中,添加头文件"qfaceselectwidget.h",然后创建QFaceSelectWidget实例对象,设置相应的信号/槽处理。
    // 第一个参数指定聊天表情所在的目录(本地文件系统路径 或 Qt资源文件路径)
    QFaceSelectWidget faceSelectWidget(":/faces/res/images/faces");
    // 按钮点击时显示”聊天表情框“
    // showOnTop()的第一个参数:”聊天表情框“显示在该参数所指定位置的上方(屏幕坐标系)。
    // showOnTop()的第二个参数:”聊天表情框“在参数一所指定的位置”向上“偏移参数二所指定的距离。
    QObject::connect(btn, &QPushButton::clicked, [=, &faceSelectWidget]{
        faceSelectWidget.showOnTop(QCursor::pos(), btn->height()/2);
    });
    // 表情选择完成后,在label中播放所选择的gif动画
    QObject::connect(&faceSelectWidget, &QFaceSelectWidget::selected, [=](const QString &filename){
        gifLabel->setFileName(filename);
        gifLabel->start();
    });
实现过程简介
     QFaceSelectWidget 使用表格布局,每个单元格是一个QGifLabel用来播放gif动画,设置WindowFlags(Qt::Popup)这样窗口没有标题栏。

     QLabel可以通过设置QMovie来显示Gif动画,但是也有一些不方便的地方,所以我从QLabel类派生了QGifLabel,方便处理鼠标点击、移入和移出事件,同时对Gif动画的控制也更为方便直观,下面是QGifLabel的申明:
class QGifLabel : public QLabel
{
    Q_OBJECT
public:
    explicit QGifLabel(QWidget *parent = 0);
    QGifLabel(const QString &fileName, QWidget *parent = 0);

    void setFileName(const QString &fileName, bool start = false);
    void start();
    void stop();

signals:
    void clicked(const QString &fileName);

protected:
    void mouseReleaseEvent(QMouseEvent *e);
    void enterEvent(QEvent *e);
    void leaveEvent(QEvent *e);

private:
    QMovie *m_movie;
};
     QFaceSelectWidget 的构造函数需要指定表情资源的目录,在构造函数内部会调用mapIconName()来映射表情资源文件名到m_iconName中,表情从m_iconName所指定的路径加载,这样的好处是你可以在mapIconName()中修改表情的显示顺序。showOnTop()会计算表情选择框显示的合适位置。selected()是一个信号,当选择表情后会执行两个发射该信号,该信号会将所选择的表情的路径传递出去,供外部使用。
class QFaceSelectWidget : public QWidget
{
    Q_OBJECT

public:
    explicit QFaceSelectWidget(const QString &faceIconDir, QWidget *parent = 0);
    ~QFaceSelectWidget();

    void showOnTop(QPoint &pos, int offsetY = 0);

signals:
    void selected(const QString &fileName);

private:
    QMap m_iconName;

    void mapIconName();
};
更多细节可以查阅源文件,源代码下载地址:http://git.oschina.net/xiaohui_hubei/Code-Home/raw/master/QFaceSelectWidget.7z。

【Qt UI】仿QQ表情选择控件


推荐阅读
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]
  • PDF内容编辑的两种小方法,你知道怎么操作吗?
    本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
  • CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法
    本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
author-avatar
林立霞61556
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有