基于PySide2的颜色选择器与选中颜色可视化实现问题

嘿，这个问题我刚好处理过！用QLabel来做颜色显示方块是个非常合适的选择，毕竟它轻量又容易控制样式。下面我给你拆解具体的实现步骤，再附上完整的代码示例，你可以直接拿去改：

1. 用QLabel作为颜色显示方块 #

• 先创建一个QLabel，给它设置固定宽高（比如80x80），这样它就变成一个规整的方块了。
• 初始可以给它设置一个默认背景色（比如浅灰色），再加上边框，让用户一眼就能认出这是颜色预览区域。

2. 关联颜色选择器与显示方块 #

• 用QColorDialog弹出颜色选择窗口，获取用户选中的颜色值。
• 拿到颜色后，通过两种方式都能更新方块颜色：要么用样式表直接设置背景色，要么用QPixmap绘制纯色图再赋值给QLabel——前者更简单，后者适合需要复杂绘制的场景。

from PySide2.QtWidgets import (QApplication, QWidget, QLabel, QPushButton, 
                               QColorDialog, QVBoxLayout)
from PySide2.QtGui import QColor, QPixmap
from PySide2.QtCore import Qt

class ColorPickerDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()
        
    def init_ui(self):
        self.setWindowTitle('颜色选择器预览')
        self.resize(300, 200)
        
        # 创建颜色显示方块
        self.color_label = QLabel()
        self.color_label.setFixedSize(80, 80)
        # 初始样式：浅灰色背景+灰色边框
        self.color_label.setStyleSheet('background-color: #f0f0f0; border: 1px solid #ccc;')
        
        # 创建选择颜色的按钮
        self.pick_btn = QPushButton('选择颜色')
        self.pick_btn.clicked.connect(self.open_color_dialog)
        
        # 布局排版
        layout = QVBoxLayout()
        layout.addWidget(self.color_label, alignment=Qt.AlignCenter)
        layout.addWidget(self.pick_btn, alignment=Qt.AlignCenter)
        self.setLayout(layout)
        
    def open_color_dialog(self):
        # 获取当前预览的颜色作为对话框初始值
        current_color = QColor(self.color_label.styleSheet().split(':')[1].split(';')[0].strip())
        selected_color = QColorDialog.getColor(current_color, self, '选择颜色')
        
        if selected_color.isValid():
            # 方式1：用样式表更新背景色（简单直接）
            self.color_label.setStyleSheet(f'background-color: {selected_color.name()}; border: 1px solid #ccc;')
            
            # 方式2：用QPixmap绘制纯色图（适合需要更复杂绘制的场景）
            # pixmap = QPixmap(80, 80)
            # pixmap.fill(selected_color)
            # self.color_label.setPixmap(pixmap)

if __name__ == '__main__':
    app = QApplication([])
    demo = ColorPickerDemo()
    demo.show()
    app.exec_()

• 如果你的颜色选择器不是用系统自带的QColorDialog，而是自己搭建的自定义选择器，只需要把获取颜色值的逻辑替换掉，更新color_label的方式是一样的。
• 要是想让方块支持点击直接打开颜色选择器，可以给color_label绑定clicked信号，不用额外加按钮也能操作。

内容的提问来源于stack exchange，提问作者SnowyNe