qt显示类控件---QProgressBar

复制代码

QProgressBar是一个进度条组件

核心属性

教学案例

案例1：核心属性的使用

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //QProgressBar是一个进度条组件
    //核心属性, 设置这些元素全部都是set+方法名
    ui->progressBar->setMinimum(10);  //设置2进度条最小值
    ui->progressBar->setMaximum(100);  //设置进度条最大值
    ui->progressBar->setValue(12);    //设置当前值
    qDebug() << ui->progressBar->value(); //获取当前值
    ui->progressBar->setAlignment(Qt::AlignCenter); //设置文本对齐方式，这里的文本是进度条当前显示的百分比值
                                                    //对齐方式有4种
    ui->progressBar->setTextVisible(false);    //设置进度条数字是否可见
    ui->progressBar->setInvertedAppearance(true); //设置是否反向增长
    ui->progressBar->setOrientation(Qt::Horizontal); //设置进度条的增长方向，Qt::Horizontal是从左往右增长(默认)，
    ui->progressBar->setOrientation(Qt::Vertical);   //Qt::Vertical是从下往上增长
}

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

案例2：设置进度条自动增长，并使用QPalette进行样式调整(比较难)

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class QTimer;

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    //void test();
    QTimer* timer;

private slots:
    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

注意：按照cpp的语法，如果只是要使用某个类的指针，可以进行类的向前声明而无需包含头文件。

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QTimer> //这样的话.cpp还是得包含
#include<QDebug>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

  //  test();
    //创建一个进度条，每隔100ms进度+1
    ui->progressBar->setMaximum(100);
    ui->progressBar->setMinimum(0);
    ui->progressBar->setValue(0);
    ui->progressBar->setAlignment(Qt::AlignCenter);
    ui->progressBar_2->setAlignment(Qt::AlignCenter);  //利用样式表可以将进度条设置为红色的, 设置sheetStyle完后文本显示会有点bug，需要重新调整
    ui->progressBar_3->setAlignment(Qt::AlignCenter);
    ui->progressBar_4->setAlignment(Qt::AlignCenter);
    //ui->progressBar->setOrientation(Qt::Vertical); //QProgressBar 在垂直方向时，默认不会显示文本（百分比）
    //如果要保留原本QT的白条推进样式就只能使用调色板进行调色而不改变样式，如下

    //按钮的
    ui->pushButton->setStyleSheet("");
    QPalette p2 = ui->pushButton->palette();
    p2.setColor(QPalette::Background, QColor("#FF0000"));   //Background对所有控件的调整都无效？
    p2.setColor(QPalette::Button, QColor("#FF0000"));       //Button仅调整按钮边框
    ui->pushButton->setPalette(p2);
    ui->pushButton->setAutoFillBackground(true);
    ui->pushButton->update();

    //进度条的
    //猜的：基本判断为QPalette对进度条不换样式仅换颜色的修改无效，有可能是因为setColor的第一个参数不存在进度条对象的描述，尤其是"chunk"部分
    //也有可能在windows平台不太支持QPalette的部分用法
    ui->progressBar_4->setStyleSheet("");
    QPalette p = ui->progressBar_4->palette();            //将样式的调色板对象调出来
    p.setColor(QPalette::Highlight, QColor("#FF0000"));
//    p.setColor(QPalette::Button, QColor("#FF0000"));
//    p.setColor(QPalette::Background, QColor("#FF0000"));     // 调整chunk 主色(高亮块)
    ui->progressBar_4->setPalette(p);
    ui->progressBar_4->setAutoFillBackground(true);
    ui->progressBar_4->update();

}

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


void Widget::on_pushButton_clicked()
{

    //Widget窗体的 改变窗体颜色生效
    this->setStyleSheet("");
    QPalette p3 = this->palette();
    p3.setColor(QPalette::Window, QColor("#1C3141"));
    this->setPalette(p3);
    ui->progressBar_4->setAutoFillBackground(true);

}



void Widget::on_pushButton_2_clicked()
{
    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, [this](){
        int value = ui->progressBar->value();
        if (value >= ui->progressBar->maximum())
        {
            //进度条满了就停止
            timer->stop();
        }
        ui->progressBar->setValue(++value);
        ui->progressBar_2->setValue(++value);
        ui->progressBar_3->setValue(++value);
        ui->progressBar_4->setValue(++value);
    });
    timer->start(10);
}

QPalette 是 Qt 框架中的一个类，用于管理和控制应用程序的颜色方案。它定义了各种图形界面元素的颜色，如窗口背景、文本颜色、按钮颜色等。通过使用 QPalette，可以轻松地自定义应用程序的外观，以满足特定的设计需求

我们使用这个的目的是为了在不改变进度条原有样式(进度条增加的时候会有个白块向后推的样式)的基础上，只改变颜色，使用sheetstyle进行样式表调整是不行的如上红色的就是。

但是经过我一早上的研究，看了很多资料包括官方文档，得出结论是在windows系统下根本无法用QPalette完成对控件的样式调整，只对widget背景界面有效果(如上)，对button也无法做到很好的调整仅仅调整了边框，为什么呢，按理来说进度条是属于highlight呀，有人会认为是进度条的高亮块属于chunk，人家本来就没有这种样式的调整，但是我试了按钮的使用button方法也不行，所以我给出有个更激进的原因如下：windows系统本身对QPalette的部分功能不兼容导致的。

所以如果你想用这个进行调整的话，仅对widget背景进行尝试，不要再去研究了，真的很费时的。

案例3：使用sheetstyle进行进度条的渐变等的样式调整(中等)

调整背景颜色，也就是那个进度条

调整为渐变色的关键就是上面这个qss，可以以控件最左上角为开始渐变起点x1，y1，下面的x2，y2就是渐变终点，接着按照语法可以将颜色分到不同的从0到1的位置进行填充，这里参与渐变的颜色可以有无数种只要位置在0-1之间就行了。

为什么要做渐变呢，比如宝石蓝和浅蓝的渐变配合一些白色的界面会使得这个颜色的控件更吸引人，使得蓝色更亮，如果能再做出一点立体感就更独特了。只要还是可以图形颜色的差别。很多游戏都是这么进行颜色差别的。

border-radius: 10px，这个是调整边框的圆滑性的。值越高边框越圆。

由于qt5的立体效果有点差劲，使用立体效果请移步qt6的教程。