博客

PyQt5 – 胶囊状的进度条

  • Post category:Python

下面我将详细讲解 Python 的 PyQt5 库中如何使用“胶囊状的进度条”。

什么是“胶囊状的进度条”

“胶囊状的进度条”是一种在 UI 界面中常见的进度指示器，它通常呈现为一个白色的胶囊形状，外面包裹着一圈背景颜色。当进度逐渐递增时，白色胶囊内部的颜色会随之变化，从而展示出进度条的当前进度。

PyQt5 中实现“胶囊状的进度条”

在Python中，我们可以使用 PyQt5 库来快速实现胶囊状的进度条。下面我们来看看具体的步骤：

1. 安装 PyQt5 库

首先，我们需要先安装 PyQt5 库。

pip install PyQt5

2. 创建胶囊状的进度条

在 PyQt5 中实现胶囊状的进度条需要使用 QProgressBar 控件，并通过 stylesheet 来自定义样式。

下面是一个简单的示例：

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QProgressBar, QWidget

class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()


    def initUI(self):

        # 创建一个水平的进度条
        self.pbar = QProgressBar(self)
        self.pbar.setGeometry(30, 40, 200, 25)

        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('QProgressBar')
        self.show()

在这个示例中，我们创建了一个简单的 QWidget 程序，并在其中加入了一个 QProgressBar 控件。

3. 自定义样式

下面，我们需要通过 stylesheet 来自定义进度条的外观。

self.pbar.setStyleSheet('''
            QProgressBar {
                border: 2px solid grey;
                border-radius: 8px;
                background-color: #FFFFFF;
                text-align: center;
            }
            QProgressBar::chunk {
                border-radius: 8px;
                background-color: #FF7F00;
            }
        ''')

在这个示例中，我们使用了 CSS 的语法来自定义 QProgressBar 控件的样式。具体来说，我们通过设置边框颜色、边框半径和背景颜色来设置进度条的样式。同时，我们使用了 ::chunk 选择器来设置进度条的进度样式。

4. 更新进度条

最后，我们需要更新进度条的进度。下面是一个简单的方法，用于控制进度条的进度：

def doAction(self):
    value = 0
    while value < 100:
        value += 1
        self.pbar.setValue(value)

在这个方法中，我们使用了 setValue() 方法来设置进度条的值。然后，我们通过一个 while 循环来不断增加进度条的值，直到进度达到 100 为止。

5. 运行程序

现在我们已经完成了一个简单的胶囊状进度条的实现，可以尝试运行以上的完整代码来查看效果。

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QProgressBar, QWidget

class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()


    def initUI(self):

        # 创建一个水平的进度条
        self.pbar = QProgressBar(self)
        self.pbar.setGeometry(30, 40, 200, 25)

        # 设置进度条的样式
        self.pbar.setStyleSheet('''
            QProgressBar {
                border: 2px solid grey;
                border-radius: 8px;
                background-color: #FFFFFF;
                text-align: center;
            }
            QProgressBar::chunk {
                border-radius: 8px;
                background-color: #FF7F00;
            }
        ''')

        # 点击 Button，启动 doAction() 方法，增加进度条的值
        btn = QPushButton('Start', self)
        btn.move(40, 80)
        btn.clicked.connect(self.doAction)

        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('QProgressBar')
        self.show()


    def doAction(self):
        value = 0
        while value < 100:
            value += 1
            self.pbar.setValue(value)


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

以上是一个完整的示例，您可以点击 “Start” 按钮来启动进度条，并查看效果。

示例 2：

除了水平的进度条之外，您也可以创建垂直的进度条，只需要在创建 QProgressBar 控件时添加一个方向参数即可：

self.pbar = QProgressBar(self)
self.pbar.setGeometry(40, 40, 25, 200)
self.pbar.setOrientation(Qt.Vertical)

self.pbar.setStyleSheet('''
            QProgressBar {
                border: 2px solid grey;
                border-radius: 8px;
                background-color: #FFFFFF;
                text-align: center;
            }
            QProgressBar::chunk {
                border-radius: 8px;
                background-color: #FF7F00;
            }
        ''')

这样就创建了一个垂直的进度条。

总结：

以上是使用 PyQt5 库来实现“胶囊状的进度条”的完整教程，包括自定义样式、更新进度条值、创建水平和垂直两种类型等。希望对大家有所帮助。

Tags: