简介：圆形进度条在GUI设计中广泛应用，本文介绍如何在QT框架中实现自定义圆形进度条。通过继承QWidget或QGraphicsView类，并重写paintEvent()方法，利用QPainter绘制圆弧，实现进度条的动态更新。本文详细阐述了实现步骤，包括创建自定义控件类、重写paintEvent()方法、实现进度更新、样式自定义、饼形和线形模式扩展，以及实例化和使用。通过本教程，开发者可以掌握圆形进度条在QT中的设计与实现，为用户提供现代且直观的进度指示。
1. QT中圆形进度条简介
圆形进度条是一种常见的用户界面元素，用于可视化地表示进度或完成状态。在QT中，可以使用 QProgressBar 类来创建圆形进度条。 QProgressBar 类提供了丰富的属性和方法，可以自定义进度条的外观和行为。本教程将指导您在QT中创建和使用自定义圆形进度条，包括如何定义控件类、重写 paintEvent() 方法、实现进度更新以及自定义样式。
2.1 控件类定义
在自定义控件类中，我们需要定义控件的基本信息，包括控件的名称、继承关系、成员变量和构造函数。
class MyCircularProgress : public QWidget
{
Q_OBJECT
public:
MyCircularProgress(QWidget *parent = nullptr);
~MyCircularProgress();
protected:
void paintEvent(QPaintEvent *event) override;
private:
int m_value;
int m_maxValue;
QColor m_foregroundColor;
QColor m_backgroundColor;
};
参数说明：
-
parent: 父控件指针，默认为空。
代码逻辑：
- 继承自
QWidget类，表示该控件是一个 QWidget 控件。 - 定义了三个私有成员变量：
m_value（当前进度值）、m_maxValue（最大进度值）、m_foregroundColor（进度条前景色）、m_backgroundColor（进度条背景色）。 - 重写了
paintEvent()方法，用于绘制圆形进度条。 - 定义了构造函数和析构函数。
2.2 控件属性声明
为了使控件能够通过外部设置属性来控制其外观和行为，我们需要声明控件的属性。
Q_PROPERTY(int value READ value WRITE setValue)
Q_PROPERTY(int maxValue READ maxValue WRITE setMaxValue)
Q_PROPERTY(QColor foregroundColor READ foregroundColor WRITE setForegroundColor)
Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
参数说明：
-
value: 当前进度值。 -
maxValue: 最大进度值。 -
foregroundColor: 进度条前景色。 -
backgroundColor: 进度条背景色。
代码逻辑：
- 使用 Qt 的
Q_PROPERTY宏声明了四个属性：value、maxValue、foregroundColor和backgroundColor。 - 这些属性可以通过
READ和WRITE宏指定获取和设置方法。 - 这些属性的获取和设置方法将在后续章节中实现。
3. 重写paintEvent()方法
在自定义控件类中， paintEvent() 方法负责绘制控件的外观。对于圆形进度条，我们需要重写此方法以绘制圆形进度条的图形界面。
3.1 绘制圆形进度条
在 paintEvent() 方法中，首先需要获取控件的宽度和高度，并计算圆形进度条的半径和中心点坐标。
void MyCircularProgressBar::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
// 获取控件的宽度和高度
int width = this->width();
int height = this->height();
// 计算圆形进度条的半径和中心点坐标
int radius = qMin(width, height) / 2;
QPointF center(width / 2, height / 2);
// 设置画笔属性
painter.setPen(QPen(Qt::black, 2));
painter.setBrush(Qt::NoBrush);
// 绘制圆形进度条
painter.drawEllipse(center, radius, radius);
}
- 参数说明：
-
event：指向触发paintEvent()事件的QPaintEvent对象。
-
- 代码逻辑：
- 获取控件的宽度和高度。
- 计算圆形进度条的半径和中心点坐标。
- 设置画笔属性。
- 绘制圆形进度条。
3.2 进度值更新
为了显示进度值，需要在 paintEvent() 方法中根据当前进度值绘制进度条的填充部分。
void MyCircularProgressBar::paintEvent(QPaintEvent *event)
{
// ... 省略之前的代码 ...
// 计算进度条的填充角度
double angle = 360.0 * progress / 100.0;
// 设置画刷属性
painter.setBrush(Qt::green);
// 绘制进度条的填充部分
painter.drawPie(center, radius, -90, -angle);
}
- 参数说明：
-
event：指向触发paintEvent()事件的QPaintEvent对象。
-
- 代码逻辑：
- 计算进度条的填充角度。
- 设置画刷属性。
- 绘制进度条的填充部分。
4.1 进度值设置
在自定义控件类中，需要提供一个方法来设置进度值。该方法可以命名为 setValue() ，并接收一个整型参数 value ，表示进度值。
void CustomProgressBar::setValue(int value) {
if (value < 0 || value > 100) {
qWarning() << "Invalid progress value: " << value;
return;
}
if (value != _value) {
_value = value;
update();
}
}
在 setValue() 方法中，首先对传入的进度值进行合法性检查，确保其在 0 到 100 之间。如果进度值不合法，则输出警告信息并返回。
如果进度值合法，则更新控件的内部状态 _value ，并调用 update() 方法触发控件的重绘。
4.2 进度值改变触发
当进度值发生改变时，需要触发一个信号来通知外部，以便外部可以做出相应的处理。在自定义控件类中，可以定义一个名为 valueChanged 的信号，并带有 int 类型的参数，表示新的进度值。
class CustomProgressBar : public QWidget {
Q_OBJECT
public:
...
signals:
void valueChanged(int value);
...
};
在 setValue() 方法中，在更新控件的内部状态和触发重绘后，发出 valueChanged 信号，将新的进度值传递给外部。
void CustomProgressBar::setValue(int value) {
...
emit valueChanged(value);
}
外部可以连接到 valueChanged 信号，并在进度值改变时执行相应的操作。例如，可以更新显示进度值的标签或触发其他业务逻辑。
5. 样式自定义
5.1 样式表定义
自定义控件的样式可以通过样式表来实现。样式表是一种文本文件，其中包含了控件的样式规则。这些规则指定了控件的外观和行为，例如字体、颜色、边框等。
要创建样式表，可以使用任何文本编辑器。样式表文件通常以 .qss 为扩展名。
以下是一个简单的样式表示例：
MyProgressBar {
background-color: #f0f0f0;
border: 1px solid #000000;
border-radius: 5px;
}
这个样式表定义了 MyProgressBar 控件的样式。它设置了背景颜色为浅灰色，边框为黑色，边框半径为5像素。
5.2 样式属性设置
要将样式表应用到控件，可以使用 setStyleSheet() 方法。该方法接收一个字符串参数，该参数包含样式表的内容。
以下代码示例演示如何将样式表应用到 MyProgressBar 控件：
MyProgressBar *progressBar = new MyProgressBar;
progressBar->setStyleSheet("background-color: #f0f0f0; border: 1px solid #000000; border-radius: 5px;");
除了使用 setStyleSheet() 方法，还可以使用 setStyle() 方法来设置控件的样式。 setStyle() 方法接收一个 QStyle 对象作为参数。 QStyle 对象定义了控件的外观和行为。
以下代码示例演示如何使用 setStyle() 方法设置控件的样式：
MyProgressBar *progressBar = new MyProgressBar;
QStyle *style = new QWindowsStyle;
progressBar->setStyle(style);
使用 setStyle() 方法可以更精细地控制控件的外观和行为。但是， setStyleSheet() 方法更简单、更方便。
6.1 饼形模式实现
在饼形模式下，进度条将呈现为一个圆形，其中已完成的进度部分以扇形区域表示。要实现饼形模式，需要对 paintEvent() 方法进行修改：
void CustomProgressBar::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
// 计算圆形进度条的尺寸和中心点
int width = this->width();
int height = this->height();
int centerX = width / 2;
int centerY = height / 2;
int radius = qMin(width, height) / 2;
// 绘制圆形进度条
painter.setBrush(Qt::gray);
painter.drawEllipse(centerX - radius, centerY - radius, radius * 2, radius * 2);
// 计算已完成进度的扇形角度
double angle = 360.0 * m_progress / 100.0;
// 绘制已完成进度扇形
painter.setBrush(m_progressColor);
painter.drawPie(centerX - radius, centerY - radius, radius * 2, radius * 2, 90, -angle);
}
在饼形模式下， drawPie() 方法用于绘制扇形区域。 90 表示扇形区域的起始角度（12点钟方向）， -angle 表示扇形区域的跨度（逆时针方向）。
6.2 线形模式实现
在线形模式下，进度条将呈现为一条水平或垂直的线段，其中已完成的进度部分以线段的长度表示。要实现线形模式，需要对 paintEvent() 方法进行修改：
void CustomProgressBar::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
// 计算线形进度条的尺寸和位置
int width = this->width();
int height = this->height();
int x = 0;
int y = 0;
int length = width;
// 绘制线形进度条
painter.setBrush(Qt::gray);
painter.drawRect(x, y, length, height);
// 计算已完成进度的线段长度
int progressLength = length * m_progress / 100.0;
// 绘制已完成进度线段
painter.setBrush(m_progressColor);
painter.drawRect(x, y, progressLength, height);
}
在线形模式下， drawRect() 方法用于绘制线段。 length 表示线段的总长度， progressLength 表示已完成进度的线段长度。
简介：圆形进度条在GUI设计中广泛应用，本文介绍如何在QT框架中实现自定义圆形进度条。通过继承QWidget或QGraphicsView类，并重写paintEvent()方法，利用QPainter绘制圆弧，实现进度条的动态更新。本文详细阐述了实现步骤，包括创建自定义控件类、重写paintEvent()方法、实现进度更新、样式自定义、饼形和线形模式扩展，以及实例化和使用。通过本教程，开发者可以掌握圆形进度条在QT中的设计与实现，为用户提供现代且直观的进度指示。
扫一扫
4970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
