qt电池控件设计

最新推荐文章于 2024-02-21 20:35:10 发布
最新推荐文章于 2024-02-21 20:35:10 发布
阅读量1.5k 收藏 32
点赞数 3
分类专栏： C++\QT 文章标签： qt qt电池 电池 battery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42887343/article/details/113932145
版权

其他推荐内容：

电池控件设计

1 最终效果

在这里插入图片描述

2 电池控件代码设计

电池电量控件

  1. 可设置电池电量,动态切换电池电量变化
  2. 可设置电池电量警戒值
  3. 可设置电池电量正常颜色和报警颜色
  4. 可设置边框渐变颜色
  5. 可设置电量变化时每次移动的步长
  6. 可设置边框圆角角度/背景进度圆角角度/头部圆角角度

h文件（battery.h）

#ifndef BATTERY_H
#define BATTERY_H

#include <QWidget>

class Battery : public QWidget
{
    Q_OBJECT
    //Q_PROPERTY为自定义属性，可用于在ui文件中添加动态属性，方法：属性栏点击+号，选择其他，输入属性变量名字和对应的类型即可
    Q_PROPERTY(qreal minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(qreal maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(qreal value READ getValue WRITE setValue)
    Q_PROPERTY(qreal alarmValue READ getAlarmValue WRITE setAlarmValue)

    Q_PROPERTY(qreal step READ getStep WRITE setStep)
    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 = nullptr);
    ~Battery();

protected:
    void paintEvent(QPaintEvent *);
    void drawBorder(QPainter *painter);
    void drawBg(QPainter *painter);
    void drawHead(QPainter *painter);

private slots:
    void updateValue();

private:
    qreal minValue;             //最小值
    qreal maxValue;             //最大值
    qreal value;                //目标电量
    qreal alarmValue;           //电池电量警戒值

    qreal step;                 //每次移动的步长
    int borderRadius;           //边框圆角角度
    int bgRadius;               //背景进度圆角角度
    int headRadius;             //头部圆角角度

    QColor borderColorStart;    //边框渐变开始颜色
    QColor borderColorEnd;      //边框渐变结束颜色

    QColor alarmColorStart;     //电池低电量时的渐变开始颜色
    QColor alarmColorEnd;       //电池低电量时的渐变结束颜色

    QColor normalColorStart;    //电池正常电量时的渐变开始颜色
    QColor normalColorEnd;      //电池正常电量时的渐变结束颜色

    bool isForward;             //是否往前移
    qreal currentValue;         //当前电量
    QRectF batteryRect;         //电池主体区域
    QTimer *timer;              //绘制定时器

public:
    qreal getMinValue()         const;
    qreal getMaxValue()         const;
    qreal getValue()            const;
    qreal getAlarmValue()       const;

    qreal getStep()             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(qreal minValue, qreal maxValue);
    void setRange(int minValue, int maxValue);

    //设置最大最小值
    void setMinValue(qreal minValue);
    void setMaxValue(qreal maxValue);

    //设置电池电量值
    void setValue(qreal value);
    void setValue(int value);

    //设置电池电量警戒值
    void setAlarmValue(qreal alarmValue);
    void setAlarmValue(int alarmValue);

    //设置步长
    void setStep(qreal step);
    void setStep(int step);

    //设置边框圆角角度
    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(qreal value);
};

#endif // BATTERY_H

cpp文件（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;

    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();

    qreal headWidth = width() / 10;
    qreal batteryWidth = width() - headWidth;

    //绘制电池边框
    QPointF topLeft(5, 5);
    QPointF bottomRight(batteryWidth, height() - 5);
    batteryRect = QRectF(topLeft, bottomRight);

    painter->setPen(QPen(borderColorStart, 5));
    painter->setBrush(Qt::NoBrush);
    painter->drawRoundedRect(batteryRect, borderRadius, borderRadius);

    painter->restore();
}

void Battery::drawBg(QPainter *painter)
{
    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;
    qreal unit = (batteryRect.width() - (margin * 2)) / 100;
    qreal width = currentValue * unit;
    QPointF topLeft(batteryRect.topLeft().x() + margin, batteryRect.topLeft().y() + margin);
    QPointF bottomRight(width + margin + 5, 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)
            timer->stop();
    }
    else
    {
        currentValue += step;
        if (currentValue >= value)
            timer->stop();
    }
    this->update();
}

qreal Battery::getMinValue() const
{
    return this->minValue;
}

qreal Battery::getMaxValue() const
{
    return this->maxValue;
}

qreal Battery::getValue() const
{
    return this->value;
}

qreal Battery::getAlarmValue() const
{
    return this->alarmValue;
}

qreal Battery::getStep() const
{
    return this->step;
}

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(qreal minValue, qreal 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((qreal)minValue, (qreal)maxValue);
}

void Battery::setMinValue(qreal minValue)
{
    setRange(minValue, maxValue);
}

void Battery::setMaxValue(qreal maxValue)
{
    setRange(minValue, maxValue);
}

void Battery::setValue(qreal 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
        return;

    this->value = value;
    this->update();
    emit valueChanged(value);
    timer->start();
}

void Battery::setValue(int value)
{
    setValue((qreal)value);
}

void Battery::setAlarmValue(qreal alarmValue)
{
    if (this->alarmValue != alarmValue)
    {
        this->alarmValue = alarmValue;
        this->update();
    }
}

void Battery::setAlarmValue(int alarmValue)
{
    setAlarmValue((qreal)alarmValue);
}

void Battery::setStep(qreal step)
{
    if (this->step != step)
    {
        this->step = step;
        this->update();
    }
}

void Battery::setStep(int step)
{
    setStep((qreal)step);
}

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();
    }
}

3 demo设计

创建最基本的mainwindows窗口，在窗口界面设计中，拖一个widget控件进主界面后提升该控件为Battery，再添加一个Slider控件，用于拉动可设置电池电量。
代码如下：
h文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:

    void on_horizontalSlider_valueChanged(int value);

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

cpp文件

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->widget->setValue(ui->horizontalSlider->value());
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_horizontalSlider_valueChanged(int value)
{
    ui->widget->setValue(value);
}
码肥人壮
关注
  • 3
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt代码实现创建电池控件
10-05
通过以上步骤，我们可以创建一个自定义的Qt电池控件，它可以根据电量百分比实时更新显示。这个控件可以应用于各种需要展示设备电量的应用场景，提供直观的用户反馈。在实践中，开发者可以根据具体需求进行功能扩展，...
基于QT的电池电量显示控件
06-06
"基于QT的电池电量显示控件"是一个专为展示电池状态设计的组件。这个控件具有圆角矩形的外观，使得界面看起来更加现代和友好。它不仅能够显示当前的电池电量，还具备动态显示充电过程的功能，这意味着它可以实时更新...
QT获取电量状态
郑sir的博客
01-23 3978
QT显示电量，原文
Qt绘制电池UI
qq_44896246的博客
02-05 472
QT绘制电池UI
qml 电池控件设计（手把手从零开始）
weixin_42887343的博客
02-21 1064
手把手教你使用 qml 做一个电池控件，一起学习 qml。
QtWidget绘制电池控件
Thinking777的博客
01-26 873
使用QPainter来进行绘制自定义的控件，然后通过QTimer来实现电池控件的电量变化效果，效果图如下：
Qt自定义控件的实践——电池电量控件
sinat_31608641的博客
08-23 1180
自定义控件
qt环形进度条控件设计
weixin_42887343的博客
09-10 1877
上效果 上代码 1、 控件的h文件 #ifndef ROUNDPROGRESSBAR_H #define ROUNDPROGRESSBAR_H #include <QWidget> #include <QPainter> #define Abs(x) ((x)>=0?(x):-(x)) class RoundProgressBar : public QWidget { Q_OBJECT Q_PROPERTY(float _value READ getVa
Qt Widget 之电池控件(QPainter)
火山上的企鹅
09-12 3181
文章目录二、关键信息1. 驱动输入2. 绘制过程三、完整代码 GitHub 地址:     QWidgetPro ，选择子工程 Battery QT 其它文章请点击这里:     QT QUICK QML 学习笔记 # 一、效果 本文采用 QPainter 来绘制电池控件，顺便很适合用来初学 **QT Widget** 主要参考了飞扬青云大神的 Qt开源作品25-电池电量控件 ，相比之下， 此文更加适合新手学习
【Qt】自定义控件
卡钦斯基的博客
09-15 1632
在实际的项目开发中，通常情况下使用QSS即可改变原生控件外观，而QSS是通过Qt的样式引擎解析并设置样式参数，在paintEvent中通过这些样式参数绘制的。尽管如此，Qt的原生控件或许仍旧满足不了我们的需求，所以经常会遇到需要自定义控件的场合。例如需要一个开关样式的按钮，Qt中并没有提供。下面就分享一下Qt自定义控件的一些方法。 在Qt中自定义控件的方法有多种，常用的方法有： 顾名思义，组合控件就是将多个控件元素组合为一个整体，然后以这个整体为单位进行界面编程。
qt之加载动画控件设计
weixin_42887343的博客
07-07 1540
效果 实现原理 首先是各种参数设置，如刷新速度、圆点颜色和大小等，然后使用这些参数绘制圆点，使用定时器驱动重绘的方式进行界面刷新。 实现代码 h文件： #ifndef LINELOADING_H #define LINELOADING_H #include <QWidget> #include <QPainter> #include <QTimer> #include <QMap> #include <QColor> #include <
Qt精美自定义控件 十套demo源码
07-08
在本文中，我们将深入探讨基于Qt框架的自定义控件设计。Qt是一个强大的跨平台应用程序开发框架，广泛用于创建桌面、移动以及嵌入式系统的用户界面。通过自定义控件，开发者可以创建具有独特视觉效果和功能的组件，以...
Qt绘制电池进度条（paintEvent）
最新发布
03-22
在Qt编程中，`paintEvent`是一个非常关键的事件处理函数，它用于处理图形界面的绘制。本项目中，我们创建了一个自定义的电池进度条控件，它不仅能够...通过这个项目，初学者可以深入了解Qt图形界面设计的原理和实践。
基于QT的电池电量
06-06
为了使电池电量显示更具视觉吸引力，开发者可能还使用了Qt的样式表（QSS）来定制控件的外观，实现与系统主题相协调的设计。同时，QGraphicsScene的事件处理机制可以用来响应用户的鼠标点击或其他输入，例如，用户...
QTabWidget常用样式设置
热门推荐
weixin_42887343的博客
06-04 2万+
个人使用qt，感觉QTabwidget是个非常好用的控件，但有时候总是感觉其tab样式不好控制或说不够灵活，从而导致放弃使用该控件。比如说，标签横向显示的时候，文字随之也横着显示了，这样还需要指定自定义样式，继承QProxyStyle类并重写drawControl虚函数。 然而这样过于麻烦，关于软件主菜单不同的界面切换，个人还是比较喜欢按键组合+STackedWidget控件。 对于一遍的小界面来说，QTabWidget其实完全满足你的使用要求，所以本文主要简述QTabwidget样式的常用使用方法，配合标
C++中的Lambda函数
weixin_42887343的博客
12-23 1万+
一 函数语法 我们平时调用函数的时候，都是需要被调用函数的函数名，但是匿名函数就不需要函数名，而且直接写在需要调用的地方，对于以前没用过的小伙伴来说，第一眼看见了这语法可能很迷惑。 C++11的基本语法格式为： [capture](parameters) -> return_type { /* ... */ } （1） [capture] ：[]内为外部变量的传递方式，值、引用等，如下 [] //表示的是在lambda定义之前的域，对外部参数的调用； [=] //表示外部参
QT实现串口打开和关闭
weixin_42887343的博客
11-08 1万+
/第一步 查找串口***/ //下面这个循环语句用来查找可以用的串口端口 foreach (const QSerialPortInfo &amp;info,QSerialPortInfo::availablePorts()) //不确定有多少串口可用，也就不知道循环多少次，所以用foreach（不知道用的就百度） { QSerialPort serial; //在循环语句内部实例化类，因为可用...
QT中QTablewidget表格常用操作
weixin_42887343的博客
10-14 1万+
添加表头 QStringList header; header<<"序号"<<"名称"<<"设备ID"<<"设备IP"<<"设备端口"<<"型号"<<"厂家"<<"备注"; ui->tableWidget->setHorizontalHeaderLabels(header); 设置表头样式（颜色和字体） ui->tableWidget->horizontalHeader()->se
qt编写控件属性设计器源码
04-30
Qt是一款跨平台的C++应用程序开发框架，其中包括了丰富的控件，可以通过这些控件来实现复杂的界面设计。而控件属性设计器则是Qt控件的基本属性编辑工具，可以让开发者方便、快速地对控件属性进行编辑和调整。 控件属性设计器的源码是开发者实现该控件的基础，通过对源码的分析和修改，可以实现个性化的控件属性设计器。控件属性编辑器的设计思路通常分为两个部分：显示和编辑。显示使用Qt自己的布局和绘图机制，而编辑时则会创建一个新窗口或者面板来进行编辑。 由于Qt提供了众多控件，所以在Qt的控件属性设计器上，我们需要设置三个基本属性：控件类型、当前选择的控件对象和控件的属性。然后，我们可以通过QLabel、QLineEdit、QComboBox、QCheckBox等其他控件来对控件的属性进行编辑。 控件属性设计器的主要功能包括：添加新的控件属性、修改控件属性、删除控件属性、保存属性值等。通过源码的修改，我们可以实现更加人性化的界面布局和控制，使得控件属性设计器更加易于使用。 总的来说，Qt控件属性设计器的源码设计需要首先对控件和属性的关系有一定的认识和了解，随后根据 用户需求和Qt运行环境的特点，进行编码设计以实现控件属性设计器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值