PyQt5系列教程（16）：小車快跑（滑塊的使用）

上期我們學習了如何使用單選按鈕（QRadioButton），本期我們介紹一下滑塊的使用（QSlider）。

QSlider簡介

QSlider小部件提供了一個垂直或水平滑塊。

滑塊是控制有界值的經典控制項。它允許用戶沿水平或垂直凹槽移動滑塊手柄，並將手柄的位置轉換為合法範圍內的整數值。

QSlider擁有很少的功能，大部分的功能都在QAbstractSlider中。最有用的函數是setValue()將滑塊直接設置為某個值; triggerAction()模擬點擊的效果（對快捷鍵有用）; setSingleStep()，setPageStep()設置步驟；以及setMinimum()和setMaximum()來定義滾動條的範圍。

QSlider繼承了一套全面的信號：

QSlider只提供整數範圍。請注意，雖然QSlider處理的數量非常大，但用戶很難準確地在很大範圍內使用滑塊。

一個滑塊接受對Tab的焦點，並提供滑鼠滾輪和鍵盤界面。鍵盤介面如下：

• Left/Right 移動水平滑塊一個步長
• Up/Down 移動垂直滑塊一個步長
• PageUp 上移一頁
• PageDown 下移一頁
• Home 移動至起始位置（最小值）
• End 移動至結束位置（最大值）

詳見：QSlider Class | Qt Widgets 5.9

QSlider小例子

今天的小例子的完成效果如下：

還是先來見識一下代碼吧！

from PyQt5.QtWidgets import QWidget, QApplication, QSlider, QLabelnfrom PyQt5.QtCore import Qtnfrom PyQt5.QtGui import QPixmapnimport sysnnclass Example(QWidget):n def __init__(self):n super().__init__()n self.initUI()nn def initUI(self):nn #部分非重要代碼省略...nn self.sld1 = QSlider(Qt.Vertical,self)n self.sld1.setGeometry(30,40,30,100)n self.sld1.setMinimum(0)n self.sld1.setMaximum(99)n self.sld1.setTickPosition(QSlider.TicksLeft)nn self.sld2 = QSlider(Qt.Horizontal,self)n self.sld2.setGeometry(500,350,100,30)n self.sld2.setMinimum(0)n self.sld2.setMaximum(99)nn self.sld1.valueChanged[int].connect(self.changevalue)n self.sld2.valueChanged[int].connect(self.changevalue)nn self.label1 = QLabel(self)n self.label1.setPixmap(QPixmap(01.jpg))n self.label1.setGeometry(80,150,600,180)nn self.label2 = QLabel(滑動塊1當前值: 0 ,self)n self.label2.move(70,70)nn self.label3 = QLabel(滑動塊2當前值: 0 ,self)n self.label3.move(550,390)nn self.show()n n def changevalue(self,value):n sender = self.sender()n if sender == self.sld1:n self.sld2.setValue(value)n else:n self.sld1.setValue(value)n self.label2.setText(滑動塊1當前值:+str(value))n self.label3.setText(滑動塊2當前值:+str(value))n if value == 0:n self.label1.setPixmap(QPixmap(01.jpg))n elif value > 0 and value <= 30:n self.label1.setPixmap(QPixmap(02.jpg))n elif value > 30 and value < 80:n self.label1.setPixmap(QPixmap(03.jpg))n else:n self.label1.setPixmap(QPixmap(04.jpg))n nif __name__ == __main__:n #常規代碼省略...n

在我們的例子中，我們通過拖動滑塊，更改標籤上的圖像，給人以小汽車好像在前進的感覺。

self.sld1 = QSlider(Qt.Vertical,self)nself.sld2 = QSlider(Qt.Horizontal,self)n

這裡我們創建一個水平和垂直的QSlider對象。

self.sld1.setGeometry(30,40,30,100)nself.sld1.setMinimum(0)nself.sld1.setMaximum(99)n

這裡我們指定了滑塊1的大小和位置，同時設置了其能表示的最小值（0）和最大值（99）

self.sld1.setTickPosition(QSlider.TicksLeft)n

這裡我們給滑塊1設定了一個標記位置，需要注意的是滑塊2我們沒有設定標記位置，這樣才能更好的區別。默認是沒有標記位置顯示的。如下圖：

這個刻度線相對於滑塊和用戶操作的位置，它有以下幾種樣式：

self.sld1.valueChanged[int].connect(self.changevalue)nself.sld2.valueChanged[int].connect(self.changevalue)n

我們將valueChanged信號連接到用戶定義的changevalue()方法。

self.label1 = QLabel(self)nself.label1.setPixmap(QPixmap(01.jpg))nself.label1.setGeometry(80,150,600,180)n

我們創建一個QLabel小部件並為其設置一個初始靜態圖像。

def changevalue(self,value):n sender = self.sender()n if sender == self.sld1:n self.sld2.setValue(value)n else:n self.sld1.setValue(value)n self.label2.setText(滑動塊1當前值:+str(value))n self.label3.setText(滑動塊2當前值:+str(value))n if value == 0:n self.label1.setPixmap(QPixmap(01.jpg))n elif value > 0 and value <= 30:n self.label1.setPixmap(QPixmap(02.jpg))n elif value > 30 and value < 80:n self.label1.setPixmap(QPixmap(03.jpg))n else:n self.label1.setPixmap(QPixmap(04.jpg))n

為了實現兩個滑塊的聯動，所以我們判斷拖動了哪個滑塊，然後設置另一個滑塊的值，這樣就實現兩個滑塊的聯動了。如下圖：

滑塊拖動的同時我們會實時顯示當前的滑塊值。

根據滑塊的值，我們將圖像設置為標籤。 在上面的代碼中，如果滑塊等於0，我們將01.JPG圖像設置為標籤。

最後

總體來說，這個程序比較簡單。ok，今天滑塊的介紹暫時就到這裡吧。下期我們再約。

如果你想要本次教程中的相關源碼，請關注微信公眾號：學點編程吧，發送pyqt516，會自動得到相應的百度網盤下載鏈接。