看完這篇文章你會得到的成果圖
此篇文章的範例程式碼 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.setText("QColorDialog")
self.ui.pushButton.clicked.connect(self.set_label_color)
在 set_label_color()，我們使用 QColorDialog
我們只要呼叫 QColorDialog.getColor()，就會呼叫系統內建的調色盤，
之後我們可以透過
- print(color.name())：會得到 CSS 值 #ff5b87
- print(color.red(), color.green(), color.blue())：會得到 RGB 值 (0~255) # 255 91 135
self.ui.label.setStyleSheet(‘background-color:rgb({});’.format(strRGB))：直接設定背景顏色，需先轉換格式為 strRGB
def set_label_color(self):
color = QColorDialog.getColor() # OpenColorDialog
if color.isValid():
print(color.name()) #ff5b87
print(color.red(), color.green(), color.blue()) # 255 91 135
r, g, b = color.red(), color.green(), color.blue()
strRGB = ('{:^3d}, {:^3d}, {:^3d}'.format(r, g, b))
self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))
mac 上的 QColorDialog
- 系統內建的顏色選擇器，已經做得非常精緻了
選擇好顏色後，填入結果
另外依照我們目前的寫法，我們也可以在 terminal 取得我們填色的 RGB 與 CSS，
之後我們可以使用這個值來繼續做顏色的操作。
