QT自定义控件(电池）

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

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QProgressBar>
#include <QSlider>

class Widget : public QWidget
{
    Q_OBJECT

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

效果图：

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