[PyQt5] 基本教學(11) 使用 QColorDialog 調色盤來進行顏色的設定

Last Updated on 2021-04-12 by Clay

最近在開發自己有興趣的專案時，有需要選擇『顏色』的這種需求。本來的想法很單純，想說寫一個簡單的調色盤讓使用者自己去選取顏色，然後我在獲取使用者想要的顏色。

這感覺是可以做得出來的，我以前有使用過 Unity 寫過類似的程式 —— 不過在我蒐集顏色設定的資料時，我偶然看到了一個方便的套件 —— QColorDialog ，貌似是 PyQt5 裡內建的調色盤，有一個自己的圖形化界面，並能回傳使用者選取的顏色。

如果對 PyQt5 的教學有興趣，也可以去看看官方的指南： https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

廢話不多說，我們直接來看段程式碼吧！

QColorDialog 使用方法

使用方法非常單純，首先我們來看段 Sample Code:

# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *


class colorSelector(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('Color Selector')
        self.setGeometry(600, 500, 400, 200)

        # OpenColorDialog
        color = QColorDialog.getColor()
        if color.isValid():
            print(color.name())


if __name__ == '__main__':
    app = QApplication([])
    window = colorSelector()
    window.show()
    sys.exit(app.exec_())

Output:

其中最重要的，便是：

color = QColorDialog.getColor()

這行程式碼。這行程式碼會顯示出上面那個預設的圖形化界面，並且返回使用者選擇的顏色。

比如說我選擇了藍色：

我們的程式便會返回：

#0004ff

我們常使用來表示顏色的數值，除了經典的 RGB 三原色的數值之外，我們也常使用這樣子的 Hex Color Code，寫過網頁的大家想必都不陌生。

我們獲取了使用者選擇的顏色後，就可以開始應用在自己的應用程式當中了！比如說在我想寫的程式裡，選擇顏色是讓使用者可以更換畫筆顏色。

另外，如果對於預設的 QColorDialog 界面不滿意，或者是希望能夠直接作為自己界面的一個元件，可以嘗試繼承 QColorDialog 這個 class 進行改寫。

希望大家都能順利選擇顏色。

Read More

• PyQt5 基本教學 (1) 安裝 PyQt5，印出 Hello World!
• PyQt5 基本教學 (2) QLabel, QLineEdit, QPushButtom
• PyQt5 基本教學 (3) QMainWindow, QIcon, QPixmap, QPalette
• PyQt5 基本教學 (4) 菜單、工具欄
• PyQt5 基本教學 (5) 進度條、滑動條、旋轉鈕
• PyQt5 基本教學 (6) 下拉選單、BoxLayout
• PyQt5 基本教學 (7) hide, show, 自動適應窗口大小
• PyQt5 基本教學 (8) QTimer, QlcdNumber
• PyQt5 基本教學 (9) QCaledar，使用 Python 輕鬆創造日曆元件
• PyQt5 基本教學 (10) 使用鍵盤輸入指令、判斷滑鼠點擊位置
• PyQt5 基本教學 (11) 使用 QColorDialog 調色盤來進行顏色的設定