自定义Qt Designer插件

上次我的博客中写到了创建自定义的控件，但是这次我们想在把自定义的电池控件设置到qtui设计器中，该如何操作？
1 首先点击Qt Creater的File -> new file or project
出现其他项目，在其中选择：

2 接下来设置项目信息
先设置项目名称为

接下来选择编译器：
一定要选择MSVC2015 32bit！！！！！！！！！！！！
接下来如图操作：


接下来到最后保持默认属性不变。
3 在qmybattery.h中添加代码：

#ifndef QMYBATTERY_H
#define QMYBATTERY_H

#include <QWidget>
#include <Qcolor>
#include <QRect>
class QmyBattery : public QWidget
{
    Q_OBJECT
private:
    //背景颜色
    QColor mColorBack=Qt::white;
    //电池边框颜色
    QColor mColorBorder=Qt::black;
    //电池柱颜色
    QColor mColorPower=Qt::green;
    //电池短缺颜色
    QColor mColorWarning=Qt::red;
    //电量0-100
    int mPowerLevel=60;
    //电量低警示阈值
    int myWarnLevrl=20;
protected:
    //后面的宏是为了声明对一个虚函数定义的方法
    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
public:
    explicit QmyBattery(QWidget *parent = nullptr);
    //设置当前电池电量
    void setPowerLevel(int pow);
    int powerLevel();
    //设置电池电量低阈值
    void setWarnLevel(int warn);
    int warnLevel();
    //缺省大小
    QSize sizeHint();
signals:
    void powerLevelChanged();

public slots:
};

#endif // QMYBATTERY_H

在qwbattery.cpp添加代码：

#include "qmybattery.h"
#include <QPainter>
#include <QPen>
//界面的绘制
void QmyBattery::paintEvent(QPaintEvent *event)
{
    //避免编译错误
    Q_UNUSED(event);
    QPainter painter(this);
    QRect rect(0,0,width(),height());
    //设置当前图形视图窗口
    painter.setViewport(rect);
    painter.setWindow(0,0,120,50);
    //抗锯齿的效果
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
    QPen pen;
    pen.setWidth(2);
    pen.setColor(mColorBorder);
    pen.setStyle(Qt::SolidLine);
    pen.setCapStyle(Qt::FlatCap);
    pen.setJoinStyle(Qt::BevelJoin);
    painter.setPen(pen);
    QBrush brush;
    brush.setColor(mColorBack);
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);
    rect.setRect(1,1,109,48);
    painter.drawRect(rect);
    brush.setColor(mColorBorder);
    painter.setBrush(brush);
    //电池头
    rect.setRect(110,15,10,20);
    painter.drawRect(rect);
    if(mPowerLevel>myWarnLevrl){
        brush.setColor(mColorPower);
        pen.setColor(mColorPower);
    }else{
        brush.setColor(mColorWarning);
        pen.setColor(mColorWarning);
    }
    painter.setBrush(brush);
    painter.setPen(pen);
    if(mPowerLevel>0){
        rect.setRect(5,5,mPowerLevel,40);
        painter.drawRect(rect);
    }
    QFontMetrics textsize(this->font());
    QString powStr=QString::asprintf("%d%%",mPowerLevel);
    QRect textRect=textsize.boundingRect(powStr);
    painter.setFont(this->font());
    pen.setColor(mColorBorder);
    painter.setPen(pen);
    painter.drawText(55-textRect.width()/2,23+textRect.height()/2,powStr);
}
void QmyBattery::setPowerLevel(int pow)
{
    mPowerLevel=pow;
    emit powerLevelChanged();
    repaint();
}

int QmyBattery::powerLevel()
{
    return mPowerLevel;
}

void QmyBattery::setWarnLevel(int warn)
{
    myWarnLevrl=warn;

    repaint();

}

int QmyBattery::warnLevel()
{
    return myWarnLevrl;

}

QSize QmyBattery::sizeHint()
{
    int H=this->height();
    int W=H*12/5;
    QSize size(W,H);
    return size;
}
QmyBattery::QmyBattery(QWidget *parent) : QWidget(parent)
{

}

4 插件的编译和安装 使用MSVC2015 32bit编译器，将项目在release下编译

编译后生成：

把这个文件复制到这两个目录下：
J:\QT\Tools\QtCreator\bin\plugins\designer
J:\QT\5.9\msvc2015_64\plugins\designer
重启Qt Creator会发现在ui设计器的窗口中多了一个“MY”的分组，里面有一个QwBattery组件。

5 使用自定义插件

void MainWindow::on_horizontalSlider_valueChanged(int value){
   ui->widget->setPowerLevel(value);
}
void MainWindow::on_horizontalSlider_powerLevelvalueChanged(int value){
   QString str=QStringLiteral("DL: ")+QString::asprintf("%d %%",value);
   ui->label->setText(str);
}

这个项目只能用MSVC 201532bit编译器编译，因为Widget插件类Qwbattery是用MSVC 2015 32bit编译的。
6 编译运行项目：
1 在项目的源文件目录下创建一个include子目录，将QwBattery类定义的头文件qwbattery.h、插件的debug和release生成的库文件qwbatteryplugin.lib和qwbatteryplugin.lib复制到此目录下
2 在项目管理器中，选中BatteryUser项目结点右键，在快捷菜单中选中Add Libraty，出现的向导对话框中，选择库类型时，将外部库“External Library”选中
3 在向导的第二步，点击Library file编辑框后面的按钮，选择include目录下的qwbatteryplugin.lib，在平台中选择Windows，连接方式选择Dynamic，下方的Add “d” suffix for debug version选中。
完成配置后，在BatteryUser.pro中添加：

win32:CONFIG(release,debug|release):LIBS += -L$$PWD/include/ -lqwbatteryplugin else:win32:CONFIG(release,debug|release):LIBS += -L$$PWD/include/ -lqwbatteryplugind 
INCLUDEPATH+=$$PWD/include
DEPENDPATH+=$$PWD/include

7 运行如图：