QT自定义控件(电池）

做一个电池控件，需要一个拖动条和一个进度条。
不多说，直接上代码
.h文件

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QProgressBar>
#include <QSlider>class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = 0);~Widget();protected slots:void on_SliderValueChange();private:QSlider *m_pSlider=nullptr;QProgressBar *m_batteryBar=nullptr;
};#endif // WIDGET_H

.cpp文件

#include "widget.h"
#include <QVBoxLayout>
#include <QLabel>Widget::Widget(QWidget *parent): QWidget(parent)
{QWidget *batterytopwgt=new QWidget(this);QLabel *topLabel=new QLabel(this);topLabel->setStyleSheet("background:black");QVBoxLayout *topLayout=new QVBoxLayout(this);topLayout->addStretch();topLayout->addWidget(topLabel);topLayout->addStretch();topLayout->setMargin(0);batterytopwgt->setLayout(topLayout);QVBoxLayout *mainLayout=new QVBoxLayout(this);m_pSlider=new QSlider(Qt::Horizontal,this);   //将拖动条设置为横向m_pSlider->setRange(0,100);   //设置拖动条范围m_batteryBar=new QProgressBar(this);m_batteryBar->setRange(0,100);m_batteryBar->setFixedHeight(50);m_batteryBar->setFixedWidth(100);m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:green}");  //设置样式mainLayout->addWidget(m_batteryBar);mainLayout->addWidget(m_pSlider);mainLayout->setMargin(0);mainLayout->addStretch();this->setLayout(mainLayout);connect(m_pSlider,&QSlider::valueChanged,this,&Widget::on_SliderValueChange);   //拖动条每次值改变都会执行
}Widget::~Widget()
{}void Widget::on_SliderValueChange()
{int sliderValue=m_pSlider->value();m_batteryBar->setValue(sliderValue);if(m_batteryBar->value()<=20)  //如果值小于20，则颜色为红色{m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:red}");}else  //大于20则值为绿色{m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:green}");}
}

main.cpp文件

#include "widget.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

效果图：

这个我做的很简单，不过原理基本上是这样的。电池的样式可以根据自己喜好进行绘制。

QT自定义控件(电池）相关推荐

Qt自定义控件创建和使用
Qt自定义控件创建和使用 Qt中很方便的是使用各种自定义控件来分模块实现各种子功能,用于实现代码的解耦: 之前在使用Qt 5.12创建自定义控件时,出现了各种问题,多次重装QtCreator和VS,屡 ...
Qt自定义控件之仪表盘的完整实现
概述基于QT的仪表盘有很多种办法,比如使用QWT,ChartDirector 或H5混合的echart组件,或者基于QT的绘图功能绘制,或者基于美工提供的图片的基础上增加动态效果.然而搞明白QT自定 ...
Qt自定义控件（IP输入框，windows下）
1.建立自定义控件项目组代表后来能从哪里找到剩下的点"下一步"就行了 2.编辑代码在生成项目的cpp中添加自己的内容(没有.ui界面了,设计tab是灰色的) 放一下我的代码 ...
Qt自定义控件------SwitchButton
简介一般用来两种互斥状态的切换. 效果下面放效果图控件拆分一.控件大体有两部分组成,一个是背景,一个是白色的滑块.原本背景是想用QWidget然后直接设置圆角的,然后发现效果很差.所以背景 ...
linux qt 自定义控件,编写Qt Designer自定义控件（一）——如何创建并使用Qt自定义控件...
要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:"升级(promo ...
【Qt开发笔记】Qt自定义控件开发与使用，自定义控件实现容器与控件内布局
1.开发环境 Qt版本:Qt 4.8.7 编译器:MinGw 系统:Windows 2.创建Qt4自定义控件创建一个Qt自定义控件工程. 工程名为Custom. 控件类取名Custom. 然后完成创 ...
Qt自定义控件之圆形按钮、圆形头像
Qt自定义控件之圆形按钮.圆形头像前言代码实现实验效果前言现在很多软件的头像或者按钮都是圆形了,看起来比较舒服.比如QQ登录头像,酷狗客户端的一些按钮都是圆形.Qt实现圆形头像,大致有几种思 ...
Qt 自定义控件提升，头文件找不到的问题
Qt 自定义控件提升,头文件找不到的问题在附加包含目录添加: ./
QT制作电池电量图标
利用QT实现电池电量显示好充电动态效果,先看效果图: 电池电量颜色划分: 电池gif:0-29–红色剩余电量数字:红色电池gif:红色30-54–黄色剩余电量数字:红色电池gif:55-100 ...
Qt自定义控件的实践——电池电量控件
一.介绍上一篇我们绘制了一个自定义的slider控件,现在我们再绘制一个电池控件,它可调节电池电量. 二.步骤新建Battery类 battery.h #ifndef BATTERY_H #def ...

QT自定义控件(电池）

QT自定义控件(电池）相关推荐

最新文章

热门文章