颜色对话框的使用

本节我们将使用颜色对话框来显示调色板，用户可以使用调色板中预定义的颜色，也可以自定义颜色。

本应用程序创建了一个框架，当用户从对话框中选择任一种颜色，就会将此颜色应用到此框架上。除此之外，还会将颜色的16进制值通过一个Label组件显示在窗体上。

本节中，我们将使用QColorDialog类，这是对话框组件类用于显示颜色值。

如何去做...

我们先基于Dialog without Buttons模板创建一个新的应用，步骤如下：

1、拖动一个Push Button组件，一个Frame组件，和一个Label组件放到窗体上。

2、将Push Button的text属性值设置为Choose color。

3、将Push Button 组件的objectName的值设置为pushButtonColor。

4、将Label组件的的objectName设置为labelColor。

6、使用demoColorDialog.ui保存此应用程序。

完成的窗体界面如下所示：

用户界面是采用Qt Designer创建并保存为.ui形式的文件，这是一个XML文件。你可以使用pyuic5工具将此XML文件转换成Python代码。生成的Python脚本为demoColorDialog.py，可以查看本书附带的相关源码。这个demoColorDialog.py脚本文件将作为一个头文件，并导入到另一个Python脚本文件中，并调用显示用户界面。

7、再创建一个Python文件，命名为callColorDialog.pyw，并导入demoColorDialog.py代码：

import sys
from PyQt5.QtWidgets import QDialog, QApplication, QColorDialog
from PyQt5.QtGui import QColor
from demoColorDialog import *

class MyForm(QDialog):
  def __init__(self):
    super().__init__()
    col = QColor(0, 0, 0)
    self.ui = Ui_Dialog()
    self.ui.setupUi(self)
    self.ui.frameColor.setStyleSheet("QWidget { backgroundcolor: %s }" % col.name())
    self.ui.pushButtonColor.clicked.connect(self.dispcolor)
    self.show()

  def dispcolor(self):
    col = QColorDialog.getColor()
    if col.isValid():
     self.ui.frameColor.setStyleSheet("QWidget { backgroundcolor: %s }" % col.name())
    self.ui.labelColor.setText("You have selected the color with code: " + str(col.name()))

if __name__=="__main__":
  app = QApplication(sys.argv)
  w = MyForm()
  w.show()
  sys.exit(app.exec_())

它是如何工作的...

在callColorDialog.pyw文件中，你可以看到push button的click()事件与dispcolor()方法连接的；那就是说，当用户单击Choose Color按钮时，就会调用dispcolor()方法。而dispmessage()方法会调用QColorDialog类中的getColor()方法打开一个对话框显示不同的颜色。不仅可以让用户从对话框中选择预定义的基本颜色，还可以创建一个自定义颜色。在选择好期望的颜色后，当用户单击对话框上的OK按钮后，那么就会通过调用Frame类的setStyleSheet()方法将选择的颜色应到框架上。

运行应用程序，你就会在界面上看到一个按钮，Choose Color，和一个默认为黑色的框架，如下图所示：

单击Choose color按钮，打开颜色对话框，显示基本的颜色如下图所示。颜色对话框也允许你创建自已定义的颜色：

在选择一个颜色后，单击OK按钮，所选择的颜色将会应到这个框架并将颜色的16进制值显示在Label组件上，如下图所示：