Qt实现自定义控件的两种方式之提升法

一：提升Qt设计师界面类

第一步：添加新文件选择Qt设计师界面类

第二步：选择界面模板

看自己需求，一般不需要怎么更改

第三步：为设计师界面类起一个类名

类名不能全是小写，要不然后面会出错

此时可以添加一些图片资源到项目中，即添加Qt资源文件（图片名字起反了，不改了）

第四步:在设计师界面类ImageSwitch添加一个label

设置label大小，删除label的内容，并更改控件名

第五步:右键label，添加样式表，添加图片资源

点击<resouce root>,选择openSwitch.png（图片名字起反了，不改了）,点击ok

操作完可得到

第六步:重写ImageSwitch类的mousePressEvent事件，实现鼠标点击显示动态开关的效果

ImageSwitch.h

#ifndef IMAGESWITCH_H
#define IMAGESWITCH_H#include <QWidget>
#include <QMouseEvent>
namespace Ui {
class ImageSwitch;
}class ImageSwitch : public QWidget
{Q_OBJECTpublic:explicit ImageSwitch(QWidget *parent = nullptr);~ImageSwitch();void mousePressEvent(QMouseEvent* event) override;private:Ui::ImageSwitch *ui;bool m_switchIsOpen;
};#endif // IMAGESWITCH_H

ImageSwitch.cpp

#include "imageswitch.h"
#include "ui_imageswitch.h"ImageSwitch::ImageSwitch(QWidget *parent) :QWidget(parent),ui(new Ui::ImageSwitch)
{ui->setupUi(this);//初始按钮没有被选中m_switchIsOpen = false;
}ImageSwitch::~ImageSwitch()
{delete ui;
}void ImageSwitch::mousePressEvent(QMouseEvent *event)
{if(m_switchIsOpen){m_switchIsOpen = !m_switchIsOpen;ui->lbSwitch->setStyleSheet("image: url(:/openSwitch.png);");}else{m_switchIsOpen = !m_switchIsOpen;ui->lbSwitch->setStyleSheet("image: url(:/closeSwitch.png);");}}

第七步:在项目的ui界面中添加widget控件

右键选择提升到

填写类名时，注意大小写是有区别的，点击添加

选择添加的提升类，点击提升

第八步:编译项目，然后运行

二：提升C++类(没有界面)

这种就是纯在.h和.cpp文件中来创建控件，一般就是重写paintEvent,在paintEvent中使用QPainter和图片资源来进行控件的创建

第一步:新建C++类

名字啥的还是一样不能全小写，继承啥的看自己需求，这里我选的widget

第二步:编写控件代码

Loading.h

#ifndef LOADING_H
#define LOADING_H#include <QWidget>
#include <QPainter>
#include <QTimer>
#include <QMap>struct Location
{
public:explicit Location(float _x,float _y){x=_x;y=_y;}float x;float y;
};class Loading : public QWidget
{Q_OBJECT
public:explicit Loading(QWidget *parent = nullptr);//设置圆点个数void setDotCount(int);//设置点颜色void setDotColor(const QColor&);//开始void start();//设置圆点最大直径void setMaxDiameter(float);//设置圆点最小直径void setMinDiameter(float);//计算void caculate();
protected:void paintEvent(QPaintEvent *event);void resizeEvent(QResizeEvent *event);
signals:private slots:void refresh();private://刷新计数int _index;//点的颜色QColor _dotColor;//点的个数int _count;//圆点最小直径float _minDiameter;//圆点最大直径float _maxDiameter;//绘制圆点void paintDot(QPainter &);//计数int _i;//时间间隔 单位：毫秒(ms)int _interval;//定时器QTimer* timer;//绘制区域边长float _squareWidth;//圆的直径float _centerDistance;//直径列表QList<float> radiiList;//圆点坐标列表QList<Location> locationList;};#endif // LOADING_H

Loading.cpp

#include "Loading.h"
#include <QDebug>
#include <qmath.h>
Loading::Loading(QWidget *parent) : QWidget(parent),_i(0),_interval(50),_index(0)
{//设置背景透明//this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);//this->setAttribute(Qt::WA_TranslucentBackground, true);setDotColor(QColor(49, 177, 190));setDotCount(20);timer = new QTimer(this);connect(timer,&QTimer::timeout,this,&Loading::refresh);setMaxDiameter(30);setMinDiameter(5);
}//********************************************** 设置部分 *************************************
//设置点的个数
void Loading::setDotCount(int count)
{_count=count;
}//设置点的颜色
void Loading::setDotColor(const QColor & color)
{_dotColor=color;
}//开始动画
void Loading::start()
{timer->setInterval(_interval);timer->start();
}//设置最大直径
void Loading::setMaxDiameter(float max)
{_maxDiameter=max;
}//设置最小直径
void Loading::setMinDiameter(float min)
{_minDiameter=min;
}
//********************************************** 绘制部分 *************************************
//刷新界面
void Loading::refresh()
{repaint();
}void Loading::resizeEvent(QResizeEvent *event)
{Q_UNUSED(event)caculate();
}void Loading::paintEvent(QPaintEvent *event)
{Q_UNUSED(event)QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(_dotColor);painter.setBrush(_dotColor);//绘制点paintDot(painter);
}//计算绘制正方形区域
void Loading::caculate()
{_squareWidth=qMin(this->width(),this->height());float half=_squareWidth/2;_centerDistance=half-_maxDiameter/2-1;float gap=(_maxDiameter-_minDiameter)/(_count-1)/2;float angleGap=(float)360/_count;locationList.clear();radiiList.clear();for(int i=0;i<_count;i++){radiiList<<_maxDiameter/2-i*gap;float radian=qDegreesToRadians(-angleGap*i);locationList.append(Location(half+_centerDistance*qCos(radian),half-_centerDistance*qSin(radian)));}
}//绘制圆点
void Loading::paintDot(QPainter& painter)
{for(int i=0;i<_count;i++){painter.setPen(_dotColor);//半径float radii=radiiList.at((_index+_count-i)%_count);//绘制圆点painter.drawEllipse(QPointF(locationList.at(i).x,locationList.at(i).y),radii,radii);//绘制正方形//painter.drawRect(locationList.at(i).x,locationList.at(i).y,radii,radii);}_index++;
}

第三步:在项目的ui界面中添加widget控件

右键选择提升到