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

此篇文章的範例程式碼 github

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

之前內容的重點複習 (前情提要)

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

【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

系統內建的調色盤 QColorDialog

在 mac, windows, linux 上都會有系統預設的調色盤 QColorDialog,
隨著使用系統不同也會得到不同的調色盤。

而我們今天要藉由這個工具來幫助我們挑選顏色。

建立 UI

替 Qlabel 建立一個 border

我們修改 Qframe 的屬性

這樣我們就能建立一個明確的邊框

關於 Qframe 的屬性，可以參考這邊查詢

延伸閱讀：QFrame类
文內提供的參考圖：

轉換 day23.ui -> UI.py

pyuic5 -x day23.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

• 看看我們製作出來的介面

python UI.py

建立控制 controller.py

設定按鈕、顯示顏色

我們先將 label 內的文字設為 “QColorDialog”，
然後連結 pushButton 至 set_label_color 這個 function

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QColorDialog

from UI import Ui_MainWindow

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.label.setTe