Qt自定义控件-自定义电池

Qt自定义控件-自定义电池

概述

通过重载方法，实现电池外观绘制，其中的动画效果通过定义变量实现，动画效果也可以尝试定时器实现，电池的大小根据窗口大小动态调整，支持电池颜色、动画时长等自定义，电池颜色是通过阶梯变化；具体实现如下，仁者见仁，智者见智，欢迎各位同仁不吝赐教。

源码

头文件

#ifndef QBATTERY_H
#define QBATTERY_H#include 
#include /*** 电池电量控件 作者:xujidong* 2022-9-5s*  1. 可以设置电池电池尺寸，并且电池尺寸可以跟随控件大小比例切换*  2. 可以设置电池电量，电池电量以动画的形式变化。*  3. 可以设置电量变化动画时间。*  2. 可设置电池电量警戒值。*  3. 可设置电池电量正常颜色和报警颜色。*  4. 可设置边框颜色。* 问题：*  1. 当直接调用设置电量属性接口，不能实现动画效果*  2. 还没有显示充电状态*/class QBattery : public QWidget
{Q_OBJECTQ_PROPERTY(double minValue READ minValue WRITE setMinValue)Q_PROPERTY(double maxValue READ maxValue WRITE setMaxValue)Q_PROPERTY(double value READ value WRITE setValue NOTIFY valueChanged)Q_PROPERTY(double warningValue READ warningValue WRITE setWarningValue)Q_PROPERTY(QColor warningColorStart READ warningColorStart WRITE setWarningColorStart)Q_PROPERTY(QColor warningColorEnd READ warningColorEnd WRITE setWarningColorEnd)Q_PROPERTY(QColor normalColorStart READ normalColorStart WRITE setNormalColorStart)Q_PROPERTY(QColor normalColorEnd READ normalColorEnd WRITE setNormalColorEnd)Q_PROPERTY(int animatonMsecs READ animationMsecs WRITE setAnimationMsecs);//    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 borderColor READ borderColor WRITE setBorderColor)
//    Q_PROPERTY(QColor borderColorEnd READ getBorderColorEnd WRITE setBorderColorEnd)public:explicit QBattery(QWidget *parent = 0);~QBattery();protected:void paintEvent(QPaintEvent *);
//    void drawBorder(QPainter *painter);
//    void drawBg(QPainter *painter);
//    void drawHead(QPainter *painter);//private slots:
//    void updateValue();private:QPropertyAnimation* barreryValueAnimation;double mMinValue = 0;                //电池电量最小值double mMaxValue = 100;                //电池电量最大值double mWarningValue;              //电池电量警戒值int mBorderWidth = 0;                //边框粗细int mBorderRadius;               //边框圆角角度
//    int bgRadius;                   //背景进度圆角角度
//    int headRadius;                 //头部圆角角度int mBatteryWidth = 0;                 //电池宽度int mBatteryHeight = 0;                //电池高度int mBatteryHeadWidth = 0;             //电池柱头宽度int mBatteryHeadHeight = 0;             //电池柱头宽度int mElectricBorder;                //电量填充边界int mAnimationMsecs;             //电池电量动画运行时间 单位毫秒QColor mBorderColor;        //边框渐变颜色QColor mWarningColorStart;         //电池低电量时的渐变开始颜色QColor mWarningColorEnd;           //电池低电量时的渐变结束颜色QColor mNormalColorStart;        //电池正常电量时的渐变开始颜色QColor mNormalColorEnd;          //电池正常电量时的渐变结束颜色double mCurrentValue;            //当前电量
//    QRectF batteryRect;             //电池主体区域
//    QTimer *timer;                  //绘制定时器void setValue(const double);  //设置电池电量public:double minValue()            const;void setMinValue(double minValue);double maxValue()            const;void setMaxValue(double maxValue);double value()               const;double warningValue()          const;//    double getStep()                const;
//    int getBorderWidth()            const;
//    int getBorderRadius()           const;
//    int getBgRadius()               const;
//    int getHeadRadius()             const;QColor borderColor()    const;void setBorderColor(const QColor &borderColor);//设置边框颜色
//    QColor getBorderColorEnd()      const;//设置电池电量报警时的渐变颜色QColor warningColorStart()     const;void setWarningColorStart(const QColor &warningColorStart);QColor warningColorEnd()       const;void setWarningColorEnd(const QColor &warningColorEnd);QColor normalColorStart()    const;void setNormalColorStart(const QColor &normalColorStart);QColor normalColorEnd()      const;void setNormalColorEnd(const QColor &normalColorEnd);int animationMsecs()     const;void setAnimationMsecs(const int animationMsecs);//    QSize sizeHint()                const;
//    QSize minimumSizeHint()         const;public Q_SLOTS:
//    //设置范围值
//    void setRange(double minValue, double maxValue);
//    void setRange(int minValue, int maxValue);//    //设置电池电量值void setElecValue(int value);void setElecValue(double value);//设置电池电量警戒值void setWarningValue(double);void setWarningValue(int warningValue);//    //设置步长
//    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 setBorderColorEnd(const QColor &borderColorEnd);Q_SIGNALS:void valueChanged(double value);};#endif // QBATTERY_H

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

源文件

#include "qbattery.h"
#include 
#include 
#include QBattery::QBattery(QWidget *parent)
{mBorderColor = QColor(100, 100, 100);mNormalColorStart = QColor(50, 205, 51);        //电池正常电量时的渐变开始颜色mNormalColorEnd = QColor(60, 179, 133);          //电池正常电量时的渐变结束颜色mWarningColorStart = QColor(250, 118, 113);mWarningColorEnd = QColor(204, 38, 38);mBorderRadius = 1;mBorderWidth = 2;mBatteryHeadWidth = 6;mBatteryHeadHeight = 20;mBatteryWidth = 80;mBatteryHeight = 40;mElectricBorder = 2;mWarningValue = 20.0;mCurrentValue = 60.0;mAnimationMsecs = 500; //动画运行时间，单位微妙barreryValueAnimation = new QPropertyAnimation(this,"value");
}QBattery::~QBattery()
{delete barreryValueAnimation;
}void QBattery::paintEvent(QPaintEvent *paintEvent)
{Q_UNUSED(paintEvent)QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing); //设置抗锯齿int batteryWidth = mBatteryWidth + mBatteryHeadWidth + 3*mBorderWidth; //计算电池总体的长和宽int batteryHeight = mBatteryHeight +2*mBorderWidth;float ratioX = (float)width()/batteryWidth;         //计算电池与实际窗口的长宽比float ratioY = (float)height()/batteryHeight;int windowWidth;int windowHeight;//根据窗口缩放，计算实际缩放后的窗口大小if(ratioX > ratioY){windowWidth = batteryWidth*ratioY;windowHeight = height();}else{windowWidth = width();windowHeight = batteryHeight*ratioX;}//计算窗口缩放后的电池的长宽等数据float ratio = qMin(ratioX,ratioY);int ratioWidth = mBatteryWidth*ratio;int ratioHeight = mBatteryHeight*ratio;int ratioBorderWidth = mBorderWidth*ratio;int ratioBatteryHeadWidth = mBatteryHeadWidth*ratio;int ratioBatteruHeadHeight = mBatteryHeadHeight*ratio;int ratioElectricBorder = mElectricBorder*ratio;painter.setViewport(0,0,windowWidth,windowHeight);  //设置视图窗口painter.setWindow(-windowWidth/2,-windowHeight/2,windowWidth,windowHeight);//设置窗口坐标原点为视口区域//的中心，只有视图坐标尺寸和窗口坐标尺寸比例相同时，才不会导致图形拉伸变形//绘制电池轮廓QPen pen;pen.setWidth(ratioBorderWidth);pen.setColor(mBorderColor);painter.setPen(pen);painter.drawRect(-ratioWidth/2,-ratioHeight/2,ratioWidth,ratioHeight);//绘制电池正极QBrush brush;brush.setColor(mBorderColor);brush.setStyle(Qt::SolidPattern); //画刷填充样式painter.setBrush(brush);painter.drawRect(ratioWidth/2,-ratioBatteruHeadHeight/2,ratioBatteryHeadWidth,ratioBatteruHeadHeight);//填充电池颜色painter.setPen(Qt::NoPen);QLinearGradient linearGradient(-ratioWidth/2+ratioElectricBorder,-ratioHeight/2+ratioElectricBorder,-ratioWidth/2+ratioElectricBorder,-ratioHeight/2+ratioElectricBorder+ratioHeight-2*ratioElectricBorder);
//    brush.setStyle(Qt::CrossPattern); //画刷填充样式if(mCurrentValue > mWarningValue){linearGradient.setColorAt(0,mNormalColorStart);linearGradient.setColorAt(1,mNormalColorEnd);brush.setStyle(Qt::LinearGradientPattern);painter.setBrush(linearGradient);painter.drawRect(-ratioWidth/2+ratioElectricBorder,-ratioHeight/2+ratioElectricBorder,mCurrentValue/100*(ratioWidth-2*ratioElectricBorder),ratioHeight-2*ratioElectricBorder);}else{linearGradient.setColorAt(0,mWarningColorStart);linearGradient.setColorAt(1,mWarningColorEnd);painter.setBrush(linearGradient);painter.drawRect(-ratioWidth/2+ratioElectricBorder,-ratioHeight/2+ratioElectricBorder,mCurrentValue/100*(ratioWidth-2*ratioElectricBorder),ratioHeight-2*ratioElectricBorder);}//绘制电池电量文字QFont font = this->font();qDebug()<<"font.pixelSize = "<<font.pixelSize();font.setPixelSize(10*ratio);this->setFont(font);QFontMetrics textSize = QWidget::fontMetrics();qDebug()<<"textSize.height() = "<<textSize.height()<<"textSize.maxWidth()"<<textSize.maxWidth();QString powStr=QString::asprintf("%.2f%%",mCurrentValue);QRect textRect=textSize.tightBoundingRect(powStr);//得到字符串的rectpen.setColor("black"); //划线颜色painter.setPen(pen);painter.drawText(0-textRect.width()/2,textRect.height()/2,powStr);
}double QBattery::value() const
{return mCurrentValue;
}void QBattery::setValue(const double value)
{mCurrentValue = value;this->repaint();
}double QBattery::minValue() const
{return mMinValue;
}void QBattery::setMinValue(double minValue)
{mMinValue = minValue;
}double QBattery::maxValue() const
{return mMaxValue;
}void QBattery::setMaxValue(double maxValue)
{mMaxValue = maxValue;
}void QBattery::setElecValue(int value)
{barreryValueAnimation->setDuration(mAnimationMsecs);barreryValueAnimation->setStartValue(mCurrentValue);barreryValueAnimation->setEndValue((double)value);barreryValueAnimation->start();
}void QBattery::setElecValue(double value)
{barreryValueAnimation->setDuration(mAnimationMsecs);barreryValueAnimation->setStartValue(mCurrentValue);barreryValueAnimation->setEndValue(value);barreryValueAnimation->start();
}double QBattery::warningValue() const
{return mWarningValue;
}void QBattery::setWarningValue(double warningValue)
{mWarningValue = warningValue;this->repaint();
}void QBattery::setWarningValue(int warningValue)
{mWarningValue = (double)warningValue;this->repaint();
}QColor QBattery::borderColor() const
{return mBorderColor;
}void QBattery::setBorderColor(const QColor &borderColor)
{mBorderColor = borderColor;this->repaint();
}QColor QBattery::warningColorStart() const
{return mWarningColorStart;
}void QBattery::setWarningColorStart(const QColor &warningColorStart)
{mWarningColorStart = warningColorStart;this->repaint();
}QColor QBattery::warningColorEnd() const
{return mWarningColorEnd;
}void QBattery::setWarningColorEnd(const QColor &warningColorEnd)
{mWarningColorEnd = warningColorEnd;this->repaint();
}QColor QBattery::normalColorStart() const
{return mNormalColorStart;
}void QBattery::setNormalColorStart(const QColor &normalColorStart)
{mNormalColorStart = normalColorStart;this->repaint();
}QColor QBattery::normalColorEnd() const
{return mNormalColorEnd;
}void QBattery::setNormalColorEnd(const QColor &normalColorEnd)
{mNormalColorEnd = normalColorEnd;this->repaint();
}int QBattery::animationMsecs() const
{return mAnimationMsecs;
}void QBattery::setAnimationMsecs(const int animationMsecs)
{mAnimationMsecs = animationMsecs;this->repaint();
}
#endif

功能持续更新中。。。