10-Qt样式表句法

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

16.2.2　Qt样式表句法

1．一般句法格式

Qt样式表的句法（syntax）与HTML的CSS句法几乎完全相同。Qt样式表包含一系列的样式法则，一个样式法则由一个选择器（selector）和一些声明（declaration）组成。例如：

QPlainTextEdit{
    font: 12pt "仿宋";
    color: rgb(255, 255, 0);
    background-color: rgb(0, 0, 0);
}

其中，QPlainTextEdit就是选择器，表明后面花括号里的样式声明应用于QPlainTextEdit类及其子类。样式声明部分是样式法则列表，每个样式法则由属性和值组成，每条法则用分号结束。每条样式法则由“属性：值”构成，例如：

font: 12pt  "仿宋";

表示font属性，字体大小为12pt，字体名称为“仿宋”；当一个属性有多个值时，多个值用空格隔开。

2．选择器（selector）

Qt样式表支持CSS2中定义的所有选择器，表16-1显示的是一些常用的选择器。

表16-1　Qt样式表中的选择器类型

这些选择器的定义为选择界面组件提供了灵活性。选择器可以组合使用，一个样式声明可以应用于多个选择器，例如：

QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{
    color: rgb(255, 255, 0);
    background-color: rgb(0, 0, 0);
}

这个样式声明将同时应用于QPlainTextEdit、QLineEdit、QPushButton和QCheckBox的实例。

QLineEdit[readOnly="true"], QCheckBox[checked="true"]
{ background-color: rgb(255, 0, 0) }

上面的这个样式应用于readOnly属性为true的QLineEdit和checked属性为true的QCheckBox实例，功能是使其背景颜色为红色。

在Qt中，可以为一个界面组件使用QObject::setProperty()设置一个动态属性，例如，在数据表编辑界面上，一些字段是必填字段，就可以为这些字段的关联组件设置一个required属性为true，如：

editName->setProperty("required", "true");
comboSex-> setProperty("required", "true");
checkAgree-> setProperty("required", "true");

这样设置了三个界面组件的动态属性required为true。

那么，可以应用下面的样式将这种必填字段的背景颜色设置为亮绿色。

*[required="true"] {background-color: lime}

3．子控件（sub-controls）

对于一些组合的界面组件，需要对其子控件进行选择，如QComboBox的下拉按钮，或QSpinBox的上、下按钮。通过选择器的子控件可以对这些界面元素进行显示效果控制。例如：

QComboBox::drop-down{ image: url(:/images/images/down.bmp); }

选择器QComboBox::drop-down选择了QComboBox的drop-down子控件，定义的样式是设置其image属性为资源文件中的图片down.bmp。

QSpinBox::up-button{ image: url(:/images/images/up.bmp); }
QSpinBox::down-button{ image: url(:/images/images/down.bmp); }

这两条样式定义语句分别定义了QSpinBox的上、下按钮的图片，用资源文件中的图片替代了缺省的图片。

这样定义的QComboBox和QSpinBox具有如图16-5所示的显示效果。

图16-5　自定义了按钮图片的QComboBox和QSpinBox

Qt中常用的子控件见表16-2，所有子控件的详细描述见Qt的帮助文档。

表16-2　Qt样式表中常见的子控件列表

4．伪状态（pseudo-states）

选择器可以包含伪状态，使得样式法则只能应用于界面组件的某个状态，也就是一种条件应用法则。伪状态出现在选择器的后面，用一个冒号（:）隔开。如下面的样式法则：

QLineEdit:hover{
    background-color: black;
    color: yellow;
}

定义了当鼠标移动到QLineEdit上方时（hover），改变QLineEdit的背景色和前景色。

可以对伪状态取反，方法是在伪状态前面加一个感叹号（!），如：

QLineEdit:!read-only{ background-color: rgb(235, 255, 251); }

这定义了readonly属性为false的QLineEdit的背景色。

伪状态可以串联使用，相当于逻辑与的计算，例如：

QCheckBox:hover:checked{ color: red; }

这定义了当鼠标移动到一个被勾选了的QCheckBox组件上方时，其字体颜色变为红色。

伪状态可以并联使用，相当于逻辑或的计算，例如：

QCheckBox:hover, QCheckBox:checked{ color: red; }

这表示鼠标移动到QCheckBox组件上方，或QCheckBox组件被勾选时，字体颜色变为红色。

子控件也可以使用伪状态，如：

QCheckBox::indicator:checked{ image: url(:/images/images/checked.bmp);}
QCheckBox::indicator:unchecked{image: url(:/images/images/unchecked.bmp);}

这里定义了QCheckBox的indicator在checked和unchecked两种状态下的显示图片，可以得到如图16-6所示的效果。

图16-6　自定义图片作为QCheckBox的指示器

Qt样式定义中常见的一些伪状态见表16-3，熟悉这些伪状态并灵活应用可以定义自己想要的界面效果。

表16-3　Qt样式表中常见的伪状态

5．属性

Qt样式表内对每一个选择器可定义多条样式规则，每个规则是一个“属性：值”对，Qt样式表中可定义的属性很多，可以在Qt的帮助文件中查找“Qt Style Sheets Reference”查看所有属性的详细说明。

在图16-4所示的样式表编辑对话框中，从上方的几个按钮的下拉菜单中可以设计常用的一些属性，如“Add Resource”按钮下三个菜单项可以从项目的资源文件中选择图片作为background- image、border-image或image属性的值；“Add Color”按钮的下拉菜单用于设置组件的各种颜色，包括前景色、背景色、边框颜色等，颜色的值可以用rgb()、rgba()函数表示，或Qt能识别的颜色常量。

使用样式表可以定义组件复杂的显示效果。每个界面组件都可以用如图16-7所示的盒子模型（Box Model）来表示，模型由四个同心矩形表示。

图16-7　组件的盒子模型（来自Qt帮助文件）

（1）content是显示内容矩形区域，如QLineEdit用于显示文字的区域，min-width、max-width、min-height和max-height属性定义最大/最小宽度或高度，就是定义这个矩形区，例如：

QLineEdit{
    min-width:50px;
    max-height:40px;
}

这定义QLineEdit最小宽度为50px，最大高度是40px，其中px是单位，表示像素。

（2）padding是包围content的矩形区域，通过padding属性可以定义padding的宽度，或padding-top、padding-bottom、padding-left和padding-right分别定义padding的上、下、左、右宽度，例如：

QLineEdit{ padding: 0px 10px 0px 10px;}

这设定padding的上、右、下、左的宽度，它等效于：

QLineEdit{
    padding-top:0px;
    padding-right:10px;
    padding-bottom: 0px;
    padding-left:10px;
}

（3）border是包围padding的边框，通过border属性（或border-width、border-style、border-color）可以定义边框的线宽、线型和颜色，也可以分别定义border的上、下、左、右的线宽和颜色。使用border-radius可以定义边框转角的圆弧半径，从而构造具有圆角矩形的编辑或按钮等组件，例如：

QLineEdit{
    border-width: 2px;
    border-style: solid;
    border-color: gray;
    border-radius: 10px;
    padding: 0px 10px; 
}

这使得QLineEdit具有灰色边框线条、圆角矩形的效果。

通过border-radius、min-width和min-height等属性可以设计圆形的按钮，如：

QPushButton {
    border: 2px groove red;
    border-radius: 30px;
    min-width:60px;
    min-height:60px;   }

使得边框转角半径等于content宽度或长度的一半，宽度和长度相等，就可以得到一个圆形的按钮。

使用border-image属性还可以为组件设置背景图片，图片会填充border矩形框之内的区域，一般使用材质图片设置背景，以使界面具有统一的特色，例如：

QLineEdit, QPushButton{border-image: url(:/images/images/border.jpg);}

（4）margin是border之外与父组件之间的空白边距，可以分别定义上、下、左、右的边距大小。

缺省的情况下，margin、border-width和 padding 属性缺省值为零，这种情况下，四个同心矩形就是重合的一个矩形。

使用Qt样式表可以为界面组件设计各种美观的显示效果，美观而特殊的界面不仅需要编程的能力，更重要的是美工设计能力。

Previous 上一篇本节目录 Next 下一篇