Qt编写自定义控件二动画按钮 - QTCN开发网

在线liudianwu

总版主

图酷模式

只看楼主倒序阅读楼主发表于: 2016-11-07

现在的web发展越来越快，很多流行的布局样式，都是从web开始的，写惯了Qt widgets 项目，很多时候想改进一下现有的人机交互，尤其是在现有的按钮上加一些动画的效果，例如鼠标移上去变大，移开还原。
Qt编写自定义控件还是非常方便和非常强大的，数量掌握Qpainter的各种绘制，自定义任意控件几乎都不是难题，只有想不到，没有做不到。
贴一张个人认为做的比较炫的UI界面：

如果工控项目的界面能够做到这种程序，应该可以让人眼前一亮。

运行效果图：

核心代码：

复制代码

void AnimationButton::paintEvent(QPaintEvent *)
{
if (image.isEmpty()) {
return;
}
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
QPixmap pix(image);
pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
if (enter || leave) {
int pixX = rect().center().x() - targetWidth / 2;
int pixY = rect().center().y() - targetHeight / 2 - 10;
QPoint point(pixX, pixY);
painter.drawPixmap(point, pix);
painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text);
}
}

完整代码：
animationbutton.h

复制代码

#ifndef ANIMATIONBUTTON_H
#define ANIMATIONBUTTON_H
/**
* 作者:feiyangqingyun(QQ:517216493) 2016-10-22
* 1:可设置显示的图像和底部的文字
*/
#include <QWidget>
#include <QVariant>
class QPropertyAnimation;
class AnimationButton : public QWidget
{
Q_OBJECT
public:
explicit AnimationButton(QWidget *parent = 0);
~AnimationButton();
protected:
void enterEvent(QEvent *);
void leaveEvent(QEvent *);
void paintEvent(QPaintEvent *);
private:
bool enter; //是否进入
bool leave; //是否离开
int pixWidth; //图片宽度
int pixHeight; //图片高度
int oldWidth; //图片旧宽度
int oldHeight; //图片旧高度
QPropertyAnimation *enterAnimation; //进入动画
QPropertyAnimation *leaveAnimation; //离开动画
int targetWidth; //目标宽度
int targetHeight; //目标高度
QString text; //显示文字
QString image; //图像路径
private slots:
void enterImageChanged(QVariant index);
void leaveImageChanged(QVariant index);
public slots:
//设置显示的文字
void setText(QString text);
//设置显示的图像
void setImage(QString image);
};
#endif // ANIMATIONBUTTON_H

animationbutton.cpp

复制代码

#include "animationbutton.h"
#include "qpainter.h"
#include "qpropertyanimation.h"
#include "qdebug.h"
AnimationButton::AnimationButton(QWidget *parent) : QWidget(parent)
{
enter = true;
leave = false;
pixWidth = 0;
pixHeight = 0;
oldWidth = 0;
oldHeight = 0;
enterAnimation = new QPropertyAnimation(this, "");
enterAnimation->setStartValue(0);
enterAnimation->setEndValue(5);
enterAnimation->setDuration(200);
connect(enterAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(enterImageChanged(QVariant)));
leaveAnimation = new QPropertyAnimation(this, "");
leaveAnimation->setStartValue(0);
leaveAnimation->setEndValue(5);
leaveAnimation->setDuration(200);
connect(leaveAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(leaveImageChanged(QVariant)));
}
AnimationButton::~AnimationButton()
{
delete enterAnimation;
delete leaveAnimation;
}
void AnimationButton::enterEvent(QEvent *)
{
enter = true;
leave = false;
pixWidth = pixWidth - 25;
pixHeight = pixHeight - 25;
enterAnimation->start();
}
void AnimationButton::leaveEvent(QEvent *)
{
enter = false;
leave = true;
pixWidth = oldWidth;
pixHeight = oldHeight;
leaveAnimation->start();
}
void AnimationButton::paintEvent(QPaintEvent *)
{
if (image.isEmpty()) {
return;
}
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
QPixmap pix(image);
pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
if (enter || leave) {
int pixX = rect().center().x() - targetWidth / 2;
int pixY = rect().center().y() - targetHeight / 2 - 10;
QPoint point(pixX, pixY);
painter.drawPixmap(point, pix);
painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text);
}
}
void AnimationButton::enterImageChanged(QVariant index)
{
int i = index.toInt();
targetWidth = pixWidth + i * 5;
targetHeight = pixHeight + i * 5;
update();
}
void AnimationButton::leaveImageChanged(QVariant index)
{
int i = index.toInt();
targetWidth = pixWidth - i * 5;
targetHeight = pixWidth - i * 5;
update();
}
void AnimationButton::setImage(QString image)
{
this->image = image;
QPixmap pix(image);
pixWidth = pix.width();
pixHeight = pix.height();
oldWidth = pixWidth;
oldHeight = pixHeight;
targetWidth = pixWidth - 25;
targetHeight = pixHeight - 25;
update();
}
void AnimationButton::setText(QString text)
{
this->text = text;
update();
}

此自定义控件集成在QFramework中。
自定义控件可执行文件下载：http://pan.baidu.com/s/1i5iCfzv

QFramework简介：
QFramework是一套通用的Qt程序开发框架，集成主界面布局、各种自定义控件、数据库处理、excel极速导出、数据打印、串口通信、网络通信、协议解析、全局热键、邮件发送，短信发送，百度地图调用、ffmpeg+vlc处理等功能，将常用的功能封装成类库，提供统一直观的调用接口，方便使用者使用，对应封装的库都有对应的demo程序。

QFramework基本功能：
1：支持从4.7.0到5.7.0的任何Qt版本，不受版本限制。用了此框架，不会再有Qt版本不同而引起的程序编译通不过的烦恼。
2：极速导出数据到excel，支持表格数据或者查询的数据，不依赖任何组件，支持任何excel、wps等表格软件版本，导出10万行数据8个字段只需要3秒完成。对导出的表格样式可自定义主标题和副标题，可对导出的数据按照指定条件红色突出显示。
3：数据导出到pdf及打印功能，支持表格数据或者查询的数据，支持横向纵向打印，自动分页。
4：数据分页dbapi类，只需传入表格对象，表名，翻页按钮即可。无需再写重复的方法处理翻页。
5：各种自定义控件，例如开关按钮、发光按钮，仪表盘控件、音量控件、温湿度控件、仪表仪器类控件等。
6：全新超级中英双拼输入法，非常适合触摸设备。
7：全局热键处理。
8：串口热敏打印机打印。
9：qcustomplot 2D图形曲线绘制（含鼠标数据跟踪）。
10：多线程邮件发送，支持多个接收邮箱。
11：多线程短信发送，支持多个接收号码及长短信。
12：Qffmpeg+Qvlc视频处理。
13：取字模，字符转LED数据处理。
14：全局日志输出类 applog，可动态挂载和卸载。
15：全局程序控制类 appkey，可控制程序的使用时间、运行时间、设备数量限制等。
16：封装百度地图调用接口，支持设备标注、路线查询、位置显示等。
17：自动清理程序早期数据类 cleanapi，传入要清理的数据库表名，执行间隔，保留的最大记录数即可。这样保证了整个系统存储的都是最新的数据。
18：NTP校时服务程序。
19：全局截图处理，可以很方便的直接在ARM上对程序进行截图。
20：程序存活检测功能 applive，通过udp通信实时发送心跳命令，这样可以保证程序7*24小时运行，在ARM上可采用appdog看门狗程序。
21：已运行时间+当前时间+实时CPU使用率+实时内存使用率等。
22：自定义程序主界面底部信息。
23：Echart图表的交互使用。