Qt实现自定义控件的两种方式之插件法(MinGw)

第一步:新建项目选择其它项目，设计师自定义控件

第二步:选择MinGw编译器

第三步:点击新类，添加类名，其它不用改，点击下一步

第四步:默认，下一步

第五步:默认，点击完成

得到

第六步:在DialPlate类中添加代码

DialPlate.h

#ifndef DIALPLATE_H
#define DIALPLATE_H

#include <QWidget>
#include <QPainter>

class DialPlate : public QWidget
{
    Q_OBJECT

public:
    DialPlate(QWidget *parent = 0);
    ~DialPlate();
    void paintEvent(QPaintEvent *event);//系统自动调用
    int getBigDivided() const;
    void setBigDivided(int value);

    int getSmallDivided() const;
    void setSmallDivided(int value);

    int getScale() const;
    void setScale(int value);

    int getValue() const;
    void setValue(int value);

private:
    double centerRadius;//表盘中心圆半径
    double inRadius;//表盘内圆半径
    double midRadius;//表盘中间圆半径
    double outRadius;//表盘最外圆半径
    int bigDivided;//大刻度等分数
    int smallDivided;//小刻度等分数
    int scale;//倍率
    int scaleCount;//scale的位数
    int value;//刻度盘的值
    void SetParamsInit();
    void SetOtherBackground(QPainter *painter);
    void DrawPlate(QPainter *painter);
    void DrawRing(QPainter *painter,QColor backColor, QColor ringColor,double inRadius,double outRadius);
    void DrawScale(QPainter *painter);
    void DrawText(QPainter *painter);
    void DrawNeedle(QPainter *painter);
    void DrawArcRing(QPainter *painter);
    void DrawValue(QPainter *painter);
};

#endif

DialPlate.cpp

#include "dialplate.h"
#include "math.h"

#include <QDebug>
#include <cmath>

DialPlate::DialPlate(QWidget *parent) :
    QWidget(parent)
{
    bigDivided=10;
    smallDivided=10;
    scale=1;
    scaleCount=1;
    value=0;
}

DialPlate::~DialPlate()
{

}

void DialPlate::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);//声明一个画家对象
    painter.setRenderHint(QPainter::Antialiasing);//抗锯齿形
    //初始化参数设置
    this->SetParamsInit();
    //填充表盘周围为透明色
    this->SetOtherBackground(&painter);
    //画表盘
    this->DrawPlate(&painter);
}

int DialPlate::getValue() const
{
    return value;
}

void DialPlate::setValue(int value)
{
    this->value = value;
}

int DialPlate::getScale() const
{
    return scale;
}

void DialPlate::setScale(int value)
{
    this->scale = value;
}

int DialPlate::getSmallDivided() const
{
    return smallDivided;
}

void DialPlate::setSmallDivided(int value)
{
    this->smallDivided = value;
}

int DialPlate::getBigDivided() const
{
    return bigDivided;
}

void DialPlate::setBigDivided(int value)
{
    this->bigDivided = value;
}
//初始化参数设置
void DialPlate::SetParamsInit()
{
    centerRadius=(this->width()-290/340.0*this->width())/2;
    inRadius=(this->width()-76/340.0*this->width())/2;
    midRadius=(this->width()-38/340.0*this->width())/2;
    outRadius=(this->width()-14/340.0*this->width())/2;
}
//设置表盘周围为透明色
void DialPlate::SetOtherBackground(QPainter *painter)
{
    painter->save();
    painter->setBrush(Qt::transparent);
    painter->fillRect(this->rect(),QColor(0,0,0,0));
    painter->restore();
}
//画表盘
void DialPlate::DrawPlate(QPainter *painter)
{
    //画最外环
    DrawRing(painter,QColor(240,240,240), QColor(100,100,100),midRadius,outRadius);
    //画中间黑环
    DrawRing(painter,QColor(240,240,240), QColor(0,0,0),inRadius,midRadius);
    //画小环
    DrawRing(painter,QColor(240,240,240), QColor(100,100,100),centerRadius,inRadius);
    //画刻度
    DrawScale(painter);
    //画黄色指示条
    DrawArcRing(painter);
    //画中心点圆
    DrawRing(painter,QColor(240,240,240), QColor(233,123,90),0,centerRadius);
    //画数字
    DrawText(painter);
    //画指针
    DrawNeedle(painter);
    //画值
    DrawValue(painter);
}
//画圆环
void DialPlate::DrawRing(QPainter *painter,QColor backColor, QColor ringColor, double inRadius, double outRadius)
{
    QBrush qbrush(ringColor);
    painter->setBrush(qbrush);
    painter->drawEllipse(QPointF(this->width()/2.0,this->height()/2.0),outRadius,outRadius);
    qbrush.setColor(backColor);
    painter->setBrush(qbrush);
    painter->drawEllipse(QPointF(this->width()/2.0,this->height()/2.0),inRadius,inRadius);

}
//画刻度
void DialPlate::DrawScale(QPainter *painter)
{
    QPen qpen(Qt::white);
    double startRadius;//起点半径
    double endRadius=midRadius;//终点半径
    //绘制刻度
    for(int i=0;i<=bigDivided*smallDivided;i++)
    {
        if(i%smallDivided==0)
        {
            startRadius=inRadius;//大刻度
            qpen.setWidthF(2.5);
        }
        else
        {
            startRadius=inRadius+(midRadius-inRadius)/2;//小刻度
            qpen.setWidthF(1.5);
        }
        painter->setPen(qpen);
        //起点坐标
        double xPosStart=this->width()/2+startRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        double yPosStart=this->height()/2+startRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        //终点坐标
        double xPosEnd=this->width()/2+endRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        double yPosEnd=this->height()/2+endRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        painter->drawLine(QPointF(xPosStart,yPosStart),QPointF(xPosEnd,yPosEnd));
    }

}
//画数字
void DialPlate::DrawText(QPainter *painter)
{
    //计算scale是几位数
    int scaleCount=1;
    int tempScale=scale;
    while (tempScale/10)
    {
        scaleCount++;
        tempScale/=10;
    }
    int fontSize=30-3*scaleCount;
    QPen qpen(Qt::green);
    qpen.setWidthF(1.0);
    painter->setPen(qpen);
    QFont font=painter->font();
    font.setPixelSize(fontSize);
    painter->setFont(font);
    double textRadius=inRadius-30;
    for(int i=0;i<=bigDivided;i++)
    {
        double xPosText=this->width()/2+textRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided);
        double yPosText=this->height()/2+textRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided);
        QRectF textQRect(xPosText-25,yPosText-12,50,24);
        painter->drawText(textQRect,Qt::AlignCenter,QString::number(i*scale));
    }

}
//画指针
void DialPlate::DrawNeedle(QPainter *painter)
{
    double needleRadius=this->width()/2-90/340.0*this->width();
    double needleCenterRadius=centerRadius-16/340.0*this->width();
    //画指针的圆
    DrawRing(painter,Qt::red, Qt::red,0,needleCenterRadius+4);
    double biggestValue=bigDivided*scale;
    //超出量程则显示为最大值
    if(value>biggestValue)
    {
        value=bigDivided*scale;
    }
    //指针三角形的三个点坐标
    double xPosNeedle0=this->width()/2+needleRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2);
    double yPosNeedle0=this->height()/2+needleRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2);
    double xPosNeedle1=this->width()/2+needleCenterRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2+3.14/2);
    double yPosNeedle1=this->height()/2+needleCenterRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2+3.14/2);
    double xPosNeedle2=this->width()/2+needleCenterRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2-3.14/2);
    double yPosNeedle2=this->height()/2+needleCenterRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2-3.14/2);
    //画三角形
    QPen qpen(Qt::red);
    QBrush qbrush(Qt::red);
    painter->setPen(qpen);
    painter->setBrush(qbrush);
    QPointF points[3]={QPointF(xPosNeedle0,yPosNeedle0),QPointF(xPosNeedle1,yPosNeedle1),
                       QPointF(xPosNeedle2,yPosNeedle2)};
    painter->drawPolygon(points,3);
}
//画黄色刻度条上的环形指示带(两个扇形相减）
void DialPlate::DrawArcRing(QPainter *painter)
{
    //画黄色扇形
    if(value>bigDivided*scale)
    {
        value=bigDivided*scale;
    }
    QBrush qbrush(QColor(255,255,0,100));
    QPen qpen(QColor(255,255,0,100));
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    QRectF outRect(19/340.0*this->width(),19/340.0*this->height(),2*midRadius,2*midRadius);
    int startAngle=225*16;
    int endAngle=(int)(225+(value/(double)(bigDivided*scale))*270)*16;
    int spanAngle=startAngle-endAngle;//角度差(默认为逆时针，负数则为顺时针）
    painter->drawPie(outRect,startAngle,spanAngle);
    //画减去部分的扇形
    QRectF inRect(38/340.0*this->width(),38/340.0*this->height(),2*inRadius,2*inRadius);
    qbrush.setColor(QColor(100,100,100));
    qpen.setColor(QColor(100,100,100));
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    painter->drawPie(inRect,startAngle,spanAngle+(-16));//为了完全减去黄色内部区域，多减一个单位(16)
}
//在表盘上显示数值
void DialPlate::DrawValue(QPainter *painter)
{
    //计算scale是几位数
    int scaleCount=1;
    int tempScale=scale;
    while (tempScale/10)
    {
        scaleCount++;
        tempScale/=10;
    }
    int fontSize=30-3*scaleCount;
    QBrush qbrush(Qt::blue);
    QPen qpen(Qt::blue);
    QFont font=painter->font();
    font.setPixelSize(fontSize);
    painter->setFont(font);
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    QRectF valueRect(this->width()/2-25,this->height()/2+90/340.0*this->width(),50,30);
    painter->drawText(valueRect,Qt::AlignCenter,QString::number(value));
}

这里还要更改dialplateplugin.h中的include头文件

将头文件 <QtDesigner/QDesignerCustomWidgetInterface>
改成<QtUiPlugin/QDesignerCustomWidgetInterface>
不改的话编译的时候会报警告，说<QtDesigner/QDesignerCustomWidgetInterface>已经被弃用

在这里多说一句网上也有很多博主说“由于默认创建出来的插件类不带ui文件的，这样会导致打开Qt设计师就会直接崩溃掉。需要增加对应的ui文件并且增加部分内容”，但是这两种我都测试过，带不带ui文件我都没有崩，不知道是不是我用的mingw编译的原因

若想增添ui文件的话可以直接创建Qt设计师界面类，类名直接和原来类名一样就行，直接覆盖掉原来的类

第七步:为自定义控件选择一个图标(就是在设计师界面的小图标)

右键icons.qrc选择一个自己的图标，记得选完要保存

第八步:选择release,编译项目

第九步:右键任意文件，在explorer中打开，打开release文件夹

第十步:将这两个库文件复制到，mingw编译器下

这里我的路径是E:\Qt\Qt\5.14.2\mingw73_64\plugins\designer，每个人路径应该都不一样，取决于你的安装

第十一步:打开mingw下的qt设计师

这里我的路径在E:\Qt\Qt\5.14.2\mingw73_64\bin

第十二步:选择widget,点击创建

得到

这里可以选择对自定义控件进一步完善，然后保存成ui文件，我就不过多赘述了

第十三步:将自定义控件添加到Qt Creater中

注意，上面的步骤只是将自定义控件添加到mingw下的qt设计师中，并不在Qt Creater中

打开Qt Creater，在帮助，关于qt中可以查看我们的Qt Creater版本

这里可以看到我的qt是msvc2017,32位的，因为我是用mingw编译的插件，是肯定不可以的

（要想能在Qt Creater中使用需要使用msvc2017,32位编译插件），如果你的编译版本和qt版本一样，可以将那两个库文件放入到E:\Qt\Qt\Tools\QtCreator\bin\plugins\designer

这是我的路径，你要找你的路径

完成

这里说个题外话，我是觉得没必要非将自定义控件放到Qt Creater中，放到相应的编译器下的设计师中一样能用，再不济也可以用另一种方法，其实插件也就是动态库，我们可以像使用动态库一样使用插件，关于动态库的使用可以看我另外一篇博客

参考

Qt自定义控件DLL文件生成及使用_dialplate qt-CSDN博客

Qt自定控件编译成插件并使用_qt在线编译-CSDN博客

Qt实现自定义控件能够以插件的方式加载到Qt设计师_qt自定义控件-CSDN博客

Qt 实现自定义Ui控件例子，以自定义的Slider为例（QWidget）_自定义slider-CSDN博客