Qt—样式表（setStyleSheet()）

最新推荐文章于 2024-02-02 13:37:07 发布

明之季

最新推荐文章于 2024-02-02 13:37:07 发布

阅读量1.4w

点赞数 7

分类专栏： Qt 文章标签： qt 样式表 QStyle css

本文链接：https://blog.csdn.net/u011125673/article/details/50157579

版权

Qt 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

内容借鉴于《精通Qt4编程》和《Qt Creator快速入门》以及网上博客等一些资料，刚好自己需要用到这个知识，把Qt的样式表资料整理总结一下。

Qt样式表描述窗口部件外观的机制，类似于HTML的层叠样式表（Cascading Style Sheet，CSS）。样式表在Qt的风格之上起作用（如果使用了样式表，QWidget::style()返回的Qstyle为“style sheet”），提供了比Qpalette更为灵活、更强大的机制。
样式表使用文本描述，可以在应用程序级别和窗口部件级别设置样式表。如果在不同的级别都设置了样式表，则Qt继承所有有效的样式，这就是层叠（cascading）。
1、样式规则（选择符 {声明}）
样式表包含了一系列的样式规则，一个样式规则由一个选择符（selector）和一个声明（declaration）组成。选择符指定了哪些窗口部件受规则影响；声明指定了这个部件上要设置哪些属性。例：
QPushButton { color:red }
在这个样式规则中，QPushButton是选择符，{ color:red }是声明，而color是属性，red是值。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。Qt样式表中一般不区分大小写，例如color、Color、COLOR表示相同的属性。只有类名，对象名和Qt属性名是区分大小写的。一些选择符可以指定相同的声明，只需要使用逗号隔开，例如：
QPushButton, QLineEdit, QComboBox { color:red }
//前景色和背景色的区别：
背景色：把整个画布都用一种颜色填充，画板的底色
前景色：工具如画笔、画刷使用的颜色就是前景色，画笔或画刷描绘的图片的颜色
一个样式规则的声明部分是一些属性：值对组成的列表，它们包含在大括号中，使用分号隔开。例如：
QPushButton { color:red; background-color:white }
2.选择符类型
Qt支持CSS2中所有的选择符，如下图：
这里写图片描述
3、子控件（Sub-Controls）
对一些复杂的部件修改样式，可能需要访问它们的子控件，例如QComboBox的下拉按钮，还有QSpinBox的向上和向下的箭头等。选择符可以包含子控件来对部件的特定子控件应用规则，例如：
QComboBox::drop-down { image:url( dropdown.png ) }
这样的规则可以改变所有的QComboBox部件的下拉按钮。
4、伪状态（Pseudo-States）
选择符可以包含伪状态来表示窗口部件的状态。伪状态出现在选择符之后，用冒号隔离，例如：
QPushButton::hover { color:white }
这个规则表明当鼠标悬停在一个QPushButton部件上时才被应用。伪状态可以使用感叹号来表示否定，例如：要当鼠标没有悬停在一个QRadioButton上时才应用规则，那么这个规则可以写为：
QRadioButton:: !hover { color:red }
伪状态还可以多个连用，达到逻辑与效果。例如：当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则，那么这个规则可以写为：
QCheckBox: hover : checked { color:white }
如果有需要，也可以使用逗号来表示逻辑或操作，例如：
QCheckBox: hover, QCheckBox: checked { color:white }
5、冲突解决
当不同的规则应用到相同的属性时，样式表舅产生了冲突。在这种情况下，特定的规则比通用的规则优先；伪状态比没有伪状态优先；如果级别相同，则最后一个规则优先。冲突解决按照CSS2规则进行。
6、层叠
样式表可以在Qapplication级别设置，也可以在父窗口部件，子窗口部件级别设置。实际应用样式表时，则合并这几个级别的样式。当有冲突时，窗口部件自身的样式优先使用，接下来是父窗口部件，祖先窗口部件，以此类推。
7、盒子模型（The Box Model）
当使用样式表时，每一个部件都看作是拥有4个同心矩形的盒子。这4个矩形分别是内容（content）、填衬（padding）、边框（border）、边距（margin）。边距、边框宽度和填衬等属性的默认值都是0，这样4个矩形恰好重合。如下图：
这里写图片描述
可以使用background-image属性来为部件指定一个背景，默认的background-image只在边框以内的区域进行绘制，这个可以使用background-clip属性来进行更改。可以使用background-repeat和background-origin来控制背景图片的重复方式以及原点。
一个background-image无法随着部件的大小来自动缩放，如果想要背景随着部件的大小变化，那就需要使用border-imgae。如果同时指定了background-image和border-image，那么border-image会绘制在background-image之上。image属性可以用来在border-image之上绘制一个图片。如果使用image指定的图片大小部件的大小不匹配，那么它不会平铺或者拉伸。图片的对齐方式可以使用image-position属性设置。
8、代码例子
设置样式表例子：来源自《Qt Creator快速入门》

/****************主界面背景*******************/
QMainWindow{
        background-image: url(:/image/beijing01.png);/*背景图片*/
}

/****************按钮部件*******************/
QPushButton{
     background-color: rgba(100, 225, 100, 30);/*背景色*/
     border-style: outset; /*边框样式*/
     border-width: 4px;  /*边框宽度为4像素*/
     border-radius: 10px; /*边框圆角半径*/
     border-color: rgba(255, 225, 255, 30);/*边框颜色*/
     font: bold 14px;/*字体*/
         color:rgba(0, 0, 0, 100);/*字体颜色*/
     padding: 6px; /*填衬*/
}

QPushButton:hover{ /*鼠标悬停在按钮上时*/
        background-color:rgba(100,255,100, 100);
        border-color: rgba(255, 225, 255, 200);
        color:rgba(0, 0, 0, 200);
}

QPushButton:pressed { /*按钮被按下时*/
     background-color:rgba(100,255,100, 200);
         border-color: rgba(255, 225, 255, 30);
     border-style: inset;
        color:rgba(0, 0, 0, 100);
}

9、加载样式表文件
使用资源源文件添加到工程

    QFile file(":/qss/my.qss");
    // 只读方式打开该文件
    file.open(QFile::ReadOnly); 
    // 读取文件全部内容，使用tr()函数将其转换为QString类型
    QString styleSheet = tr(file.readAll());
    //QString styleSheet = QLatin1String(file.readAll());   //使用这种方式也可以 
    // 为QApplication设置样式表
    qApp->setStyleSheet(styleSheet); 
    file.close();

//先大概整理这么多，有时间在后续整理