Qt---自定义界面之 Style Sheet

此次讲Qt Style Sheet（QSS），QSS是一种与CSS相似的语言，实际上这二者几乎彻底同样。既然谈到CSS咱们就有必要说一下盒模型。

1. 盒模型（The Box Model）

在样式中，每个UI控件均可以抽象成一个盒模型：

盒模型由4个同心矩形组成，从外到内分别是外边距、边界、内衬和内容，大部分UI视觉内容都包含在内容矩形中。默认状况下，前三个矩形的大小属性都是0，所以这四个矩形都重叠成一个了。这里与前三个大小相关的属性有：

• margin：代指外边距矩形与边界矩形之间的间距。
• border-width：代指外边距矩形与内衬矩形之间的间距。
• padding：代指内衬矩形与内容矩形之间的间距。

2. QSS（Qt Style Sheet）

QSS与CSS类似，所以这里只大概介绍QSS的特色：

• 子控件：Qt容许咱们控制复杂控件的子控件，例如QComboBox的下拉按钮、QCheckBox的勾选框等等。
• 伪状态：Qt包含一些特殊的状态：last、first等。
• 支持自定义类的样式设置：得力于Qt的元对象系统，QSS能够对用户本身定义的类进行样式设置。
• 命名空间特殊语法：因为C++中的命名控件写法（::）与Q 的子控件写法冲突，所以改用--来表示命名空间。
• Qt属性支持：任何经过Q_PROPERTY定义的属性和Q_ENUM枚举类均可以被样式化。

3. 自定义样式实例

这里咱们经过一个示例程序来接触QSS，由于实例程序涉及多个控件但咱们篇幅有限，咱们只介绍菜单相关的样式设置。菜单分为两部分：菜单栏(QMenuBar)、菜单(QMenu)。

3.1 菜单栏样式

咱们把菜单栏宽度设置成大于等于菜单item的宽度60px（这里的width不指代整个菜单栏的宽度，比较奇怪），防止item的宽度被菜单栏的宽度限制，而且设置灰色点边框。

QMenuBar {
        width:60px;
        background-color:white;
        border:1px dotted gray;

}

item这里代指菜单栏上的每一项菜单，咱们设置边框位groove以使其看起来有凹凸效果；设置margin-right，这样两个item之间会有合适的间隔；咱们还在不一样的状态下设置不一样的背景颜色，这样交互上比较友好。

QMenuBar::item {
    height:15px;
    width:60px;

    background:transparent;
    border:2px groove gray;
    margin-right:1px;
}
QMenuBar::item:selected {
    color:green;
    background-color:rgb(236, 242, 245);
}
QMenuBar::item:pressed {
    color:green;
    background-color:rgb(233, 227, 227);
}

3.2 菜单样式

菜单咱们设置成与菜单栏同样；菜单的item指代每个菜单选项，咱们对其设置合适的margin和padding大小，border、item的selected和pressed状态设置成菜单栏的样式，使其看起来布局空间合理且与菜单栏一致：

QMenu {
    background-color:white;
    border:1px solid rgb(0, 171, 255);
    padding:1px;
}
QMenu::item {

    height:15px;
    width:60px;

    background-color:white;
    margin:1px;

    padding:2px 2px 2px 20px;

    border:2px groove gray;
}
QMenu::item:selected {
    color:green;
    background-color:rgb(236, 242, 245);
}
QMenu::item:pressed {
    color:green;
    background-color:rgb(233, 227, 227);
}

咱们重绘菜单之间的间隔条（separator），简单的用浅蓝色填充1像素高的背景：

QMenu::separator {
    height:1px;
    margin:1px;
    background-color:lightblue;
}

菜单的选中指示框和子菜单咱们用图片来显示，图片选用png格式，保持透明通道，使其与背景一致：

QMenu::indicator:checked {
    width:10px;
    height:10px;
    margin-left:3px;
    border:0px solid blue;
    image:url(:/checked-icon.png);
}
QMenu::right-arrow {
    width:15px;
    height:15px;
    image:url(:/right-arrow.png);
}

4. 运行结果

程序的完整运行结果以下：

代码见连接。

5. 总结

优势：

• 开发效率高，使用简单。
• QSS绘制模式统一（盒模型），一次学习多处使用。

缺点：

• 与CSS同样，某些绘制细节比较复杂，须要尝试。例如QLCDNumber没有文档说明能够应用QSS，可是实际上能够设置border和color，然而hover状态下color属性无论用。
• 绘制控件相对比较受限制。由于同CSS同样，绘制都是按照既有的规则进行，天然不能像Qt原生控件那样灵活（可是我的以为不少场景用QSS就够用了）。
• 某些控件的子控件不能独立绘制。一旦一个子控件设置了样式，其余子控件也须要设置。