快捷導(dǎo)航

基于PyQt6實(shí)現(xiàn)顏色選擇器小工具

更新時(shí)間：2024年11月21日 08:22:53 作者：一晌小貪歡

這篇文章主要為大家詳細(xì)介紹了如何基于PyQt6實(shí)現(xiàn)顏色選擇器小工具,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

程序流程

1. 界面設(shè)計(jì)

1.1 整體布局

該應(yīng)用程序使用了PyQt6框架構(gòu)建了一個(gè)簡單的顏色選擇器界面。整體布局采用了垂直布局（QVBoxLayout）和水平布局（QHBoxLayout）相結(jié)合的方式，實(shí)現(xiàn)了功能區(qū)與控制區(qū)的合理分布。

功能展示區(qū)：位于界面的上部，通過一個(gè)標(biāo)簽（QLabel）展示了所選顏色的預(yù)覽，并顯示了當(dāng)前顏色的RGB值和十六進(jìn)制值。

控制區(qū)：位于界面的下部，包含三個(gè)旋鈕（QDial）分別用于調(diào)節(jié)紅色、綠色和藍(lán)色的強(qiáng)度值，以及兩個(gè)按鈕（QPushButton），分別用于復(fù)制當(dāng)前顏色的RGB值和十六進(jìn)制值到剪貼板。

1.2 控件設(shè)計(jì)

顏色預(yù)覽標(biāo)簽：通過設(shè)置標(biāo)簽的背景色來實(shí)時(shí)展示用戶選擇的顏色。

旋鈕控件：每個(gè)旋鈕的范圍被設(shè)定為0至255，對(duì)應(yīng)了顏色三文素的最大值。旋鈕下方的小標(biāo)簽用于顯示當(dāng)前旋鈕的值。

按鈕控件：兩個(gè)按鈕分別用于觸發(fā)復(fù)制顏色值到剪貼板的操作。

2. 功能實(shí)現(xiàn)

2.1 顏色值的動(dòng)態(tài)更新

當(dāng)用戶旋轉(zhuǎn)任一旋鈕時(shí)，會(huì)觸發(fā)onDialValueChanged方法。此方法首先更新各旋鈕對(duì)應(yīng)的數(shù)值標(biāo)簽，然后根據(jù)三個(gè)旋鈕的當(dāng)前值重新設(shè)置顏色預(yù)覽標(biāo)簽的背景色，同時(shí)更新顏色值顯示區(qū)域的內(nèi)容。

2.2 復(fù)制顏色值

應(yīng)用程序提供了兩種方式復(fù)制顏色值：

復(fù)制RGB值：點(diǎn)擊“復(fù)制RGB顏色”按鈕時(shí)，會(huì)將當(dāng)前顏色的RGB值以字符串形式復(fù)制到系統(tǒng)剪貼板。

復(fù)制十六進(jìn)制值：點(diǎn)擊“復(fù)制16進(jìn)制顏色”按鈕時(shí)，同樣將顏色值以十六進(jìn)制的形式復(fù)制到剪貼板。

3. 代碼結(jié)構(gòu)

3.1 類定義

MyWidget類繼承自QWidget，是整個(gè)應(yīng)用的核心部分，包含了所有界面元素的初始化及事件處理邏輯。

3.2 初始化方法

在__init__構(gòu)造函數(shù)中，完成了界面元素的創(chuàng)建、布局設(shè)置、信號(hào)槽連接等操作，確保了應(yīng)用程序啟動(dòng)后能夠正確顯示并響應(yīng)用戶的交互。

3.3 事件處理

onDialValueChanged方法負(fù)責(zé)處理旋鈕值變化的事件，實(shí)現(xiàn)了顏色值的動(dòng)態(tài)更新。

on_btn_clicked和on_btn_clicked2方法則分別對(duì)應(yīng)了兩個(gè)按鈕的點(diǎn)擊事件，實(shí)現(xiàn)了顏色值的復(fù)制功能。

完整代碼

import sys
import pyperclip
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QFont, QColor
from PyQt6.QtWidgets import QDialog, QPushButton, QVBoxLayout, QApplication, QWidget, QDial, QLabel, QHBoxLayout


class MyWidget(QWidget):
    def __init__(self, parent=None):
        super(MyWidget, self).__init__(parent)
        self.setWindowTitle("顏色選擇器")
        self.resize(800,400)


        ww_layout = QVBoxLayout(self)

        self.labelColor = QLabel()

        # 設(shè)置標(biāo)簽的背景色
        self.labelColor.setAutoFillBackground(True)
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(255, 0, 0))  # 紅色背景
        self.labelColor.setPalette(palette,)
        self.ltk = QLabel()
        self.ltext = QLabel()
        self.ltext2 = QLabel()
        self.ltext.setText("顏色值RGB：(255, 0, 0)")
        # 添加按鈕
        self.btn = QPushButton("復(fù)制RGB顏色")
        self.btn.clicked.connect(self.on_btn_clicked)
        self.btn.setFixedSize(100, 30)

        self.btn2 = QPushButton("復(fù)制16進(jìn)制顏色")
        self.btn2.clicked.connect(self.on_btn_clicked2)
        self.btn2.setFixedSize(100, 30)

        self.ltext2.setText("顏色值16進(jìn)制：#FF0000")

        textVlayout = QVBoxLayout()
        textVlayout.addWidget(self.labelColor)
        textVlayout.addWidget(self.ltext)
        textVlayout.addWidget(self.ltext2)
        # self.bt 設(shè)置在 x = 200,y = 100
        textVlayout.addWidget(self.btn)
        textVlayout.addWidget(self.btn2)

        # textVlayout.addWidget(self.btn)
        textVlayout.addWidget(self.ltk)



        self.dial = QDial()
        self.dial.setRange(0,255)
        self.dial.setNotchesVisible(True)
        self.dial.valueChanged.connect(self.onDialValueChanged)

        self.lb = QLabel('0', self)
        self.lb.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb.setFont(QFont('Arial Black', 16))

        self.dial2 = QDial()
        self.dial2.setRange(0, 255)
        self.dial2.setNotchesVisible(True)
        self.dial2.valueChanged.connect(self.onDialValueChanged)

        self.lb2 = QLabel('0', self)
        self.lb2.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb2.setFont(QFont('Arial Black', 16))

        self.dial3 = QDial()
        self.dial3.setRange(0, 255)
        self.dial3.setNotchesVisible(True)
        self.dial3.valueChanged.connect(self.onDialValueChanged)

        self.lb3=QLabel('0',self)
        self.lb3.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb3.setFont(QFont('Arial Black',16))

        hlayout = QHBoxLayout(self)

        vlayout = QVBoxLayout(self)
        vlayout.addWidget(self.dial)
        vlayout.addWidget(self.lb)

        vlayout2 = QVBoxLayout(self)
        vlayout2.addWidget(self.dial2)
        vlayout2.addWidget(self.lb2)

        vlayout3 = QVBoxLayout(self)
        vlayout3.addWidget(self.dial3)
        vlayout3.addWidget(self.lb3)

        hlayout.addLayout(vlayout)
        hlayout.addLayout(vlayout2)
        hlayout.addLayout(vlayout3)
        # self.setLayout(hlayout)

        ww_layout.addLayout(textVlayout)
        ww_layout.addLayout(hlayout)
        self.setLayout(ww_layout)

    def onDialValueChanged(self):
        self.lb.setText(str(self.dial.value()))
        self.lb2.setText(str(self.dial2.value()))
        self.lb3.setText(str(self.dial3.value()))
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(self.dial.value(), self.dial2.value(), self.dial3.value()))  # 紅色背景
        self.labelColor.setPalette(palette)
        self.ltext.setText("顏色值RGB：(%s, %s, %s)" % (self.dial.value(), self.dial2.value(), self.dial3.value()))
        self.ltext2.setText("顏色值16進(jìn)制：#%02X%02X%02X" % (self.dial.value(), self.dial2.value(), self.dial3.value()))


    def on_btn_clicked(self):
        # 將RGB顏色值復(fù)制到剪貼板
        pyperclip.copy("顏色值RGB：(%s, %s, %s)" % (self.dial.value(), self.dial2.value(), self.dial3.value()))
        self.ltk.setText("顏色值RGB—復(fù)制成功")

    def on_btn_clicked2(self):
        # 將16進(jìn)制顏色值復(fù)制到剪貼板
        pyperclip.copy("顏色值16進(jìn)制：#%02X%02X%02X" % (self.dial.value(), self.dial2.value(), self.dial3.value()))
        self.ltk.setText("顏色值16進(jìn)制—復(fù)制成功")

if __name__=='__main__':
    app = QApplication(sys.argv)
    w = MyWidget()
    w.show()
    sys.exit(app.exec())