Qt自定义组件的流程

以我之前写的电池为例，把电池当作一个自定义的组件，这样我们可以直接在Designer里拖出来

最终效果像这样

首先先新建工程，选到这里。这个例子里用的都是MSVC2019的套件，不是Mingw

起个名字，这里起的名字和我电池的文件名一样，这样比较方便

这里可以根据自己的需求写说明

最后会得到这样的工程

这两个文件替换成之前写好的文件内容

需要在头文件添加这两个，表明我们想把这个控件写到 库里去

然后直接在release模式下编译

这样会生成一个release文件，在里面找到dll和lib文件

在Qt的目录下把dll文件拷过去，具体目录看图

这样重新加载Qt，在Designer界面就可以看到我们的组件了

但是这还不够，只是能看到组件，但是不能使用。

我们新建一个正常的Qt项目，然后再pro同目录下新建一个文件夹，我取名叫lib

然后我们把lib文件，dll文件和头文件都放到文件夹里

之后选择添加库，注意是在使用的项目里点添加，不是最开始的控件的项目

选择外部库

选择lib文件

注意包含路径看一下对不对，也要是lib文件夹的路径，我之前这里就错了

Linux和Mac取消就行

这样就完成了，可以直接在ui里面拖拽我们的电池

使用release模式运行即可

这里只给出最开始控件项目的TBattery.h和TBattery.cpp代码，可以注意一下接口，方便在使用的工程里测试

.h

#ifndef TBATTERY_H
#define TBATTERY_H

#include <QWidget>
#include<QtUiPlugin/QDesignerExportWidget>
class QDESIGNER_WIDGET_EXPORT TBattery : public QWidget
{
    Q_OBJECT
public:
    explicit TBattery(QWidget *parent = nullptr);

    int powerLevel() const;
    void setPowerLevel(int newPowerLevel);
    int warnLevel() const;
    void setWarnLevel(int newWarnLevel);

signals:


    // QWidget interface
protected:
    virtual void paintEvent(QPaintEvent *event) override;
private:
    QColor colorBackground=Qt::white;
    QColor colorBorder=Qt::black;
    QColor colorPower=Qt::green;
    QColor colorWarning=Qt::red;
    int m_powerLevel=60;//当前电量
    int m_warnLevel=20;
};


#endif // TBATTERY_H

.cpp

#include "tbattery.h"
#include<QPainter>
#include<QPaintEvent>
TBattery::TBattery(QWidget *parent)
    : QWidget{parent}
{

}
void TBattery::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QRect rect(0,0,width(),height());
    painter.setViewport(rect);//视口 绝对坐标
    painter.setWindow(0,0,120,50);//窗口 逻辑坐标 不过这次左上角是0，0
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);

    //绘制电池
    QPen pen(colorBorder);//边框颜色
    pen.setWidth(2);
    pen.setStyle(Qt::SolidLine);
    pen.setCapStyle(Qt::FlatCap);
    pen.setJoinStyle(Qt::BevelJoin);
    painter.setPen(pen);
    QBrush brush(colorBackground);
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);
    rect.setRect(1,1,109,48);
    painter.drawRect(rect);//边框

    brush.setColor(colorBorder);
    painter.setBrush(brush);
    rect.setRect(110,15,10,20);
    painter.drawRect(rect);//绘制正极

    if(m_powerLevel>m_warnLevel){
        brush.setColor(colorPower);
        pen.setColor(colorPower);
    }
    else{
        brush.setColor(colorWarning);
        pen.setColor(colorWarning);
    }
    painter.setPen(pen);
    painter.setBrush(brush);
    if(m_powerLevel>0){
        rect.setRect(5,5,m_powerLevel,40);
        painter.drawRect(rect);//画电量
    }

    QString powStr=QString::asprintf("%d%%",m_powerLevel);
    QFontMetrics textSize(this->font());
    QRect textRect=textSize.boundingRect(powStr);//会根据字体算出字的矩形大小
    pen.setColor(colorBorder);
    painter.setPen(pen);
    painter.drawText(55-textRect.width()/2,25+textRect.height()/2,powStr);//在中间写字

    event->accept();

}

int TBattery::powerLevel() const
{
    return m_powerLevel;
}

void TBattery::setPowerLevel(int newPowerLevel)
{
    m_powerLevel = newPowerLevel;
}

int TBattery::warnLevel() const
{
    return m_warnLevel;
}

void TBattery::setWarnLevel(int newWarnLevel)
{
    m_warnLevel = newWarnLevel;
}

其实和使用Qt画一个电池的代码基本没区别，就加了两个宏，然后按步骤就行