跳转至

显示样式

您需要高效学习，找工作？ 点击咨询 报名实战班

点击查看学员就业情况

QSS 概念

点击这里，边看视频讲解，边学习以下内容

前面，我们开发的程序界面有点简陋。

大家点击这里，下载一个白月黑羽实战班学员开发的程序界面代码，解压后，拖动里面的main.ui界面文件到Qt设计师里面。

像这样

image

要让产品更好看一些，通常就是指定界面元素的 显示样式 。比如指定颜色、字体、间距。

像这样

image

Qt有种定义界面显示样式的方法，称之为 Qt Style Sheet ，简称 QSS

如果你学习过Web网页开发，就会发现这个名词和 CSS 特别的相似。

没错，它的 语法和用途 和 CSS 特别的相似。


我们来看上图对应的示例

如果在设计师界面上 最上层的 MainWindow 对象 styleSheet 属性指定如下的内容

QPushButton { 
    color: red ;
    font-size:15px;
}

就会发现，所有的按钮上的文字都变成了红色的，并且字体变大了。

注意这个指定界面元素 显示样式的 语法，由 selector 和 declaration 组成。

花括号前面的 部分，比如示例中的 QPushButton 称之为 selector。

花括号后面的 部分，比如示例中的 

{ 
    color: red ;
    font-size:15px;
}

称之为 Properties （样式属性）

selector 选择器

点击这里，边看视频讲解，边学习以下内容

花括号前面的 部分称之为 selector（中文可以叫 选择器），用来 告诉Qt 哪些特征的元素 是你要设定显示效果的。

比如：QPushButton 选择所有类型为 QPushButton （包括其子类） 的界面元素 。

QSS selector语法 几乎 和 Web CSS 的 selector语法没有什么区别，了解CSS的朋友可以轻松掌握。

具体可以点击这里，参考官方文档中的说明

selector常见语法

Selector 示例 说明
Universal Selector * 星号匹配所有的界面元素
Type Selector QPushButton 选择所有 QPushButton类型 （包括其子类）
Class Selector .QPushButton 选择所有 QPushButton类型 ，但是不包括其子类
ID Selector QPushButton#okButton 选择所有 对象名为 okButton 的QPushButton类型
Property Selector QPushButton[flat="false"] 选择所有 flat 属性值为 false 的 QPushButton类型。
Descendant Selector QDialog QPushButton 选择所有 QDialog 内部 QPushButton类型
Child Selector QDialog > QPushButton 选择所有 QDialog 直接子节点 QPushButton类型

Pseudo-States 伪状态

我们可以这样指定当鼠标移动到一个元素上方的时候，元素的显示样式

QPushButton:hover { color: red }

再比如，指定一个元素是disable状态的显示样式

QPushButton:disabled { color: red }

再比如，指定一个元素是鼠标悬浮，并且处于勾选（checked）状态的显示样式

QCheckBox:hover:checked { color: white }

优先级

如果一个元素的显示样式被多层指定了， 越靠近元素本身 的选择指定，优先级越高

样式属性

点击这里，边看视频讲解，边学习以下内容

QSS的样式属性和网页CSS非常相似。

QSS支持的具体样式，可以点击这里，查看Qt官方文档

我们这里介绍一些常见的样式属性

背景

可以指定某些元素的背景色，像这样

QTextEdit { background-color: yellow }

颜色可以使用红绿蓝数字，像这样

QTextEdit { background-color: #e7d8d8 }


也可以像这样指定背景图片

QTextEdit {
    background-image: url(gg03.png);
}

边框

可以像这样指定边框 border:1px solid #1d649c;

其中

1px 是边框宽度

solid 是边框线为实线， 也可以是 dashed(虚线) 和 dotted（点）

比如

*[myclass=bar2btn]:hover{
    border:1px solid #1d649c;
}


边框可以指定为无边框 border:none

字体、大小、颜色

可以这样指定元素的 文字字体、大小、颜色

*{  
    font-family:微软雅黑;
    font-size:15px;
    color: #1d649c;
}

宽度、高度

可以这样指定元素的 宽度、高度

QPushButton {   
    width:50px;
    height:20px;
}

margin、padding

见下图，根据视频讲解，理解margin、padding 的概念

image


可以这样指定元素的 元素的 margin

QTextEdit {
    margin:10px 11px 12px 13px
}

分别指定了元素的上右下左margin。

也可以使用 margin-top, margin-right, margin-bottom, margin-left 单独指定 元素的上右下左margin

比如

QTextEdit {
    margin:10px 50px;
    padding:10px 50px;
}

写代码设置css

前面的示例都是在Qt设计师软件中设置样式

也可以写代码直接设置样式，

比如，给控件设置背景色

class QMyWidget(QtWidgets.QWidget):

    def __init__(self):
        super().__init__()

        # 给控件设置背景色
        self.setAttribute(Qt.WA_StyledBackground, True)
        self.setStyleSheet("background-color: white")

一个案例

假设你要开发一个YOLO视觉训练检测工具，现在要求界面做成下面这样。 请根据教程 界面布局 和 QSS 技巧，实现该界面。


参考代码和UI设计文件 可以在下面的网盘链接下载

链接：https://pan.quark.cn/s/142a2a37119e


如果还需要 包含 视频文件实时检测 的功能代码, 请将 这个视频（点击打开） 分享到朋友圈， 截屏发微给 byhy44