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

血不热了

于 2024-08-08 09:49:55 发布

阅读量460

点赞数 5

文章标签： qt 开发语言

本文链接：https://blog.csdn.net/m0_71489826/article/details/141001793

版权

一：提升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_OBJECT

public:
    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控件

右键选择提升到