基于深度学习的视觉检测小项目（十）通过样式表改变界面的外观

一、创建色卡模板文件

在PS中打开之前创建的色卡文件，用吸管拾色器吸取各个色卡的色彩值：

并保存为JSON文件，color_card.json，文件保存在项目的/settings目录下：

python">{
    "colors": {
        "RED": "#dc1e1e",
        "RED_LIT": "#ee8f8f",
        "RED_DRK": "#6e0f0f",
        "GRN": "#1edc1e",
        "GRN_LIT": "#8fee8f",
        "GRN_DRK": "#0f6e0f",
        "BLU": "#1e1edc", 
        "BLU_LIT": "#8f8fee", 
        "BLU_DRK": "#0f0f6e", 
        "YEL": "#dcdc00", 
        "YEL_LIT": "#eeee80", 
        "YEL_DRK": "#6e6e00", 
        "ORG": "#cc8400", 
        "ORG_LIT": "#e6c280", 
        "ORG_DRK": "#664200", 
        "GRA": "#a0a0a0", 
        "GRA_LIT": "#eeeeee", 
        "GRA_DRK": "#434343", 
        "WHT": "#ffffff", 
        "BLK": "#000000"
        }
}

二、编辑样式表

样式表的高级操作基础知识：PySide6的样式表的常用高级方法汇总-CSDN博客

首先，在designer界面右侧的对象查看器中可以看到所有的部件的层次从属关系：

然后，根据层次关系，编辑样式表。原则上，样式表只存在于最顶层的部件中，目的有二：一是可以灵活运用类和类型选择器以及后代选择器、子元素选择器对子部件进行批量设置；二是可以在一个地方看到画面全部的样式表代码，方便阅读和编辑。

具体到本画面，先做一个简单的设置demo代码如下：

python">#form_top{background-color: rgb(255, 255, 255);}
#form_top QLabel{background-color: rgb(85, 255, 0);}

这是对form_base的样式表设置，代码的详细解释：

#form_top的含义是针对名为form_top的子部件的设置；background-color: rgb(255, 255, 255)是将背景色设为白色。

#form_top QLabel的含义是针对名为form_top的子部件下的所有QLabel的设置，具体到本例就是label_logo、label_name和label_date；background-color: rgb(85, 255, 0)是将背景色设为绿色。

设置完样式表之后的显示效果：

作为简单应用，在designer中设置样式表就足够用了，也基本用不到色卡文件。作为一个实际的工程软件，需要方便地修改和迁移显示特征、更换色卡文件，如果每更改一个色号都需要在代码中找很多地方，那也太low了。所以，下一期，会用到动态样式表的概念。