qt中自定义控件（电池）

1.新建项目

image.png

2.设置输出为release模式

image.png

3.代码头文件

#pragma once

#include 
#include 

class Battery : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(int m_headWidth READ getHeadWidth WRITE setHeadWidth)
    Q_PROPERTY(int m_postion_x READ getPostionX WRITE setPostionX)
    Q_PROPERTY(int m_postion_y READ getPostionY WRITE setPostionY)
    Q_PROPERTY(int m_textSize READ getTextSize WRITE setTextSize)
public:
    Battery(QWidget* parent = Q_NULLPTR);
public:
    //设置自定义控件属性值
    void setValue(int value);
    void setHeadWidth(int width);
    int  getHeadWidth();
    void setPostionX(int x);
    int getPostionX();
    void setPostionY(int y);
    int getPostionY();
    void setTextSize(int size);
    int getTextSize();
private slots:
    void changeValue();
private:
    void init();    //初始化
    void resizeEvent(QResizeEvent* size);//重载大小变化函数
    void paintEvent(QPaintEvent*);      //重载绘图函数
    void drawBorder(QPainter* painter); //绘制边框
    void drawBg(QPainter* painter);     //绘制背景
    void drawHead(QPainter* painter);   //绘制头部
    void drawText(QPainter* painter);   //绘制文字
private:
    double m_minValue;      //最小值
    double m_maxValue;      //最大值
    double m_value;         //当前值
    double m_alarmValue;    //警戒值
    QRectF m_batteryRect;   //主体区域大小

    int m_borderRadius;     //边框圆角角度
    int m_bgRadius;         //背景进度圆角角度
    int m_headRadius;       //头部圆角角度
    int m_headWidth;        //头部宽度

    QColor m_borderColorStart;  //边框渐变开始颜色
    QColor m_borderColorEnd;    //边框渐变结束颜色
    QColor m_alarmColorStart;   //警戒渐变开始颜色
    QColor m_alarmColorEnd;     //警戒渐变结束颜色
    QColor m_normalColorStart;        //电池正常电量时的渐变开始颜色
    QColor m_normalColorEnd;          //电池正常电量时的渐变结束颜色

    int m_postion_x;    //文字位置
    int m_postion_y;
    int m_textSize;     //文字大小
    QTimer* m_timer;
};

4.设置源文件

#include "Battery.h"
#include 

Battery::Battery(QWidget *parent)
    : QWidget(parent)
{
    init();
    m_timer = new QTimer();
    connect(m_timer, SIGNAL(timeout()), this, SLOT(changeValue()));
    m_timer->start(100);
}

void Battery::init()
{
    m_minValue = 0;
    m_maxValue = 100;
    m_value = 0;
    m_alarmValue = 20;
    m_borderRadius = 8;
    m_bgRadius = 5;
    m_headRadius = 3;
    m_headWidth = 20;
    m_batteryRect = QRectF(QPointF(0, 0), QPointF(this->width() - m_headWidth, this->height()));
    m_borderColorStart = QColor(100, 100, 100);
    m_borderColorEnd = QColor(80, 80, 80);
    m_alarmColorStart = QColor(250, 118, 113);
    m_alarmColorEnd = QColor(204, 38, 38);
    m_normalColorStart = QColor(50, 205, 51);
    m_normalColorEnd = QColor(60, 179, 133);
    m_textSize = 30;
    m_postion_x = 30;
    m_postion_y = 30;
}

void Battery::resizeEvent(QResizeEvent* size)
{
    m_batteryRect = QRectF(QPointF(0, 0), QPointF(this->width() - m_headWidth, this->height()));
}

void Battery::paintEvent(QPaintEvent*)
{
    //绘制准备工作,
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);    //启用反锯齿防止线条和文字变形
    
    drawBorder(&painter);
    drawBg(&painter);
    drawHead(&painter);
    drawText(&painter);
}

void Battery::drawBorder(QPainter* painter)
{
    painter->save();    //保存状态
                        //绘制电池边框
    painter->setPen(QPen(m_borderColorStart, 5));
    painter->setBrush(Qt::NoBrush);
    painter->drawRoundedRect(m_batteryRect, m_borderRadius, m_borderRadius);
    painter->restore(); //还原状态
}

void Battery::drawBg(QPainter* painter)
{
    painter->save();

    QLinearGradient batteryGradient(QPointF(0, 0), QPointF(0, height()));
    if (m_value <= m_alarmValue) {
        batteryGradient.setColorAt(0.0, m_alarmColorStart);
        batteryGradient.setColorAt(1.0, m_alarmColorEnd);
    }
    else {
        batteryGradient.setColorAt(0.0, m_normalColorStart);
        batteryGradient.setColorAt(1.0, m_normalColorEnd);
    }
    if (m_value == 100) {
        m_value = 0;
    }

    int margin = 5;
    double unit = (m_batteryRect.width() - (margin * 2)) / 100;
    double width = m_value * unit;
    QPointF topLeft(m_batteryRect.topLeft().x() + margin, m_batteryRect.topLeft().y() + margin);
    QPointF bottomRight(width + margin + 5, m_batteryRect.bottomRight().y() - margin);
    QRectF rect(topLeft, bottomRight);

    painter->setPen(Qt::NoPen);
    painter->setBrush(batteryGradient);
    painter->drawRoundedRect(rect, m_bgRadius, m_bgRadius);

    painter->restore();
}

void Battery::drawHead(QPainter* painter)
{
    painter->save();

    QPointF headRectTopLeft(m_batteryRect.topRight().x(), m_batteryRect.height() / 3);
    QPointF headRectBottomRight(this->width(), m_batteryRect.height() * 2 / 3);
    QRectF headRect(headRectTopLeft, headRectBottomRight);

    QLinearGradient headRectGradient(headRect.topLeft(), headRect.bottomLeft());
    headRectGradient.setColorAt(0.0, m_borderColorStart);
    headRectGradient.setColorAt(1.0, m_borderColorEnd);

    painter->setPen(Qt::NoPen);
    painter->setBrush(headRectGradient);
    painter->drawRoundedRect(headRect, m_headRadius, m_headRadius);

    painter->restore();
}

void Battery::drawText(QPainter* painter)
{
    painter->save();
    QFont font;
    font.setPointSize(m_textSize);
    painter->setFont(font);
    painter->setPen(Qt::red);

    painter->drawText(m_postion_x, m_postion_y, "50%");
    painter->restore();
}

void Battery::setValue(int value)
{
    m_value = value;
}

void Battery::setHeadWidth(int width)
{
    m_headWidth = width;
    m_batteryRect = QRectF(QPointF(0, 0), QPointF(this->width() - m_headWidth, this->height()));
    update();
}

int  Battery::getHeadWidth()
{
    return m_headWidth;
}

void Battery::setPostionX(int x)
{
    m_postion_x = x;
    update();
}

int Battery::getPostionX()
{
    return m_postion_x;
}

void Battery::setPostionY(int y)
{
    m_postion_y = y;
    update();
}
int Battery::getPostionY()
{
    return m_postion_y;
}

void Battery::setTextSize(int size)
{
    m_textSize = size;
    update();
}

int Battery::getTextSize()
{
    return m_textSize;
}

void Battery::changeValue()
{
    m_value++;
    update();
}

5.编译输出lib和dll

image.png

6.将lib和dll拷贝到Qt路径下（C:\Qt\Qt5.12.0\5.12.0\msvc2017\plugins\designer）

image.png

7.打开UI文件界面显示自定义控件

image.png

8.拖动控件在UI上显示，左侧为自定义控件，右侧为自定义属性值

image.png