看完这篇文章你会得到的成果图

前言

我们接下来的讨论，会基於读者已经先读过我 day5 文章 的架构下去进行程序设计
如果还不清楚我程序设计的逻辑 (UI.py、controller.py、start.py 分别在干麻)
建议先阅读 day5 文章後再来阅读此文。

https://www.wongwonggoods.com/python/pyqt5-5/

此篇文章的范例程序码 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day14_slider

UI 设计部份 (UI.py)

今天我们要来实作一个简单的功能，制作可以滑动的滑条
我们在 input Widgets 中找到 Horizontal Slider，将他移进画面中，
另外加入一个 Qlabel 作为显示用。

读者们可以开始自行设计自己的介面罗，以上为我的示范。

转换成 UI.py

一样的编译指令，我们加上 -x (也可不加)，
我们就可以先检视看看转换後的视窗是不是跟我们想像的一样。

转换 day14.ui -> UI.py

pyuic5 -x day14.ui -o UI.py

执行看看 UI.py 画面是否如同我们想像

一样，这程序只有介面 (视觉上的呈现)，没有任何互动功能

• 看看我们制作出来的介面

python UI.py

这样我们的介面就大致出来罗！

controller 设计部份 (controller.py)

从 UI.py 中找出物件名称

这次的功能很简单，只有两个物件

• self.label：显示用的
• self.horizontalSlider：可以拉的滑条

取得名称後，去修改 controller.py

我们继续修改我们 day12 的程序码

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
from PyQt5.QtCore import QThread, pyqtSignal

import time

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.horizontalSlider.valueChanged.connect(self.getslidervalue)

    def getslidervalue(self):        
        self.ui.label.setText(f"{self.ui.horizontalSlider.value()}")
        print(self.ui.horizontalSlider.value())

setup_control() 修改的部份

self.ui.horizontalSlider.valueChanged.connect(self.getslidervalue)

我们一样将 self.horizontalSlider 连结 getslidervalue() 的功能，
等等我们将取得变化後的实作，制作在此处。

记得要多呼叫 valueChanged 这个方法，
我们才能够透过侦测滑动条值的变化，直接同步反应数值的改变到画面上。

getslidervalue() 的部份

我们可以使用 self.ui.horizontalSlider.value() 取得现在滑动条的数值，
而 self.getslidervalue() 已经定义好是有变化才会触发的功能，
所以我们就藉由 self.ui.label.setText() 把对应的数值写进 label 当中。

执行结果

照我们 day5 的程序架构，我们执行

python start.py

(因为我们有写 print，所以在 terminal 中也会同步印出数据，让我们能够观察变化。)

★ 本文也同步发於我的个人网站(会有内容目录与显示各个小节，阅读起来更流畅)：【PyQt5】Day 14 使用 QSlider 制作可拖曳的滑条