Qt自定义控件之Battery电池控件

---

前言

在Qt应用程序开发中，自定义控件是一种常见的需求，开发者经常需要根据特定的需求创建定制化的控件来增强用户界面的交互性和美观性。Battery电池控件是一种常见的自定义控件，用于显示设备的电池状态。通过Battery控件，用户可以直观地了解设备电量情况，提高用户体验和操作便利性。

---

一、BasicBattery

为什么需要BasicBattery？
我们是C++面向对象，所以我们可以写一个基类给Battery，如果我们以后想要其他样式的电池，我们直接继承，去写电池的样式即可，不用去写设置电池电量这些内容，节约时间：

BasicBattery.h代码：

#ifndef BASICBATTERY_H
#define BASICBATTERY_H

#include <QWidget>
#include <QColor>

class BasicBattery : public QWidget
{
    Q_OBJECT
public:
    // 枚举类型定义了电池状态
    enum BatteryStatus
    {
        Discharging, // 放电状态
        Charging,    // 充电状态
        Full         // 充满状态
    };

    // 构造函数，创建一个基础电池对象
    explicit BasicBattery(QWidget *parent = nullptr);

    // 设置电量百分比
    void setLevel(int level);
    // 获取电量百分比
    int level() const;

    // 设置电池状态
    void setStatus(BatteryStatus status);
    // 获取电池状态
    BatteryStatus status() const;

    // 设置电池边框颜色
    void setBorderColor(const QColor &color);
    // 获取电池边框颜色
    QColor borderColor() const;

    // 设置电池内部填充颜色
    void setPaddingColor(const QColor &color);
    // 获取电池内部填充颜色
    QColor paddingColor() const;

    // 设置充电指示器颜色
    void setChargeColor(const QColor &color);
    // 获取充电指示器颜色
    QColor chargeColor() const;

    // 设置低电量警告颜色
    void setLowBatteryColor(const QColor &color);
    // 获取低电量警告颜色
    QColor lowBatteryColor() const;

    // 设置绘制偏移量
    void setOffset(const QPoint &offset);
    // 获取绘制偏移量
    QPoint offset() const;

    // 设置电池外形是否为圆角
    void setRound(bool round);

    // 获取电池外形是否为圆角
    bool isRound() const;

    // 设置圆角占电池高度的百分比
    void setRoundPresent(int roundPresent);

    // 获取圆角占电池高度的百分比
    int roundPresent() const;

signals:

private:
    // 获取控件尺寸
    void getSize();

protected:
    virtual void paintEvent(QPaintEvent *event);
    virtual void resizeEvent(QResizeEvent *event);

    // 成员变量，保存电池的宽度、高度、电量百分比、状态以及颜色等信息
    int m_width;          // 电池宽度
    int m_height;         // 电池高度
    int m_level = 5;          // 电量百分比
    bool m_round = true; // 标志变量，表示电池外形是否为圆角
    int m_roundPresent = 5; // 圆角占电池高度的百分比，用于控制圆角的大小
    BatteryStatus m_status = Discharging;  // 电池状态
    QColor m_border = Qt::white;       // 电池边框颜色
    QColor m_padding = Qt::white;      // 电池内部填充颜色
    QColor m_charge = Qt::green;       // 充电指示器颜色
    QColor m_nobattery = Qt::red;    // 低电量警告颜色
    QPoint m_offset = QPoint(2,2);       // 绘制偏移量，用于绘制电量指示器位置
};

#endif // BASICBATTERY_H

BasicBattery.cpp代码：

#include "BasicBattery.h"

BasicBattery::BasicBattery(QWidget *parent)
    : QWidget{parent}
{
    getSize();
}

void BasicBattery::getSize()
{
    this->m_width = width();
    this->m_height = height();
}

void BasicBattery::paintEvent(QPaintEvent *event)
{

}

void BasicBattery::resizeEvent(QResizeEvent *event)
{
    getSize();
    update();
}

// 设置电量百分比
void BasicBattery::setLevel(int level) {
    m_level = level;
    this->update();
}

// 获取电量百分比
int BasicBattery::level() const {
    return m_level;
}

// 设置电池状态
void BasicBattery::setStatus(BatteryStatus status) {
    m_status = status;
    this->update();
}

// 获取电池状态
BasicBattery::BatteryStatus BasicBattery::status() const {
    return m_status;
}

// 设置电池边框颜色
void BasicBattery::setBorderColor(const QColor &color) {
    m_border = color;
    this->update();
}

// 获取电池边框颜色
QColor BasicBattery::borderColor() const {
    return m_border;
}

// 设置电池内部填充颜色
void BasicBattery::setPaddingColor(const QColor &color) {
    m_padding = color;
    this->update();
}

// 获取电池内部填充颜色
QColor BasicBattery::paddingColor() const {
    return m_padding;
}

// 设置充电指示器颜色
void BasicBattery::setChargeColor(const QColor &color) {
    m_charge = color;
    this->update();
}

// 获取充电指示器颜色
QColor BasicBattery::chargeColor() const {
    return m_charge;
}

// 设置低电量警告颜色
void BasicBattery::setLowBatteryColor(const QColor &color) {
    m_nobattery = color;
    this->update();
}

// 获取低电量警告颜色
QColor BasicBattery::lowBatteryColor() const {
    return m_nobattery;
}

// 设置绘制偏移量
void BasicBattery::setOffset(const QPoint &offset) {
    m_offset = offset;
    this->update();
}

// 获取绘制偏移量
QPoint BasicBattery::offset() const {
    return m_offset;
}

void BasicBattery::setRound(bool round)
{
    m_round = round;
    this->update();
}

bool BasicBattery::isRound() const
{
    return m_round;
}

void BasicBattery::setRoundPresent(int roundPresent)
{
    m_roundPresent = roundPresent;
    this->update();
}

int BasicBattery::roundPresent() const
{
    return m_roundPresent;
}

二、Battery控件

我们直接继承BasicBattery类，去实现paintEvent画出他的样子即可实现最终效果：
Battery.h代码:

#ifndef BATTERY_H
#define BATTERY_H

#include "BasicBattery.h"
#include <QWidget>
#include <QPainter>

class Battery : public BasicBattery
{
    Q_OBJECT
public:
    explicit Battery(QWidget *parent = nullptr);

signals:

protected:
    void paintEvent(QPaintEvent *event);

private:
    // 绘制电池边框
    void drawBorder(QPainter *painter);
    // 绘制电池填充
    void drawFill(QPainter *painter);
};

#endif // BATTERY_H

Battery.cpp核心代码：

void Battery::drawBorder(QPainter *painter)
{
    // 保存当前画笔状态
    painter->save();

    // 设置画笔颜色和样式
    painter->setPen(this->m_border);

    // 绘制电池外壳，采用圆角矩形
    painter->drawRoundedRect(0, 0, m_width * 0.93, this->m_height, this->m_roundPresent, this->m_roundPresent);

    // 计算并绘制电池右侧的正极
    int poleWidth = 5; // 正极宽度
    int poleHeight = m_height * 0.3; // 正极高度
    int poleX = m_width * 0.93 + m_offset.x(); // 正极横坐标，位于电池右侧边框处并考虑间隔
    int poleY = (m_height - poleHeight) / 2; // 正极纵坐标，使其垂直居中

    // 设置正极颜色与边框颜色一致，并绘制正极
    painter->setBrush(this->m_border);
    painter->drawRect(poleX, poleY, poleWidth, poleHeight);

    // 恢复之前保存的画笔状态
    painter->restore();
}

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

    // 计算电池内部填充区域的宽度
    qreal fillWidth = (m_width * 0.93 - 2 * m_offset.x()) * m_level / 100;
    // 计算电池内部填充区域的高度
    qreal fillHeight = m_height - 2 * m_offset.y();

    qDebug() << fillWidth;

    // 计算电池内部填充区域的起始点
    qreal fillX = m_offset.x();
    qreal fillY = m_offset.y();

    // 根据电池状态设置填充颜色
    QColor fillColor = m_padding;
    if (m_status == Charging) {
        fillColor = m_charge;
    } else if (m_level <= 20) {
        fillColor = m_nobattery;
    }

    // 设置填充颜色
    painter->setBrush(fillColor);

    // 绘制填充区域
    painter->drawRoundedRect(QRectF(fillX, fillY, fillWidth, fillHeight), this->m_roundPresent, this->m_roundPresent);

    painter->restore();
}

三、效果

---

总结

Battery电池控件作为Qt自定义控件的一种，为开发者提供了一种简单而有效的方法来集成电池状态显示功能到他们的应用程序中。通过Battery控件，开发者可以轻松地展示设备的电量信息，为用户提供更好的使用体验。定制化的Battery控件不仅可以满足用户对电池状态的实时监控需求，还能够使应用程序更具吸引力和个性化，为用户带来更加愉悦的用户体验。