➣ Reading Time: 7 minutes

看完這篇文章你會得到的成果圖

前言

我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

此篇文章的範例程式碼 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 中也會同步印出數據,讓我們能夠觀察變化。)

Reference

⭐Python PyQt5 相關文章整理⭐:
⭐基礎知識與架構篇⭐:
1.【PyQt5】Day 1 – 安裝 PyQt,建立自己的第一支 PyQt5 程式
2.【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式
3.【PyQt5】Day 4 – 重要的 Qt 程式邏輯觀念,務必先有此觀念後面才會懂自己在幹嘛
4.【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統
⭐基本介面控制篇⭐:
1.【PyQt5】Day 6 – 我們的第一個 output 手段 – Qlabel
2.【PyQt5】Day 7 – 我們的第一個 input 手段 – QPushButton
3.【PyQt5】Day 8 – 我們的第二個 input 手段 – QLineEdit
4.【PyQt5】Day 9 – 以 QLineEdit, QTextEdit, QPlainTextEdit 作為文字的輸入
5.【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
⭐影像處理篇⭐:
1.【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸,以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
⭐打包程式篇⭐:
1.【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡!
如果喜歡我的文章,請幫我在下方【按五下Like】 (Google, Facebook 免註冊),會由 「LikeCoin」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢」哦!

likecoin-steps