【PyQt5-Qt Designer】QSlider滑块

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

效果如下：

参考：

https://zhuanlan.zhihu.com/p/30860668

完整代码：

 from PyQt5.QtWidgets import (QApplication,QWidget,QSlider,QLabel,QGridLayout)
 from PyQt5.QtCore import Qt
 from PyQt5.QtGui import QPixmap
 import sys
 
 class Example(QWidget):
     def __init__(self):
         super(Example, self).__init__()
         self.initUI()
 
     def initUI(self):
         self.setGeometry(300,300,700,300)
         self.setWindowTitle("QSlider滑块")
         gridLayout = QGridLayout()
         self.lb1 = QLabel("滑块1当前值：",self)
         self.lb2 = QLabel(self)
         self.lb2.setPixmap(QPixmap('01.jpg'))
         self.lb3 = QLabel("滑块2当前值：",self)
         self.sld1 = QSlider(Qt.Horizontal,self)
         self.sld2 = QSlider(Qt.Horizontal,self)
         self.sld1.setMinimum(0)
         self.sld1.setMaximum(99)
         self.sld1.setTickPosition(QSlider.TicksLeft)
         self.sld2.setMinimum(0)
         self.sld2.setMaximum(99)
         gridLayout.addWidget(self.lb1,0,0,1,1)
         gridLayout.addWidget(self.sld1,0,1,1,1)
         gridLayout.addWidget(self.lb2,1,0,1,4)
         gridLayout.addWidget(self.sld2,2,1,1,1)
         gridLayout.addWidget(self.lb3, 2,0,1,1)
         self.setLayout(gridLayout)
 
         self.sld1.valueChanged[int].connect(self.changeVal)
         self.sld2.valueChanged[int].connect(self.changeVal)
 
     def changeVal(self, value):
         sender = self.sender()
         if sender == self.sld1:
             self.sld2.setValue(value)
         else:
             self.sld1.setValue(value)
         self.lb1.setText('滑动块1当前值:' + str(value))
         self.lb3.setText('滑动块2当前值:' + str(value))
         if value == 0:
             self.lb2.setPixmap(QPixmap('QSlider/01.jpg'))
         elif value > 0 and value <= 30:
             self.lb2.setPixmap(QPixmap('QSlider/02.jpg'))
         elif value > 30 and value < 80:
             self.lb2.setPixmap(QPixmap('QSlider/03.jpg'))
         else:
             self.lb2.setPixmap(QPixmap('QSlider/04.jpg'))
 
 if __name__ == '__main__':
     app = QApplication(sys.argv)
     ex = Example()
     ex.show()
     sys.exit(app.exec_())

QSlider滑块案例

在我们的例子中，我们通过拖动滑块，更改标签上的图像，给人以小汽车好像在前进的感觉。

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

这里我们创建一个水平和垂直的QSlider对象。

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

这里我们指定了滑块1的大小和位置，同时设置了其能表示的最小值（0）和最大值（99）

self.sld1.setTickPosition(QSlider.TicksLeft)

这里我们给滑块1设定了一个标记位置，需要注意的是滑块2我们没有设定标记位置，这样才能更好的区别。默认是没有标记位置显示的。如下图：

这个刻度线相对于滑块和用户操作的位置，它有以下几种样式：

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

我们将valueChanged信号连接到用户定义的changevalue()方法。

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

我们创建一个QLabel小部件并为其设置一个初始静态图像。

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

为了实现两个滑块的联动，所以我们判断拖动了哪个滑块，然后设置另一个滑块的值，这样就实现两个滑块的联动了。如下图：

滑块拖动的同时我们会实时显示当前的滑块值。

根据滑块的值，我们将图像设置为标签。 在上面的代码中，如果滑块等于0，我们将01.JPG图像设置为标签。

参考：学点编程吧出品/https://zhuanlan.zhihu.com/xdbcb8

代码下载：链接: https://pan.baidu.com/s/12resGLhGpyT5MIt3M_J05A 提取码: yes2