【Python】在 PyQt 中建立滑動條（拉桿）

引入相關模組

以下未提及之模組，可以前往以下文章觀看 :
【Python】使用 PyQt5 建構簡單視窗並顯示 “Hello World”

• QSlider :
  QSlider 是 PyQt 中的一個控件，用來製作滑動條（拉桿），可以讓使用者在一個設定的數值範圍內通過拖動滑塊來選擇數值。
  
  
• PyQt5.QtCore.Qt :
  PyQt 中的一個模組，提供許多基礎的定義、常數，用來設定元件的屬性和行為。例如 Qt.AlignCenter 用來設定內容居中顯示。
  

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSlider
from PyQt5.QtCore import Qt

建立一個世界上最簡單的視窗

# 建立應用程式物件
app = QApplication(sys.argv)

# 建立主視窗
window = QWidget()
window.setWindowTitle("拉桿 Demo")

# 設定視窗大小為 400 x 150
window.resize(400, 150)

# 建立一個垂直佈局管理元件，並與主視窗綁定
layout = QVBoxLayout(window)

建立滑動條（拉桿）

• slider = QSlider(Qt.Horizontal, window) :
  建立一個水平拉桿，Qt.Horizontal 代表水平方向（也可以使用 Qt.Vertical 來變成垂直拉桿）。window 代表這個拉桿屬於哪個視窗。
  
  
• slider.setMinimum(0) :
  設定拉桿的最小值為 0，表示拉桿最左端代表數值 0。
  
  
• slider.setMaximum(100) :
  設定拉桿的最大值為 100，表示拉桿最右端代表數值 100。
  
  
• slider.setValue(50) :
  設定拉桿的初始值為 50，拉桿一開始會停在中間（因為 50 在 0 到 100 之間的中間）。
  
  
• slider.setTickPosition(QSlider.TicksBelow) :
  在拉桿下方顯示刻度（小標記），讓使用者更容易判斷拉桿的位置。
  
  
• slider.setTickInterval(10) :
  設定刻度間隔為 10，表示每隔 10 個單位（0, 10, 20, ... 100）就會有一個小標記。
  
  
• layout.addWidget(slider) :
  將拉桿加入版面配置（layout），這樣拉桿才會顯示在畫面上。
  

# 建立拉桿
slider = QSlider(Qt.Horizontal, window)  # 水平拉桿
slider.setMinimum(0)  # 設定最小值
slider.setMaximum(100)  # 設定最大值
slider.setValue(50)  # 設定初始值
slider.setTickPosition(QSlider.TicksBelow)  # 在拉桿下方顯示刻度
slider.setTickInterval(10)  # 設定刻度間距

layout.addWidget(slider) # 將拉桿加入版面配置（layout），這樣拉桿才會顯示在畫面上。

顯示視窗

# 顯示視窗
window.show()

# 執行應用程式事件迴圈並確保之後 Python 乾淨地結束程式，釋放所有資源。
sys.exit(app.exec_())

當拉桿數值改變時，更新標籤

現在拉桿已經加入，但尚未顯示對應數值。因此，我們應該在拉桿數值變更時，同步更新標籤的顯示內容，使其更加直觀。

完整程式碼

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSlider
from PyQt5.QtCore import Qt

# 建立應用程式物件
app = QApplication(sys.argv)

# 建立主視窗
window = QWidget()
window.setWindowTitle("拉桿 Demo")

# 設定視窗大小為 400 x 150
window.resize(400, 150)

# 建立一個垂直佈局管理元件，並與主視窗綁定
layout = QVBoxLayout(window)

# 建立拉桿
slider = QSlider(Qt.Horizontal, window)  # 水平拉桿
slider.setMinimum(0)  # 設定最小值
slider.setMaximum(100)  # 設定最大值
slider.setValue(50)  # 設定初始值
slider.setTickPosition(QSlider.TicksBelow)  # 在拉桿下方顯示刻度
slider.setTickInterval(10)  # 設定刻度間距
layout.addWidget(slider) # 將拉桿加入版面配置（layout），這樣拉桿才會顯示在畫面上。

# 建立標籤，並與主視窗綁定
label = QLabel("數值: 50", window)
label.setAlignment(Qt.AlignCenter) # 文字置中
layout.addWidget(label)  # 將標籤加入版面配置（layout）。

# 當拉桿數值改變時，更新標籤文字內容
def updateLabel(value):
    label.setText(f"數值: {value}") 

# 監聽拉桿變化
slider.valueChanged.connect(updateLabel)

# 顯示視窗
window.show()

# 執行應用程式事件迴圈並確保之後 Python 乾淨地結束程式，釋放所有資源。
sys.exit(app.exec_())

結語

透過這個範例，學習了如何使用 PyQt5 建立一個包含水平拉桿（QSlider）和標籤（QLabel）的簡單應用程式。透過將拉桿的數值變化與標籤的文字更新連結，實現了即時的互動效果。