第七篇 -- 常用界面組件的使用（QSlider和QProgressBar）

首先畫個圖

ui_proBar.py

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'ui_proBar.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.groupBox = QtWidgets.QGroupBox(Form)
        self.groupBox.setGeometry(QtCore.QRect(10, 0, 381, 131))
        self.groupBox.setTitle("")
        self.groupBox.setObjectName("groupBox")
        self.progressBar = QtWidgets.QProgressBar(self.groupBox)
        self.progressBar.setGeometry(QtCore.QRect(150, 100, 201, 16))
        self.progressBar.setProperty("value", 0)
        self.progressBar.setObjectName("progressBar")
        self.horizontalSlider = QtWidgets.QSlider(self.groupBox)
        self.horizontalSlider.setGeometry(QtCore.QRect(150, 20, 161, 22))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        self.label_3 = QtWidgets.QLabel(self.groupBox)
        self.label_3.setGeometry(QtCore.QRect(30, 100, 61, 16))
        self.label_3.setObjectName("label_3")
        self.label = QtWidgets.QLabel(self.groupBox)
        self.label.setGeometry(QtCore.QRect(30, 20, 47, 13))
        self.label.setObjectName("label")
        self.horizontalScrollBar = QtWidgets.QScrollBar(self.groupBox)
        self.horizontalScrollBar.setGeometry(QtCore.QRect(150, 60, 160, 16))
        self.horizontalScrollBar.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalScrollBar.setObjectName("horizontalScrollBar")
        self.label_2 = QtWidgets.QLabel(self.groupBox)
        self.label_2.setGeometry(QtCore.QRect(30, 60, 47, 13))
        self.label_2.setObjectName("label_2")
        self.groupBox_2 = QtWidgets.QGroupBox(Form)
        self.groupBox_2.setGeometry(QtCore.QRect(10, 140, 381, 151))
        self.groupBox_2.setObjectName("groupBox_2")
        self.checkBox = QtWidgets.QCheckBox(self.groupBox_2)
        self.checkBox.setGeometry(QtCore.QRect(30, 30, 70, 21))
        self.checkBox.setObjectName("checkBox")
        self.checkBox_2 = QtWidgets.QCheckBox(self.groupBox_2)
        self.checkBox_2.setGeometry(QtCore.QRect(210, 30, 131, 17))
        self.checkBox_2.setObjectName("checkBox_2")
        self.radioButton = QtWidgets.QRadioButton(self.groupBox_2)
        self.radioButton.setGeometry(QtCore.QRect(30, 80, 121, 17))
        self.radioButton.setObjectName("radioButton")
        self.radioButton_2 = QtWidgets.QRadioButton(self.groupBox_2)
        self.radioButton_2.setGeometry(QtCore.QRect(210, 80, 151, 17))
        self.radioButton_2.setObjectName("radioButton_2")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.label_3.setText(_translate("Form", "ProcessBar"))
        self.label.setText(_translate("Form", "Slider"))
        self.label_2.setText(_translate("Form", "ScollBar"))
        self.groupBox_2.setTitle(_translate("Form", "ProcessBar設置"))
        self.checkBox.setText(_translate("Form", "textVisible"))
        self.checkBox_2.setText(_translate("Form", "InvertedAppearance"))
        self.radioButton.setText(_translate("Form", "顯示格式--百分比"))
        self.radioButton_2.setText(_translate("Form", "顯示格式--當前值"))

 

然后自定義信號和槽

myWidget.py

#!/usr/bin/env python
# _*_ coding: UTF-8 _*_
"""=================================================
@Project -> File    : Operate-system -> myWidget.py
@IDE     : PyCharm
@Author  : zihan
@Date    : 2020/4/8 14:29
@Desc    :
================================================="""
import sys
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.QtCore import pyqtSlot

from ui_proBar import Ui_Form


class QmyWidget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)  # 調用父類構造函數，創建窗體
        self.ui = Ui_Form()  # 創建UI對象
        self.ui.setupUi(self)  # 構造UI

        self.ui.horizontalSlider.setMaximum(200)
        self.ui.horizontalScrollBar.setMaximum(200)
        self.ui.progressBar.setMaximum(200)
        # self.ui.progressBar.setStyleSheet("QProgressBar::chunk { background-color: rgb(255, 0, 0)}")
        self.ui.progressBar.setStyleSheet("QProgressBar::chunk { background-color: rgb(255, 0, 0)}"
                                          "QProgressBar{text-align: center}")
        # self.ui.progressBar.setStyleSheet("QProgressBar{text-align: center;}")
        self.ui.horizontalSlider.valueChanged.connect(self.do_valueChanged)
        self.ui.horizontalScrollBar.valueChanged.connect(self.do_valueChanged)

    def on_radioButton_clicked(self):  # 顯示格式 -- 百分比
        self.ui.progressBar.setFormat("%p%")

    def on_radioButton_2_clicked(self):  # 顯示格式 -- 當前值
        self.ui.progressBar.setFormat("%v")

    @pyqtSlot(bool)  # # "textVisible" 復選框
    def on_checkBox_clicked(self, checked):
        self.ui.progressBar.setTextVisible(checked)

    @pyqtSlot(bool)  # # "InvertedAppearance" 復選框
    def on_checkBox_2_clicked(self, checked):
        self.ui.progressBar.setInvertedAppearance(checked)

    # # ========= 自定義槽函數 ==================
    def do_valueChanged(self, value):
        self.ui.progressBar.setValue(value)


if __name__ == "__main__":
    app = QApplication(sys.argv)  # 創建app，用QApplication類
    form = QmyWidget()
    form.show()
    sys.exit(app.exec_())

 

QSlider和QScrollerBar都是從QAbstractSlider類繼承來的，擁有一些相同的屬性，在屬性編輯器里設置后即可看到效果，這些屬性如下：

• minimum 和 maximum：輸入范圍的最小值和最大值
• singleStep：單步長，拖動標尺上的滑塊，或按下左/右鍵時的最小變化數值。
• pageStep：輸入焦點在組件上時，按PgUp或PgDn鍵時變化的數值。
• value：組件的當前值，拖動滑塊時自動改變此值，並限定在minimum和maximum定義的范圍之類。
• sliderPosition：滑塊的位置，若tracking屬性設置為True，sliderPosition就等於value。
• tracking：sliderPosition是否等同於value，如果tracking設置為True，改變value時也同時改變sliderPosition。
• orientation：Slider或ScollBar的方向，可以設置為水平或垂直。方向參數是枚舉類型Qt.Orientation，其值包括Qt.Orientation(水平方向)，Qt.Vertical(垂直方向)。
• invertedAppearance：顯示方式是否反向，若invertedAppearance設置為False，水平的Slider由左向右數值逐漸增大，否則反過來。
• invertedControls：反向按鍵控制，若invertedControls設置為True，則按下PgUp或PgDn鍵時調整數值的方向相反。

屬於Slider的專有屬性有兩個，分別如下。

1. tickPosition：標尺刻度的顯示位置，使用枚舉類型QSlider.TickPosition，其值包括：

• QSlider.NoTicks（不顯示刻度）
• QSlider.TicksBothSides（標尺兩側都顯示刻度）
• QSlider.TicksAbove（標尺上方顯示刻度）
• QSlider.TicksBelow（標尺下方顯示刻度）
• QSlider.TicksLeft（標尺左側顯示刻度）
• QSlider.TicksRight（標尺右側顯示刻度）

2. tickInterval：標尺刻度的間隔值，若設置為0，會在singleStep和pageStep之間自動選擇。

QSlider和QScollBar最常用的一個信號是valueChanged(int)，在拖動滑塊改變當前值時就會發射這個信號。

在QmyWidget類中定義了一個自定義槽函數do_valueChanged(int)，這個槽函數的功能是根據傳遞來的參數value，設置progressBar的當前值。在構造函數里有兩條connect語句。這是將窗體上slider和scollBar兩個組件的valueChanged(int)信號都與這個自定義槽函數關聯，因為他們的操作響應是完全一樣的。

QProcessBar的父類是QWidget，一般用於進度顯示，常用的屬性有以下幾個：

1. minimum和maximum：最小值和最大值

2. value：當前值

3. textVisible：是否顯示文字，文字一般是百分比表示的進度

4. orientation：可以設置為水平或垂直方向。

5. format：顯示文字的格式，“%p%”顯示百分比，“%v”顯示當前值，“%m”顯示總步數。默認是“%p%”

 

 

額外說一點，關於進度條顏色和百分比位置的部分：

self.ui.progressBar.setStyleSheet("QProgressBar::chunk { background-color: rgb(255, 0, 0)}"
                                          "QProgressBar{text-align: center}")

 

效果：

ok.