zoukankan      html  css  js  c++  java
  • Qt样式表——选择器详解(父子关系,插图详细解释)

    在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法。今天我们来详细了解下样式表中选择器的用法。

    所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用。

    到目前为止,Qt样式表支持CSS2中定义的所有选择器。

    在讲解选择器之前,小豆君先来介绍下Qt对象树的一点概念,后面的分享会详细介绍。

    例如下图,最外层的是QWidget,在QWidget上放置了QFrame,QFrame上又放置了QLabel和QComboBox。那么我们就为这些控件定义了家族关系,若QWidget为父亲,则QFrame为QWidget的儿子,QLabel和QComboBox是QWidget的孙子。

    下面步入正题,新建一个GUI工程QssSelector,基类选择QWidget,类名QssSelector。

    1 类型选择器

    使用控件类名作为选择器

    例如:

    QPushButton{}

    设置QPushButton及其子类的背景颜色为白色。

    在ui中拖入一个QFrame,再拖入一个QLabel和一个QComboBox到QFrame中

    选中QFrame,右键“改变样式表”,输入如下内容

    点击ok

    因为只设置了QFrame的背景颜色,所以QFrame的背景颜色被改变,QLabel是控件树中QFrame的儿子,背景颜色也改变。

    2 通用选择器

    通用选择器使用“*”,匹配所有控件。

    *{color:blue;}

    将刚才的样式表内容改成如下内容:

    点击ok

    所有的控件样式都改变了。

    3 组选择器

    如果想要为多种类型的控件设置同样的样式,则可以使用组选择器,类型之间使用逗号隔开

    点击ok

    为QLabel和QComboBox设置了样式

    4 后代选择器

    有时,用户希望选择器匹配控件树中另一个控件的后代(例如,“匹配由QFrame包含的QComboBox”)。祖先与后代之间用空格隔开。

    QGroupBox QComboBox{}

    QGroupBox是祖先,QComboBox是后代,QComboBox包含在QGroupBox控件中。

    清空ui,在UI中拖入一个QComboBox和一个QGroupBox,再拖入一个QComboBox到QGroupBox中。

    选择最外层的QWidget,改变样式表

    点击ok,运行程序

    设置一般的QComboBox的背景颜色为蓝色,但是被QGroupBox包含的QComboBox背景颜色设置成了橘色。因为QComboBox是QGroupBox的后代。

    注意 后代选择器用空格隔开,组选择器是用逗号隔开。

    5 子选择器

    如果只想设置某个控件的儿子的样式,而不是其所有子孙后代,则可以使用子选择器。父亲与儿子之间用大于号“>”隔开。

    按下图拖入控件,这里的控件树排列顺序为QGroupBox是父亲,QTabWidget和QComboBox1是儿子 QComboBox2是孙子

    选择最外层的QWidget,改变样式表为

    点击ok

    因为QComboBox1是QGroupBox的儿子,所以样式被改变。QComboBox2是QGroupBox的孙子,所以样式不会被改变。

    如果去掉子选择器(>)则变成了后代选择器,两个QComboBox样式都被改变,因为它们都是QGroupBox的后代。

    后代选择器和子选择器的区别相信大家弄清楚了吧。

    6 属性选择器

    属性选择符有四种匹配方式,属性值必须是标识符或字符串:

    属性匹配[att]

    当控件设置“att”属性时匹配,无论该属性的值是多少。

    完全匹配[att = val]

    当控件的“att”属性值完全为“val”时匹配。

    部分值匹配[att ~ = val]

    当控件的“att”属性值是空格分隔的“单词”列表时,其中一个就是“val”时就可匹配。如果使用此选择器,则该值中的单词必须不包含空格(因为它们是由空格分隔的)。

    [att | = val]

    当控件的“att”属性值是一个连字符(“-”)分隔的“单词”列表时,以“val”开头。匹配总是从属性值的开始处开始。

    清空ui,拖入如下控件,其中第二行的QPushButton的flat属性设置为true(使用属性编辑器设置)

    选择最外层的QWidget,右键改变样式表

    点击ok

    重点解释第三行控件,因为

    第一个QLineEdit的属性值为hello,刚好和qss中的属性值相等,所以匹配。

    第二个QLineEdit的属性值为helloworld,hello并不是单词(两边没有空格),与qss中的不相等,所以不匹配。

    第三个QLineEdit的属性值为my hello kity,hello是一个单词(两边有空格),所以匹配。

    再解释下第四行,凡是等于“my”或以“my-”开头的都会匹配。

    7 动态属性选择器

    Qt中的动态属性也可以作为选择器。

    例如,当填写一个表单时,为了向用户表明该字段是强制性的,一个有效的解决方案是使用黄色作为这些字段的背景颜色。

    清空ui,拖入如下控件,QLineEdit分别命名为lineEdit_user, lineEdit_passwd, lineEdit_describe

    在QssSelector的构造函数中输入如下代码

    编译运行程序

    需要用户必须填写的内容就被设置成了黄色背景。

    8 点号类型选择器

    点号选择器类似于属性选择器的“[att~=val]”,例如

    .QPushButton等同于*[class~="QPushButton"]

    9 id选择器

    如果只想为某个单一的控件设置样式,则可以使用id选择器,“#”号后面跟上这个控件的ObjectName即可。

    QPushButton#okButton

    再在之前的ui中拖入两个QPushButton,并修改objectName为okButton和cancelButton

    再在构造函数中,输入如下代码:

    运行程序,指定的ok按钮变成了浅蓝色

    好了,终于写完了,关于选择器的内容全都在这儿了,这些知识已足够大家在项目中使用啦,如果忘记了,直接打开小豆君的文章就行啦,最后多给咱来几个赞吧(〃'▽'〃)。

    更多干货,可关注公众号:小豆君,关注后还可申请加入C++Qt交流群,一起学习。

    https://zhuanlan.zhihu.com/p/34555751

  • 相关阅读:
    几个新角色:数据科学家、数据分析师、数据(算法)工程师
    人类投资经理再也无法击败电脑的时代终将到来了...
    Action Results in Web API 2
    Multiple actions were found that match the request in Web Api
    Routing in ASP.NET Web API
    how to create an asp.net web api project in visual studio 2017
    网站漏洞扫描工具
    How does asp.net web api work?
    asp.net web api history and how does it work?
    What is the difference between a web API and a web service?
  • 原文地址:https://www.cnblogs.com/findumars/p/9231733.html
Copyright © 2011-2022 走看看