QSlider 數值調整滑桿
QSlider 是 PyQt6 裡的數值調整滑桿元件，這篇教學會介紹如何在 PyQt6 視窗裡加入 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 數值調整滑桿的常用方法：
| 方法 | 參數 | 說明 |
|---|---|---|
| setValue() | int | 設定預設數值。 |
| setInvertedAppearance() | bool | 是否由小到大，預設 False 小到大，True 大到小。 |
| setTickPosition() | type | 設定刻度線位置。 |
| setTickInterval() | int | 設定刻度線間隔。 |
| setRange() | min, max | 設定數值調整範圍。 |
| setMaximum() | int | 設定數值調整的最大值。 |
| setMinimum() | int | 設定數值調整的最小值。 |
| valueChanged.connect() | fn | 數值調整時要執行的函式。 |
| value() | 取得目前調整的數值。 | |
| tickInterval() | 取得目前刻度的間隔。 |
顯示數值調整滑桿的數值
運用 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())
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～