Qt—自定义界面的 Style Sheet

这次讲Qt Style
Sheet(QSS),QSS是一模一样种植和CSS类似的言语,实际上就二者几乎统统等同。既然说到CSS我们尽管时有发生必不可少说一样下盒模型。

1. 盒模型(The Box Model)

以体制中,每一个UI控件都足以抽象成一个盒模型:

C++ 1

盒模型由4个同心矩形组成,从他到内独家是外边距边界内衬内容,大部分UI视觉内容都蕴涵在内容矩形中。默认情况下,前三只矩形的轻重缓急属性都是0,因此就四个矩形都重叠成一个了。这里和前三单轻重相关的习性有:

  • margin:代指异乡距矩形与境界矩形之间的间距。
  • border-width:代指异地距矩形与内衬矩形之间的间距。
  • padding:代指内衬矩形与情矩形之间的间距。

  • QSS(Qt Style Sheet)


QSS与CSS相似,因此此就盖介绍QSS的表征:

  • 子控件:Qt允许我们决定复杂控件的子控件,例如QComboBox的下拉按钮、QCheckBox的勾选框等等。
  • 伪状态:Qt包含部分破例的状态:last、first等。
  • 支撑由定义类的体设置:得力于Qt的处女对象系统,QSS可以本着用户自己定义之好像进行体制设置。
  • 命名空间非常语法:由于C++中的命名控件写法(::)与Q
    的分段控件写法冲突,因此改用--来代表命名空间。
  • Qt属性支持:任何通过Q_PROPERTY定义之习性与Q_ENUM枚举类都足以吃样式化。

  • 打定义样式实例


此我们透过一个示范程序来点QSS,因为实例程序涉及多个控件但我们篇幅有限,我们只是介绍菜单相关的样式设置。菜单分为两有的:菜单栏(QMenuBar)、菜单(QMenu)。

C++ 2

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);
}

C++ 3

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);
}

C++ 4

4. 运作结果

先后的总体运作结果如下:

C++ 5
C++ 6
C++ 7
C++ 8
C++ 9

代码见链接。

5. 总结

优点:

  • 出效率高,使用简便。
  • QSS绘制模式统一(盒模型),一破上多处于下。

缺点:

  • 与CSS一样,某些绘制细节比较复杂,需要尝试。例如QLCDNumber没有文档说明可以采取QSS,但是事实上可以安装border和color,然而hover状态下color属性不中。
  • 制图控件相对比让限制。因为和CSS一样,绘制都是比照既有的规则进行,自然非可知如Qt原生控件那样灵活(但是个人觉得多景用QSS就足够了)。
  • 好几控件的支行控件不克独立绘制。一旦一个子控件设置了体制,其他子控件也急需装。