如何改电脑界面语言设置界面

这次讲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的宽度被菜单栏的宽度限制，并且设置灰色点边框。

QT开发交流+赀料君羊：714620761

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就够用了）。某些控件的子控件不能独立绘制。一旦一个子控件设置了样式，其他子控件也需要设置。