一、介紹

上一篇我們繪制了一個自定義的slider控件，現在我們再繪制一個電池控件，它可調節電池電量。

二、步驟

新建Battery類

? 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_OBJECTQ_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類

?

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

?frmBattery.h

#ifndef FRMBATTERY_H #define FRMBATTERY_H#include <QWidget>namespace Ui { class frmBattery; }class frmBattery : public QWidget {Q_OBJECTpublic: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_VERQTextCodec *codec = QTextCodec::codecForName("gbk"); #elseQTextCodec *codec = QTextCodec::codecForName("utf-8"); #endifQTextCodec::setCodecForLocale(codec);QTextCodec::setCodecForCStrings(codec);QTextCodec::setCodecForTr(codec); #elseQTextCodec *codec = QTextCodec::codecForName("utf-8");QTextCodec::setCodecForLocale(codec); #endiffrmBattery w;w.setWindowTitle("電池電量控件");w.show();return a.exec(); }

?

參考：

Qt編寫自定義控件43-自繪電池 - 飛揚青云 - 博客園

總結

以上是生活随笔為你收集整理的Qt自定义控件的实践——电池电量控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。