QSlider 数值调整滑杆

QSlider 是 PyQt6 里的数值调整滑杆元件，这篇教学会介绍如何在 PyQt6 视窗里加入 QSlider 数值调整滑杆，并实做透过该元件调整数值，进一步将调整的数值显示出来。

快速导览：

• 加入 QSlider 数值调整滑杆
• QSlider 显示设定
• QSlider 加入刻度线
• QSlider 样式设定
• QSlider 常用方法
• 显示数值调整滑杆的数值

因为 Google Colab 不支援 PyQt6，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

加入 QSlider 数值调整滑杆

建立 PyQt6 视窗对象后，透过 QtWidgets.QSlider(widget) 方法，就能在指定的元件中建立数值调整滑杆。

from PyQt6 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

slider = QtWidgets.QSlider(Form)
slider.move(20,20)

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.slider = QtWidgets.QSlider(self)
        self.slider.move(20,20)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

QSlider 格式设定

建立 QSlider 时默认采用“垂直”方式显示，透过 setOrientation(type) 方法可以设定显示方式，type 设定 QtCore.Qt.Orientation.Horizontal 表示水平显示，设定 QtCore.Qt.Orientation.Vertical 表示垂直显示 ( 和 PyQt5 不同 )。

from PyQt6 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

slider_1 = QtWidgets.QSlider(Form)   # 預設垂直
slider_1.move(20,20)

slider_2 = QtWidgets.QSlider(Form)
slider_2.setOrientation(QtCore.Qt.Orientation.Horizontal) # 設定為水平
slider_2.move(50,20)

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.slider_1 = QtWidgets.QSlider(self)   # 預設垂直
        self.slider_1.move(20,20)

        self.slider_2 = QtWidgets.QSlider(self)
        self.slider_2.setOrientation(QtCore.Qt.Orientation.Horizontal)  # 設定為水平
        self.slider_2.move(50,20)


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

QSlider 加入刻度线

使用 setTickPosition(type) 方法可以加入刻度线 ( 设定值与 PyQt5 不同 )，使用 setTickInterval(num) 方法可以设定刻度线间距，下方的程序码执行后，会呈现两个刻度不同的 QSlider ( 默认范围都是 0～100 )。

|type|说明| |--|--|--| |QSlider.TickPosition.TicksAbove|上方加入刻度线。| |QSlider.TickPosition.TicksBelow|下方加入刻度线。| |QSlider.TickPosition.TicksBothSides|两侧 ( 上下或左右 ) 加入刻度线。| |QSlider.TickPosition.TicksLeft|左侧加入刻度线。| |QSlider.TickPosition.TicksRight|右侧加入刻度线。|

from PyQt6 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

slider_1 = QtWidgets.QSlider(Form)
slider_1.move(20,20)
slider_1.setOrientation(QtCore.Qt.Orientation.Horizontal)
slider_1.setTickPosition(slider_1.TickPosition.TicksAbove) # 下方加入刻度線
slider_1.setTickInterval(10)         # 刻度線間距 ( 會有十條刻度線 )

slider_2 = QtWidgets.QSlider(Form)
slider_2.move(20,60)
slider_2.setOrientation(QtCore.Qt.Orientation.Horizontal)
slider_2.setTickPosition(slider_1.TickPosition.TicksBothSides) # 上下都加入刻度線
slider_2.setTickInterval(20)         # 刻度線間距 ( 會有五條刻度線 )

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.slider_1 = QtWidgets.QSlider(self)
        self.slider_1.move(20,20)
        self.slider_1.setOrientation(QtCore.Qt.Orientation.Horizontal)
        self.slider_1.setTickPosition(self.slider_1.TickPosition.TicksAbove) # 下方加入刻度線
        self.slider_1.setTickInterval(10)         # 刻度線間距 ( 會有十條刻度線 )

        self.slider_2 = QtWidgets.QSlider(self)
        self.slider_2.move(20,60)
        self.slider_2.setOrientation(QtCore.Qt.Orientation.Horizontal)
        self.slider_2.setTickPosition(self.slider_1.TickPosition.TicksBothSides) # 上下都加入刻度線
        self.slider_2.setTickInterval(20)         # 刻度線間距 ( 會有五條刻度線 )


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

QSlider 样式设定

透过 setStyleSheet() 方法，可以使用类似网页的 CSS 语法设定 QSlider 样式，下方的程序码执行后，会将 QSlider 更改为黑底线与红色调整杆 ( QSlider::groove:horizontal 表示底线， QSlider::handle:horizontal 表示调整杆，QSlider::sub-page:horizontal 表示调整的颜色)。

from PyQt6 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

slider = QtWidgets.QSlider(Form)
slider.setGeometry(20,20,200,30)
slider.setOrientation(QtCore.Qt.Orientation.Horizontal)
slider.setStyleSheet('''
    QSlider {
        border-radius: 10px;
    }
    QSlider::groove:horizontal {
        height: 5px;
        background: #000;
    }
    QSlider::handle:horizontal{
        background: #f00;
        width: 16px;
        height: 16px;
        margin:-6px 0;
        border-radius:8px;
    }
    QSlider::sub-page:horizontal{
        background:#f90;
    }
''')

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.slider = QtWidgets.QSlider(self)
        self.slider.setGeometry(20,20,200,30)
        self.slider.setOrientation(QtCore.Qt.Orientation.Horizontal)
        self.slider.setStyleSheet('''
            QSlider {
                border-radius: 10px;
            }
            QSlider::groove:horizontal {
                height: 5px;
                background: #000;
            }
            QSlider::handle:horizontal{
                background: #f00;
                width: 16px;
                height: 16px;
                margin:-6px 0;
                border-radius:8px;
            }
            QSlider::sub-page:horizontal{
                background:#f90;
            }
        ''')

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

QSlider 常用方法

下方列出 QSlider 数值调整滑杆的常用方法：

显示数值调整滑杆的数值

运用 valueChanged.connect(fn) 方法，就能在调整时间时，执行特定的函数，下方的程序码执行后，会透过 QLabel 显示调整的数值。

from PyQt6 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

label = QtWidgets.QLabel(Form)
label.setGeometry(20,20,100,30)

def show():
    label.setText(str(slider.value()))

slider = QtWidgets.QSlider(Form)
slider.setGeometry(20,40,100,30)
slider.setRange(0, 100)
slider.setOrientation(QtCore.Qt.Orientation.Horizontal)
slider.valueChanged.connect(show)    # 數值改變時連動對應函式
Form.show()
sys.exit(app.exec())

class 写法 ( 注意不能使用 show 作为方法名称，会覆写基底的 show 方法造成无法显示 )：

from PyQt6 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(20,20,100,30)

        self.slider = QtWidgets.QSlider(self)
        self.slider.setGeometry(20,40,100,30)
        self.slider.setRange(0, 100)
        self.slider.setOrientation(QtCore.Qt.Orientation.Horizontal)
        self.slider.valueChanged.connect(self.showNum)

    def showNum(self):
        self.label.setText(str(self.slider.value()))

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

意见反馈