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

此篇文章的范例程序码 github

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

之前内容的重点复习 (前情提要)

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

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

系统内建的调色盘 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，
之後我们可以使用这个值来继续做颜色的操作。

Reference

• [PyQt5] 基本教学(11) 使用 QColorDialog 调色盘来进行颜色的设定
• PyQt5 – How to add border on QLabel ?

★ 本文也同步发於我的个人网站(会有内容目录与显示各个小节，阅读起来更流畅)：【PyQt5】Day 23 - 使用系统内建的调色盘 QColorDialog，来替我们选择颜色 QColor (Color Picker)