|
使用自定义外观的QStyle方法，工程量很大。对于轻量级应用，我们更倾向于简单的qss. Qt样式表与CSS基本相同，不需要任何的编程基础，唯一需要的就是艺术细胞了。其语法简单： 选择器 辅助控制器[可选] 状态[可选] { 样式属性:样式属性值; } 选择器介绍： 全局对象 * 表示任意窗口部件 类型 QDial 给定类的实例，包括子类 类 .QDial 给定类的实例，不包括子类 标识 QDial#ageDial 给定对象名称的窗口部件 Qt属性 QDial[y="0"] 为某些属性赋值的窗口部件 子对象 QFrame>QDial 给定窗口部件的直接子窗口部件 子孙对象 QFrame QDial 给定窗口部件的子孙窗口部件 例： QFrame#frame>QPushButton[x="0"][y="0"]#okButton: 选择名为okButton的QPushButton，他们的x和y属性值为0，为名为frame的QFrame的直接子对象； *[mandatoryField="true"]： 选择所有属性mandatoryField为true的窗口部件； 部分常用辅助控制器介绍： ::indicator 单选框、复选框、可选菜单项或可选群组项的指示器 ::menu-indicator 按钮的菜单指示器 ::item 菜单、菜单栏或状态栏项 ::up-button 微调框或滚动条的向下按钮 ::down-button 微调框或滚动条的向上按钮 ::up-arrow 微调框、滚动条或标题视图的向上按钮 ::down-arrow 微调框、滚动条或标题视图的向下按钮 ::drop-down 组合框的下拉箭头 ::title 群组框的标题 例: QCheckBox::Indicator{ width=16px;height=16px; } 指定了checkbox指示器的大小 几种常用的状态： :disabled 禁用的窗口部件 :enabled 启用的窗口部件 :focus 窗口部件有输入焦点 :hover 鼠标在窗口部件上悬停 :pressed 鼠标按键点击窗口部件 :checked 按钮已被选中 :unchecked 按钮未被选中 :indeterminate 按钮被部分选中 :open 窗口部件处于打开或扩展的状态 :closed 窗口部件处于关闭或销毁状态 :on 窗口部件的状态是on :off 窗口部件的状态是on 例： QComboBox::drop-down:hover 指定当鼠标在组合框的向下按钮上悬停时的样式 几种通用常用的属性： 颜色相关的属性的值的设定： Color Gradient PaletteRole 其中 Color有四种方式设定： rgb（rgba），hsv（hsva），16进制值#rrggbb，color name； Repeat属性值的设定： 一般来说repeat指定了背景图片在何种方向上重复，有四种选择：repeat-x ，repeat-y ，repeat ，no-repeat Position属性值的设定： top ，bottom ，left ，right ，center 常用连写: 1）background： 等价于background-color，background-image，background-repeat，background-position 2）background-attachment： 背景图片是否随视口滑动 3）background-clip： 确定background在何处绘制，其默认值为border。指定何处的background-color和background-image被clipped 4）background-origin； 其默认值为padding background-origin和background-clip的取值为：margin，border，padding，content 1）margin： 等价于 margin-top, margin-right, margin-bottom, and margin-left. margin与border的区别： margin没有边，没有颜色填充，只有一个width; 2）border： 等价于border-color，border-style，border-width 3）border-top： 等价于border-top-color, border-top-style, and/or border-top-width 同理还有border-left，border-right，border-bottom 4）border-color： 定border 边的颜色（border-top-color....） 5）border-style： 指定border边的风格，取值有dashed，dot-dash，dot-dot-dash，dotted，double，groove，inset，outset，ridge，solid，none（border-top-style...） 6）border-width： 指定border的长度（border-top-width...） 7）border-image： 用于填充border的图片，此图片会被分为9个部分 8）border-radius： border角的半径， 等价于border-top-left-radius,border-top-right-radius,border-bottom-right-radius, border-bottom-left-radius 9）padding： 等价于padding-top, padding-right, padding-bottom, and padding-left. （padding与margin类似） 1）color： 用于渲染文字，默认值为QWidget::foregroundRole 2）gridline-color： QTableView中用于指定grid line的颜色 1）font： 等价于font-family, font-size, font-style, and/or font-weight. 2）font-style： 可能取值为normal，italic，oblique 3）font-weight： normal，bold ，100，200....900 4）text-align 1）position： 可能取值relative，absolute 2）left，right，top，bottom（根据position的取值，移动subcontrol的位置） 1）subcontrol-origin： subcontrol的位置，默认为padding 2）subcontrol-position 1）button-layout： 可能的取值 0 (WinLayout), 1 (MacLayout), 2 (KdeLayout), and 3 (GnomeLayout). 主要用于QdialogButtonBox或者QMessageBox; 2）dialogbuttonbox-buttons-have-icons： 用于QDialogButtonBox决定按钮是否显示图标，1-显示，0-不显示。 最后，设置应用样式表的代码为: widget->setStyleSheet(""); 或： QFile file(":/qss/style.qss"); file.open(QFile::ReadOnly); app.setStyleSheet(file.readAll()); |
|
|
