Qt自定义控件的实践——电池电量控件

迷南。 2024-04-08 11:29 78阅读 0赞

#### 一、介绍 ####

上一篇我们绘制了一个自定义的slider控件，现在我们再绘制一个电池控件，它可调节电池电量。

![8d17f8dd0f3449f3bb4c37d0dee962e6.png][]

#### 二、步骤 ####

新建Battery类

![8c2a5f0766724c268d224ff432c9b354.png][]

battery.h

#ifndef BATTERY_H
    #define BATTERY_H
    
    /*
     * 1. 可设置电池电量，动态切换电池电量变化。
     * 2. 可设置电池电量警戒值。
     * 3. 可设置电池电量正常颜色和报警颜色。
     * 4. 可设置边框渐变颜色。
     * 5. 可设置电量变化时每次移动的步长。
     * 6. 可设置边框圆角角度、背景进度圆角角度、头部圆角角度。
     */
    
    #include <QWidget>
    
    #ifdef quc
    class Q_DECL_EXPORT Battery : public QWidget
    #else
    class Battery : public QWidget
    #endif
    
    {
        Q_OBJECT
    
        Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
        Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
        Q_PROPERTY(double value READ getValue WRITE setValue)
        Q_PROPERTY(double alarmValue READ getAlarmValue WRITE setAlarmValue)
    
        Q_PROPERTY(double step READ getStep WRITE setStep)
        Q_PROPERTY(int borderWidth READ getBorderWidth WRITE setBorderWidth)
        Q_PROPERTY(int borderRadius READ getBorderRadius WRITE setBorderRadius)
        Q_PROPERTY(int bgRadius READ getBgRadius WRITE setBgRadius)
        Q_PROPERTY(int headRadius READ getHeadRadius WRITE setHeadRadius)
    
        Q_PROPERTY(QColor borderColorStart READ getBorderColorStart WRITE setBorderColorStart)
        Q_PROPERTY(QColor borderColorEnd READ getBorderColorEnd WRITE setBorderColorEnd)
    
        Q_PROPERTY(QColor alarmColorStart READ getAlarmColorStart WRITE setAlarmColorStart)
        Q_PROPERTY(QColor alarmColorEnd READ getAlarmColorEnd WRITE setAlarmColorEnd)
    
        Q_PROPERTY(QColor normalColorStart READ getNormalColorStart WRITE setNormalColorStart)
        Q_PROPERTY(QColor normalColorEnd READ getNormalColorEnd WRITE setNormalColorEnd)
    
    public:
        explicit Battery(QWidget *parent = 0);
        ~Battery();
    
    protected:
        void paintEvent(QPaintEvent *);
        void drawBorder(QPainter *painter);
        void drawBg(QPainter *painter);
        void drawHead(QPainter *painter);
    
    private slots:
        void updateValue();
    
    private:
        double minValue;                //最小值
        double maxValue;                //最大值
        double value;                   //目标电量
        double alarmValue;              //电池电量警戒值
    
        double step;                    //每次移动的步长
        int borderWidth;                //边框粗细
        int borderRadius;               //边框圆角角度
        int bgRadius;                   //背景进度圆角角度
        int headRadius;                 //头部圆角角度
    
        QColor borderColorStart;        //边框渐变开始颜色
        QColor borderColorEnd;          //边框渐变结束颜色
    
        QColor alarmColorStart;         //电池低电量时的渐变开始颜色
        QColor alarmColorEnd;           //电池低电量时的渐变结束颜色
    
        QColor normalColorStart;        //电池正常电量时的渐变开始颜色
        QColor normalColorEnd;          //电池正常电量时的渐变结束颜色
    
        bool isForward;                 //是否往前移
        double currentValue;            //当前电量
        QRectF batteryRect;             //电池主体区域
        QTimer *timer;                  //绘制定时器
    
    public:
        double getMinValue()            const;
        double getMaxValue()            const;
        double getValue()               const;
        double getAlarmValue()          const;
    
        double getStep()                const;
        int getBorderWidth()            const;
        int getBorderRadius()           const;
        int getBgRadius()               const;
        int getHeadRadius()             const;
    
        QColor getBorderColorStart()    const;
        QColor getBorderColorEnd()      const;
    
        QColor getAlarmColorStart()     const;
        QColor getAlarmColorEnd()       const;
    
        QColor getNormalColorStart()    const;
        QColor getNormalColorEnd()      const;
    
        QSize sizeHint()                const;
        QSize minimumSizeHint()         const;
    
    public Q_SLOTS:
        //设置范围值
        void setRange(double minValue, double maxValue);
        void setRange(int minValue, int maxValue);
    
        //设置最大最小值
        void setMinValue(double minValue);
        void setMaxValue(double maxValue);
    
        //设置电池电量值
        void setValue(double value);
        void setValue(int value);
    
        //设置电池电量警戒值
        void setAlarmValue(double alarmValue);
        void setAlarmValue(int alarmValue);
    
        //设置步长
        void setStep(double step);
        void setStep(int step);
    
        //设置边框粗细
        void setBorderWidth(int borderWidth);
        //设置边框圆角角度
        void setBorderRadius(int borderRadius);
        //设置背景圆角角度
        void setBgRadius(int bgRadius);
        //设置头部圆角角度
        void setHeadRadius(int headRadius);
    
        //设置边框渐变颜色
        void setBorderColorStart(const QColor &borderColorStart);
        void setBorderColorEnd(const QColor &borderColorEnd);
    
        //设置电池电量报警时的渐变颜色
        void setAlarmColorStart(const QColor &alarmColorStart);
        void setAlarmColorEnd(const QColor &alarmColorEnd);
    
        //设置电池电量正常时的渐变颜色
        void setNormalColorStart(const QColor &normalColorStart);
        void setNormalColorEnd(const QColor &normalColorEnd);
    
    Q_SIGNALS:
        void valueChanged(double value);
    };
    
    #endif // BATTERY_H

battery.cpp

#pragma execution_character_set("utf-8")
    
    #include "battery.h"
    #include "qpainter.h"
    #include "qtimer.h"
    #include "qdebug.h"
    
    Battery::Battery(QWidget *parent) : QWidget(parent)
    {
        minValue = 0;
        maxValue = 100;
        value = 0;
        alarmValue = 30;
        step = 0.5;
    
        borderWidth = 5;
        borderRadius = 8;
        bgRadius = 5;
        headRadius = 3;
    
        borderColorStart = QColor(100, 100, 100);
        borderColorEnd = QColor(80, 80, 80);
        alarmColorStart = QColor(250, 118, 113);
        alarmColorEnd = QColor(204, 38, 38);
        normalColorStart = QColor(50, 205, 51);
        normalColorEnd = QColor(60, 179, 133);
    
        isForward = false;
        currentValue = 0;
    
        timer = new QTimer(this);
        timer->setInterval(10);
        connect(timer, SIGNAL(timeout()), this, SLOT(updateValue()));
    }
    
    Battery::~Battery()
    {
        if (timer->isActive()) {
            timer->stop();
        }
    }
    
    void Battery::paintEvent(QPaintEvent *)
    {
        //绘制准备工作,启用反锯齿
        QPainter painter(this);
        painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    
        //绘制边框
        drawBorder(&painter);
        //绘制背景
        drawBg(&painter);
        //绘制头部
        drawHead(&painter);
    }
    
    void Battery::drawBorder(QPainter *painter)
    {
        painter->save();
    
        double headWidth = width() / 15;
        double batteryWidth = width() - headWidth;
    
        //绘制电池边框
        QPointF topLeft(borderWidth, borderWidth);
        QPointF bottomRight(batteryWidth, height() - borderWidth);
        batteryRect = QRectF(topLeft, bottomRight);
    
        painter->setPen(QPen(borderColorStart, borderWidth));
        painter->setBrush(Qt::NoBrush);
        painter->drawRoundedRect(batteryRect, borderRadius, borderRadius);
    
        painter->restore();
    }
    
    void Battery::drawBg(QPainter *painter)
    {
        if (value == minValue) {
            return;
        }
    
        painter->save();
    
        QLinearGradient batteryGradient(QPointF(0, 0), QPointF(0, height()));
        if (currentValue <= alarmValue) {
            batteryGradient.setColorAt(0.0, alarmColorStart);
            batteryGradient.setColorAt(1.0, alarmColorEnd);
        }
        else {
            batteryGradient.setColorAt(0.0, normalColorStart);
            batteryGradient.setColorAt(1.0, normalColorEnd);
        }
    
        int margin = qMin(width(), height()) / 20;
        double unit = (batteryRect.width() - (margin * 2)) / 100;
        double width = currentValue * unit;
        QPointF topLeft(batteryRect.topLeft().x() + margin, batteryRect.topLeft().y() + margin);
        QPointF bottomRight(width + margin + borderWidth, batteryRect.bottomRight().y() - margin);
        QRectF rect(topLeft, bottomRight);
    
        painter->setPen(Qt::NoPen);
        painter->setBrush(batteryGradient);
        painter->drawRoundedRect(rect, bgRadius, bgRadius);
    
        painter->restore();
    }
    
    void Battery::drawHead(QPainter *painter)
    {
        painter->save();
    
        QPointF headRectTopLeft(batteryRect.topRight().x(), height() / 3);
        QPointF headRectBottomRight(width(), height() - height() / 3);
        QRectF headRect(headRectTopLeft, headRectBottomRight);
    
        QLinearGradient headRectGradient(headRect.topLeft(), headRect.bottomLeft());
        headRectGradient.setColorAt(0.0, borderColorStart);
        headRectGradient.setColorAt(1.0, borderColorEnd);
    
        painter->setPen(Qt::NoPen);
        painter->setBrush(headRectGradient);
        painter->drawRoundedRect(headRect, headRadius, headRadius);
    
        painter->restore();
    }
    
    void Battery::updateValue()
    {
        if (isForward) {
            currentValue -= step;
            if (currentValue <= value) {
                currentValue = value;
                timer->stop();
            }
        }
        else {
            currentValue += step;
            if (currentValue >= value) {
                currentValue = value;
                timer->stop();
            }
        }
    
        this->update();
    }
    
    double Battery::getMinValue() const
    {
        return this->minValue;
    }
    
    double Battery::getMaxValue() const
    {
        return this->maxValue;
    }
    
    double Battery::getValue() const
    {
        return this->value;
    }
    
    double Battery::getAlarmValue() const
    {
        return this->alarmValue;
    }
    
    double Battery::getStep() const
    {
        return this->step;
    }
    
    int Battery::getBorderWidth() const
    {
        return this->borderWidth;
    }
    
    int Battery::getBorderRadius() const
    {
        return this->borderRadius;
    }
    
    int Battery::getBgRadius() const
    {
        return this->bgRadius;
    }
    
    int Battery::getHeadRadius() const
    {
        return this->headRadius;
    }
    
    QColor Battery::getBorderColorStart() const
    {
        return this->borderColorStart;
    }
    
    QColor Battery::getBorderColorEnd() const
    {
        return this->borderColorEnd;
    }
    
    QColor Battery::getAlarmColorStart() const
    {
        return this->alarmColorStart;
    }
    
    QColor Battery::getAlarmColorEnd() const
    {
        return this->alarmColorEnd;
    }
    
    QColor Battery::getNormalColorStart() const
    {
        return this->normalColorStart;
    }
    
    QColor Battery::getNormalColorEnd() const
    {
        return this->normalColorEnd;
    }
    
    QSize Battery::sizeHint() const
    {
        return QSize(150, 80);
    }
    
    QSize Battery::minimumSizeHint() const
    {
        return QSize(30, 10);
    }
    
    void Battery::setRange(double minValue, double maxValue)
    {
        //如果最小值大于或者等于最大值则不设置
        if (minValue >= maxValue) {
            return;
        }
    
        this->minValue = minValue;
        this->maxValue = maxValue;
    
        //如果目标值不在范围值内,则重新设置目标值
        //值小于最小值则取最小值,大于最大值则取最大值
        if (value < minValue) {
            setValue(minValue);
        }
        else if (value > maxValue) {
            setValue(maxValue);
        }
    
        this->update();
    }
    
    void Battery::setRange(int minValue, int maxValue)
    {
        setRange((double)minValue, (double)maxValue);
    }
    
    void Battery::setMinValue(double minValue)
    {
        setRange(minValue, maxValue);
    }
    
    void Battery::setMaxValue(double maxValue)
    {
        setRange(minValue, maxValue);
    }
    
    void Battery::setValue(double value)
    {
        //值和当前值一致则无需处理
        if (value == this->value) {
            return;
        }
    
        //值小于最小值则取最小值,大于最大值则取最大值
        if (value < minValue) {
            value = minValue;
        }
        else if (value > maxValue) {
            value = maxValue;
        }
    
        if (value > currentValue) {
            isForward = false;
        }
        else if (value < currentValue) {
            isForward = true;
        }
        else {
            this->value = value;
            this->update();
            return;
        }
    
        this->value = value;
        this->update();
        emit valueChanged(value);
        timer->stop();
        timer->start();
    }
    
    void Battery::setValue(int value)
    {
        setValue((double)value);
    }
    
    void Battery::setAlarmValue(double alarmValue)
    {
        if (this->alarmValue != alarmValue) {
            this->alarmValue = alarmValue;
            this->update();
        }
    }
    
    void Battery::setAlarmValue(int alarmValue)
    {
        setAlarmValue((double)alarmValue);
    }
    
    void Battery::setStep(double step)
    {
        if (this->step != step) {
            this->step = step;
            this->update();
        }
    }
    
    void Battery::setStep(int step)
    {
        setStep((double)step);
    }
    
    void Battery::setBorderWidth(int borderWidth)
    {
        if (this->borderWidth != borderWidth) {
            this->borderWidth = borderWidth;
            this->update();
        }
    }
    
    void Battery::setBorderRadius(int borderRadius)
    {
        if (this->borderRadius != borderRadius) {
            this->borderRadius = borderRadius;
            this->update();
        }
    }
    
    void Battery::setBgRadius(int bgRadius)
    {
        if (this->bgRadius != bgRadius) {
            this->bgRadius = bgRadius;
            this->update();
        }
    }
    
    void Battery::setHeadRadius(int headRadius)
    {
        if (this->headRadius != headRadius) {
            this->headRadius = headRadius;
            this->update();
        }
    }
    
    void Battery::setBorderColorStart(const QColor &borderColorStart)
    {
        if (this->borderColorStart != borderColorStart) {
            this->borderColorStart = borderColorStart;
            this->update();
        }
    }
    
    void Battery::setBorderColorEnd(const QColor &borderColorEnd)
    {
        if (this->borderColorEnd != borderColorEnd) {
            this->borderColorEnd = borderColorEnd;
            this->update();
        }
    }
    
    void Battery::setAlarmColorStart(const QColor &alarmColorStart)
    {
        if (this->alarmColorStart != alarmColorStart) {
            this->alarmColorStart = alarmColorStart;
            this->update();
        }
    }
    
    void Battery::setAlarmColorEnd(const QColor &alarmColorEnd)
    {
        if (this->alarmColorEnd != alarmColorEnd) {
            this->alarmColorEnd = alarmColorEnd;
            this->update();
        }
    }
    
    void Battery::setNormalColorStart(const QColor &normalColorStart)
    {
        if (this->normalColorStart != normalColorStart) {
            this->normalColorStart = normalColorStart;
            this->update();
        }
    }
    
    void Battery::setNormalColorEnd(const QColor &normalColorEnd)
    {
        if (this->normalColorEnd != normalColorEnd) {
            this->normalColorEnd = normalColorEnd;
            this->update();
        }
    }

新建一个frmBattery类

![358be47ff05e45a5932e1057bf5d35d1.png][]

![559d88dc5b994855b9d2f8839e617ff2.png][]

在frmBattery.ui文件中分别放置battery,slider控件

![2566df8760074e72a37d966ea95f1b50.png][]

frmBattery.h

#ifndef FRMBATTERY_H
    #define FRMBATTERY_H
    
    #include <QWidget>
    
    namespace Ui {
    class frmBattery;
    }
    
    class frmBattery : public QWidget
    {
        Q_OBJECT
    
    public:
        explicit frmBattery(QWidget *parent = 0);
        ~frmBattery();
    
    private:
        Ui::frmBattery *ui;
    
    private slots:
        void initForm();
    };
    
    #endif // FRMBATTERY_H

frmBattery.cpp

#pragma execution_character_set("utf-8")
    
    #include "frmbattery.h"
    #include "ui_frmbattery.h"
    
    frmBattery::frmBattery(QWidget *parent) : QWidget(parent), ui(new Ui::frmBattery)
    {
        ui->setupUi(this);
        this->initForm();
    }
    
    frmBattery::~frmBattery()
    {
        delete ui;
    }
    
    void frmBattery::initForm()
    {
        connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->battery, SLOT(setValue(int)));
        ui->horizontalSlider->setValue(30);
    }

main.cpp

#pragma execution_character_set("utf-8")
    
    #include "frmbattery.h"
    #include <QApplication>
    #include <QTextCodec>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        QFont font;
        font.setFamily("Microsoft Yahei");
        font.setPixelSize(13);
        a.setFont(font);
    
    #if (QT_VERSION < QT_VERSION_CHECK(5,0,0))
    #if _MSC_VER
        QTextCodec *codec = QTextCodec::codecForName("gbk");
    #else
        QTextCodec *codec = QTextCodec::codecForName("utf-8");
    #endif
        QTextCodec::setCodecForLocale(codec);
        QTextCodec::setCodecForCStrings(codec);
        QTextCodec::setCodecForTr(codec);
    #else
        QTextCodec *codec = QTextCodec::codecForName("utf-8");
        QTextCodec::setCodecForLocale(codec);
    #endif
    
        frmBattery w;
        w.setWindowTitle("电池电量控件");
        w.show();
    
        return a.exec();
    }

参考：

[Qt编写自定义控件43-自绘电池 - 飞扬青云 - 博客园][Qt_43-_ - _ -]

[8d17f8dd0f3449f3bb4c37d0dee962e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ec98596e23b242a38810b651cd8d460c.png
[8c2a5f0766724c268d224ff432c9b354.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/29dfc111bff544bfb8650198c7431a64.png
[358be47ff05e45a5932e1057bf5d35d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/771200c7d0864a609716ed8d3c887ddf.png
[559d88dc5b994855b9d2f8839e617ff2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/09ad2e8c97734c6f9653c451fcd1f330.png
[2566df8760074e72a37d966ea95f1b50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ec7eda3326924fc5b8574a049ddb4951.png
[Qt_43-_ - _ -]: https://www.cnblogs.com/feiyangqingyun/p/11306911.html