网站图片水印,广东省建设网官网,龙岗网站建设价格,平台做推广的技巧进行本篇介绍学习前#xff0c;请先参考链接01_1_Qt工程实践_Qt样式表Qss#xff0c;后再结合本篇进行融合学习如何使用样式表定义界面。 文章目录 1. Qt样式表2. Qt样式表句法2.1 一般句法格式2.2 选择器 (selector)2.3 子控件#xff08;sub-controls#xff09;2.4 伪状…进行本篇介绍学习前请先参考链接01_1_Qt工程实践_Qt样式表Qss后再结合本篇进行融合学习如何使用样式表定义界面。 文章目录 1. Qt样式表2. Qt样式表句法2.1 一般句法格式2.2 选择器 (selector)2.3 子控件sub-controls2.4 伪状态(pseudo-states)2.5 属性 3. 样式表的使用3.1 程序中使用样式表3.2 样式定义的明确性3.3 样式定义的级联性 1. Qt样式表
Qt 样式表 (style sheet)是用于定制用户界面的强有力的机制其概念、术语是受到HTML 中的级联样式表(Cascading Style SheetsCSS)启发而来的只是 Qt 样式表是应用于窗体界面的。
与 HTML 的 CSS 类似Qt的样式表是纯文本的格式定义在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget 类及其子类)的样式从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能使用 Qt 的样式表就可以容易地实现这样的功能。 在 UI设计器中集成了 Qt 样式表的编辑功能。在设计窗时选择窗体或某个界面组件单击鼠标右键在弹出的快捷菜单中选择“Change styleSheet”菜单项就可以出现样式表编辑对话框。
2. Qt样式表句法
2.1 一般句法格式
Qt样式表的句法 (syntax)与HTML的CSS 法几乎完全同。Qt 样式表包含一系列的样式法则一个样式法则由一个选择器(selector)和一些声明(declaration)组成。例如:
QPlainTextEdit{font: 12pt“仿宋;color: rgb(2552550);background-color: rgb(000)
}其中QPlainTextEdit就是选择器表明后面花括号里的样式声明应用于QPlainTextEdit类及其子类。样式声明部分是样式法则列表每个样式法则由属性和值(key-value)组成每条法则用分号结束。每条样式法则由“属性:值”构成例如:
font: 12pt“仿宋;表示 font 属性字体大小为 12pt字体名称为“仿宋”;当一个属性有多个值时多个值用空格隔开。
2.2 选择器 (selector)
Qt样式表支持 CSS2 中定义的所有选择器表 16-1显示的是一些常用的选择器。 这些选择器的定义为选择界面组件提供了灵活性。选择器可以组合使用一个样式声明可以应用于多个选择器例如:
QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{color: rgb(2552550);background-color: rgb(000);
}这个样式声明将同时应用于 QPlainTextEdit、QLineEdit、QPushButton和QCheckBox 的实例。
QLineEdit[readOnly-true] QCheckBox[checked-true]
{ background-color: rgb(25500) }上面的这个样式应用于readOnly 属性为true 的QLineEdit和checked 属性为true的QCheckBox实例功能是使其背景颜色为红色。 在Qt中可以为一个界面组件使用QObject::setProperty()设置一个动态属性例如在数据表编辑界面上一些字段是必填字段就可以为这些字段的关联组件设置一个required 属性为 true如:
editName- setProperty(requiredtrue);
comboSex- setProperty(required”true);
checkAgree- setProperty(reauired,true);这样设置了三个界面组件的动态属性 required 为 true。
那么可以应用下面的样式将这种必填字段的背景颜色设置为亮绿色
*[requiredtrue] {background-color: lime)
2.3 子控件sub-controls
对于一些组合的界面组件需要对其子控件进行选择如 QComboBox 的下拉按钮或QSpinBox 的上、下按钮。通过选择器的子控件可以对这些界面元素进行显示效果控制。例如:
QComboBox::drop-down{ image: url(:/images/images/down.bmp);}
选择器QComboBox:drop-down 选择了 QCombBox 的drop-down 子控件定义的样式是设置其image 属性为资源文件中的图片 down.bmp。
QSpinBox::up-button{ image: url(:/images/images/up.bmp);}
QSpinBox::down-button{ image: url(:/images/images/down.bmp);这两条样式定义语句分别定义了 QSpinBox 的上、下按钮的图片用资源文件中的图片替代了缺省的图片。
Qt 中常用的子控件见表 16-2所有子控件的详细描述见 Qt 的帮助文档
2.4 伪状态(pseudo-states)
选择器可以包含伪状态使得样式法则只能应用于界面组件的某个状态也就是一种条件应用法则。伪状态出现在选择器的后面用一个分号 :隔开。如下面的样式法则:
QLineEdit:hover{background-color: black;color: yellow;
}定义了当鼠标移动到 QLineEdit 上方时 (hover)改变 QLineEdit 的背景色和前景色。
可以对伪状态取反方法是在伪状态前面加一个感叹号 (!)如:
QLineEdit:!read-only{ background-color: rgb(235255251);}
这定义了 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 两种状态下的显示图片。
Qt 样式定义中常见的一些伪状态见表 16-3熟悉这些伪状态并灵活应用可以定义自己想要的界面效果。 2.5 属性
Qt样式表内对每一个选择器可定义多条样式规则每个规则是一个“属性:值”对Qt 样式表中可定义的属性很多可以在Qt 的帮助文件中查找“Qt Style Sheets Reference”查看所有属性的详细说明。
使用样式表可以定义组件复杂的显示效果。每个界面组件都可以用如图 16-7 所示的盒子模型(BoxModel)来表示模型由四个同心矩形表示。
(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 矩形框之内的区域一般使用材质图片设置背景以使界面具有统一的特色例如:
QLineEditQPushButton{border-image: url(:/images/images/border.jpg);}
(4) margin 是 border 之外与父组件之间的空白边距可以分别定义上、下、左、右的边距大小。
缺省的情况下margin、border-width 和 padding 属性缺省值为零这种情况下四个同心矩形就是重合的一个矩形。 使用Qt 样式表可以为界面组件设计各种美观的显示效果美观而特殊的界面不仅需要编程的能力更重要的是美工设计能力。
3. 样式表的使用
3.1 程序中使用样式表
有多种方法可以应用样式表。 第一种是在使用Qt Designer 设计窗体时直接用样式表编辑器为窗体或窗体上的某个部件设计样式表则设计的样式保存在窗体的 ui 文件里窗体创建时会自动应用所设计的样式表。这样设计的样式表对应用程序是固定的无法取得换肤的效果而且需要为每个窗体都设计样式表重复性工作量太大。 第二种是使用 setStyleSheet 函数应用样式使用qApp 的 setStyleSheet()函数可以为应用程序全局设置样式使用QWidget::setStyleSheet()可以为一个窗口、一个对话框或一个界面组件设置样式。例如:
qApp-setStyleSheet(QLineEdit { background-color: gray });
这里使用应用程序全局变量 qApp 为 QLineEdit 设置样式如果应用程序内的某些 QLineEdit组件没有再被设置样式则 QLineEdit 组件的背景色为灰色。
MainWindow-setStyleSheet{ QLineEdit { background-color: lime });
这是为主窗口MainWindow 内的QLineEdit 组件设置样式即背景色为亮绿色
editName-setstyleSheet(color: blue;background-color: yellow;selection-color: yellow;selection-background-color: blue;);这是设置一个 ObjectName 为 editName 的 QLineEdit 组件的样式注意这时在样式表中无需设置selector 名称所设置的样式是应用于editName 这个 QLineEdit 组件的。
**这样将样式表固定在程序中很显然也是无法实现切换界面效果的。为了实现切换界面效果(换肤)的目的一般将样式定义表保存为 qss 后缀的纯文本文件然后在程序中打开文件读取文本内容再调用 setStyleSheet()函数应用样式。**示例代码如下:
QFile file(:/qss/mystyle.qss”);
file.open(QFile::ReadOnly);
QString styleSheet QString::fromLatinl(filereadAll());
qApp-setstyleSheet (styleSheet);3.2 样式定义的明确性
当多条样式法则对一个属性定义了不同值时就会出现冲突例如:
QPushButton#btnSave { color: gray }
QPushButton { color: red }这两条法则都可以应用于ObiectName 为 btnSave 的QPushButton 组件都定义了其前景色,这就会出现冲突。这时选择器的明确性 (specificity) 决定组件适用的样式法则即法则应用于更明确的组件。
在上面的例子中QPushButton#btSave 被认为是比QPushButton 更明确的选择器因为它指向一个对象而不是 QPushButton 的所有实例。所以如果是在一个窗口上应用以上两条法则则 btnSave 按钮的前景色为 gray而其他按钮的前景色为red。
同样具有伪状态的选择器被认为比没有伪状态的选择器明确性更强如:
QPushButton:hover { color: white }
QPushButton { color: red }这样当鼠标在按钮上停留时颜色为 white否则颜色为 red。 如果两个选择器具有相同的明确性则以法则出现的先后顺序为准后出现的法则起作用,例如:
QPushButton:hover { color: white }
QPushButton:enabled { color: red }这里的两个选择器具有相同的明确性所以当鼠标停留在一个使能的按钮上时只有第二条法则起作用。这种情况下如果希望不出现冲突应该修改法则以使其更明确如下面这两条法则是不冲突的。
QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }父子关系的两个类作为选择器时具有相同的明确性例如:
QPushButton { color: red }
QAbstractButton { color: gray }这两个选择器的明确性相同所以只依赖于语句的先后顺序 确定法则的明确性Qt 样式表遵循 CSS2 的规定在设计样式表时应尽量明确并避免冲突情况。
3.3 样式定义的级联性
样式定义可以在 qApp、窗口或一个具体组件中定义任何一个组件的样式是其父组件、父窗口和qApp 的样式的融合。当出现冲突时组件会使用离自己最近的样式定义即按顺序使用组件自己的样式、或父组件的样式定义、或父窗口的样式定义或qApp 的样式定义而不考虑样式选择器的确定性。
例如在QApplication 中设置全局样式: qApp-setStyleSheet(QPushButton { color: red });
那么应用程序中所有未再定义样式的QPushButton 的前景颜色为red。
如果在MainWindow 中再定义样式 MainWindow-setStyleSheet(QPushButton { color: blue }); 则MainWindow 上的按钮的前景色为 blue而不是 red。
如果MainWindow上有一个名称为 btnSave的QPushButton 按钮其定义样式如下:
btnSave-setStyleSheet(color: yellow; background-color: black;); 则按钮 btnSave 按照自己的样式显示前景和背景色。
Qt 样式表功能强大可以设计自己想要的界面效果但是这需要有较好的美工设计基础需要在使用样式表的过程中不断尝试和总结经验。
