Qt样式表
程序员文章站
2022-03-12 21:56:50
什么是QSSQSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。一、名词解释1.选择器选择特定的类，一般为一个可以定制样式表的 Qt 类选择器 {属性 : 值 ;}QPushButton { color: red }2. 辅助控制器辅助控制器 一词是相对于选择器存在的...
什么是QSS
QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。
一、名词解释
1.选择器
选择特定的类，一般为一个可以定制样式表的 Qt 类
选择器 {
属性 : 值 ;
}
QPushButton {
color: red
}
2. 辅助控制器
辅助控制器 一词是相对于选择器存在的，可以理解为我们选择了一个部件，例如一个QCheckBox 这个部件它分为两个部分，文本部分和可以点击的小窗
口的部分。而这个可点击的小窗口部分我们要单独的设置，就要再次分离出来，就需
要::indicator(QCheckBox 有这个辅助控制器)来设置，如下例题：
选择器 :: 辅助控制器{
属性 : 值;
}
QCheckBox::indicator{
width:20px;
height:20px;
}
辅助控制器是用 :: 双冒号进行指定。
如果没有::indicator 那么我们这个小例子将是对整个 QCheckBox 设置的，使用了辅助控制器
的时候就自动分离出这个小窗口，对小窗口进行设置。不同的选择器有不同的辅助控制器
3.状态选择器
除了辅助控制器对一个部件的分离，样式表还可以根据窗口部件的各个状态来设置窗口。
例如 hover 表示鼠标划过时的状态
选择器 : 状态{
属性 : 值 ;
}
QCheckBox:hover{
color: red;
}
例子说明只有当鼠标滑过复选框文本时变为 red
状态是用 : 冒号进行区分每一个状态,状态可以多个一起使用，也可以和辅助控制器一起使用，这样设置窗口部件的时候分的会更加详细。
QCheckBox:hover,QCheckBox:checked{
color:red;
}
/*鼠标滑过和选中状态文本为红色*/
QPushButton::hover{
color:red;
}
4. 属性和值
属性是一个窗口部件所固有的特征、性质，每一个窗口部件都会有属于他们自己的属性。
如前面做的小例子中我们一直未曾提过 color,width,height 等。组合多个属性同时使用设计出
多种效果。
值是属性后面跟随的一组数字，颜色或者是一个 bool 类型等这些我们称它为值，这些值决定了窗口部件的最终的展示效果。
QCheckBox:hover{
color: red;
}
/* color属性 red值*/
5. 逻辑否（！）
有时候我们在设置某种状态的属性时，希望同时在某些非（！）的状态下设置，这个时候
我们就要用（！）来选择某种状态，比如!checked 、!has-children（没有子目录）等等。
QCheckBox:!checked{
color:green;
}
6. 盒模型
这个模式指定了 4 个影响布局的矩形，从而绘制一个自定义的窗口部件。
1.Content rectangle 是最里面的矩形，它绘制窗口部件内容（如文字，图片）的地方。
2.padding rectangle 包围 content rectangle。它负责由 padding 属性指定填充操作。主要是窗口部件内容与边缘线(border)之间的空隙，它可以用 top，right，bottom 和 left 设置它的大小。
3.border rectangle 包围 padding rectangle。它为边界预留空间。可以认为是窗口的外框线。下面讲的分割图形的方法中把 border 当做是一个区域来理解的。ngle 最外面的矩形，他包围 border rectangle，负责指定的边缘空白区域，主要是负责与其他的窗口部件的距离。
如果没有指定他们四个，则默认是四个重合在一起的。
如图：
7. 角弧度
窗口部件四个角弧度。radius 设置角的弧度，如 border-radius:4px;角的弧度是 4px。
8.背景色和前景色
部件的前景色用于绘制窗口部件上面的文本，可以通过 color 属性指定。背景色用于绘制窗口部件的填充矩形，可以通过 background-color 属性指定。背景图片使用 background-image 属性定义，它用于绘制由 background-origin 指定在盒模式中四个区域的图片开始显示的起点位置。背景图片在盒模式域内的对齐和平铺方式可以通过background-position 和 background-repeat 属性指定。如果指定的背景图片具有 alpha 通道（透明效果），通过 background-color 指定的颜色将会透过透明区域。
9.(#)选择指定控件
指定某一个按钮，#号后面是指定类的对象名。
10.优先级问题
当一个属性被具有同一选择器的几个规则设置时，那么只有最后一个规则起作用
11.路径问题
图片无法显示：查看路径是否正确在 Qt 中是”/”代替 window 下的”\”,使用相对路径，本应用程序的相对路径（是相应程序读取这个样式 css 文件），当然你也可以写绝对路径的
方式读取图片，但是路径这个方法是不提倡的。
二、高级用法
1. 九宫格分割法
之所以叫做九宫格分割法是源于，把边界图分为 3X3 的小格，当填充窗口部件时如图 A，4
个角保持不变，如图 B,
其他的 5 个格子被拉伸或者平铺填充可用的空间。
使用 border-image 属性可以指定各个边界图，他要求指定一个图像文件名和定义 9 个格子的4 条“切线”。切线用到上、右、下和左边缘的距离定义。Border.png 作为边界图，距离上、右、下和左的切线为 4、8、12 和 16 应该如下定义：border-image：url（boder.png） 4 8 12 16;
但使用边界图时，必须显示地设置 border-image 属性。一般情况下，border-width 应该与切线的位置一致；否则，为了与 border-width 相符合，角上的格子将被拉伸或者缩短。对border.png 应该这样设置指定他的四个边框的宽度： border-width: 4px 8px 12px 16px;
这样才能把刚才切割的四个角的图片完全的放置到 border 中当做 border 区域的背景。
2. 渐变器
Qt 支持三种渐变器
1.线性渐变（qlineargradient）：连接这两点的线上有一系列的颜色断点。两个控制点之间的不同位置指定不同的颜色。位置用 0 和 1 之间的浮点数来确定，0 对应着第一个控制点，1对应着第二个控制点。两个指定断点之间的颜色由线性插值得出。
2.辐射渐变（qradialgradient）：有一个中心点（xn，yn），半径 r，一个焦点（xf，yf）以及颜色断点定义。中心点和半径定义一个圆。颜色从焦点向外扩散，焦点可以是中心点或者圆内的其它点。
3.梯形渐变（qconicalgradient）：由一个中心点（xn，yn）和一个角度 a 定义。颜色在中心点周围像钟表的秒针扫过一样扩散。
三、样式表参照表
1. 样式选择器类型表
| 选择器 | 实例 | 可以匹配的窗口部件 |
|---|---|---|
| 全局对象 | * | 对全局的任意窗口部件 |
| 类型 | QDial | 给定类的实例，包括这个类的子类 |
| 类 | .QDial | 给定类的实例，不包括子类 |
| 标识 | QDial#ageDial | 给定对象名称的窗口(ageDial 表示对象的名字，在代码中可知) |
| Qt 属性 | QDial[y=”0”] | 为某些属性赋值的窗口，表示当 Y（属性）为 0（false）或者为 1 （true）的时候 |
| 子对象 | QFrame > QDial | 给定窗口部件的直接子类 |
| 子孙对象 | QFrame QDial | 给定窗口部件的子孙窗口部件 |
2. 可以应用样式表的窗口部件表 = 选择器
| 部件 | 可应用的样式 |
|---|---|
| QAbstractScrollArea | 1.支持盒模型。 2. 所 有 QAbstractScrollArea （ QAbstractltemView 、QGraphicsView 、QMdiArea 、 QPlainTextEdit 、 QScrollArea 、QTextEdit）的派生类，包括 QTextEdit 和 QAbstractItemView(带item 的类)，用 background-attachment 属性支持背景可滚动的，设置 background-attachment 属 性 为fixed 则 提 供 一 个background-image 背 景 图 片 不 跟 随 滚 动 条 滚 动 ， 反 则 设 置background-attachment 属性为 scroll 则是背景图片可以跟随滚动条滚动。 |
| QCheckBox | 1.支持盒模型 2.可以用 ::indicator 辅助控制器设置 check 指示符(一个可以选择的小方块)，默认时，check 指示符放置在部件矩形内容的左上角处 3.spacing 属性指定 check 指示符和文本(右侧的描述文字)的距离。 |
| QColumnView | 1. 可 以 被 image 属 性 控 制 样 式 ， arrow( 箭 头 ) 指 示 符 可 以被 ::left-arrow 和 ::right-arrow 辅助控制器样式控制。 |
| QComboBox | 1.支持盒模型。 2.下拉按钮(drop-down button)样式可以被 ::drop-down 辅助控制器设置，默认情况下，下拉按钮填充矩形部件的右上侧，下拉按钮的箭头标记(arrow mark)通过样式 ::down-arrow 辅助控制器控制。默认的情况下，箭头是位于下拉按钮的中间位置。 |
| QDateEdit | |
| QDateTimeEdit | |
| QDialog | 1.只支持 background、background-clip 和 background-origin 属性。 Warning：确保我们定义了宏 Q_OBJECT 在我们定制的部件里。 |
| QDockWidget | 1.当浮动窗口停靠的时候，支持标题栏和标题栏按钮。 2.border 属性可以控制浮动窗口的边框。 3.::title 辅助控制器可以定制标题栏样式。 4.::title 辅助控制器上的 ::close-button 控制浮动窗口关闭按钮属性，float-button 浮动控制按钮。 5.当标题栏可视的时候，:vertical 状态被设置，当然这个状态取决 于 浮 动 窗 口 的 3 种 状 态 设 置 。 即 :floatable 、 :closable和 :movable 状态。 6.Note：用 QMinWindow::separator 去设计大小处理。 7.Warning：设置的样式不能应用于未停靠的窗口上。 |
| QFrame | 1.支持盒模式。 2.自 Qt 版本 4.3 开始，在 QLabel 上设置一个样式表将自动设置QFrame::frameStyle 属性到 QFrame::StyledPanel。 |
| QGroupBox | 1.支持盒模式。 2.::title 辅助控制器设置标题样式（图片中“GroupBox”字样）。默认的情况下，标题位置取决于 QGroupBox::textAlignment. 3.在可点击选择的情况下，标题包含 check 指示符用 ::indicator辅助控制器设置。 4.Spacing 属性是控制 check 指示符与文本描述的空间。 |
| QHeaderView | 1.支持盒模式。 2.::section 辅助控制器设置标题视图，section 辅助控制器支持 :middle 、 :first 、 :last 、 :only-one 、next-selected、:previous-selected、:selected 和 :checked状态。 3.::up-arrow 和 ::down-arrow 设置排序的样式。 |
| QLabel | 1.支持盒模式。 2.不支持鼠标悬停状态(鼠标经过的时候)。 3.自 Qt 版本 4.3 开始，在 QLabel 上设置一个样式表将自动设置QFrame::frameStyle 属性到 QFrame::StyledPanel。 4.具体看例：（QLabel 类继承自 QFrame）。 |
| QLineEdit | 1.支持盒模式。 2.selection-color 和 selection-background-color 分别设置选择时的背景颜色和和前景色。 3.lineedit-password-character 的属性设置密码类型。 |
| QListView | 1.支持盒模式。 2.当 表 格 交 替 颜 色 是 可 以 选 择 的 ， 表 格 交 替 颜 色 设 置 用alternate-background-color 属性设置。 3.选择的颜色 selection-color 和 selection-background-color控制选择颜色和选择的背景颜色。 4.show-decoration-selected 属性控制选择行为。 5.::item 更加细致的控制 QListView 的 items。 |
| QMainWindow（主窗口） | 1.支持样式分割器。 2.在 QMainWindow 用分割器时，QDockWidget 用::separator 辅助控制器来设置样式。 |
| QMenu（菜单） | 1.支持盒模式。 2.::item 辅助控制器设置每一个 items，除此之外还支持状态如 :selected、:default、:exclusive 和 non-exclusive 状态。 3.::indicator 辅助控制器设置菜单的可点击的属性。 4.菜单分隔风格样式由::separator 辅助控制器设置。 5.right-arrow 和 left-arrow 设置子目录箭头是向右还是向左。 6.::scroller 设置滚动条。 7.::tearoff 设置 tear-off（拆卸下来成为独立的窗口） |
| QMenuBar（菜单栏） | 1.支持盒模式。 2.spacing 属性设置两个 item 的距离。 3.::item 辅助控制器控制每一个 items 的样式。 |
| QMssageBox（弹出来的报告错处，提示的对话框） | Messagebox-text-interaction-flags 属性用来修改消息框中的文本 |
| QProgressBar | 1.支持盒模式。 2.::chunk 辅助控制器设置块状结构样式(进度条里面的颜色设置可能是一段一段的)的进度。条块是显示在盒模时的 content 中。 3.进度条中如果显示文字，text-align 属性设置进度条中文字位置。 4.:indeterminate 不确定状态设置。 |
| QPushButton | 1.支持盒模式。 2.:default、:flat(外框是否突起)、:checked 状态。 3.当按钮在菜单栏里时，用::menuindicator 辅助控制器设置菜单栏的风格。 4.用:open 和 :closed 定制是否可点击的按钮。 5.例如：QPushButton{background-color：red；border：none；} |
| QRadioButton | 1.支持盒模式。 2.可以用 ::indicator 辅助控制器设置 check 指示符(一个可以选择的小圆圈)，默认时check 指示符放置在矩形内容的左边。 3.spacing 属性指定 check 指示符和文本(右侧的描述文字)的距离。 |
| QScrollBar | 1.支持盒模式。 2.控件上盒模式横纵的 content 的内容依赖于槽上的滑动器（hangle）的移动。 3.QScrollBar 的范围（长或者宽由 scroll 的方向确定）由 width和 height 设置，用:horizontal 和:vertical 设置方向。 4.::handle(句柄)辅助控制器宽或者高（设置 min-width 或者min-height）的最小宽度和最小高度，取决于它的方向。 5.::add-line 设 置 添 加 内 容 的 按 钮 样 式 。 依 赖 于 箭 头 的 方向。::right-arrow 和::down-arrow,箭头默认是在 add-line 的盒模式 contents 的中间位置。 6.::sub-line 设 置 减 少 内 容 的 按 钮 样 式 。 ::left-arrow和::up-arrow，箭头在按钮的中间位置。 7.::sub-page 减少页和 add-page 增加页。 |
| QSizeGrip(通过它可以改变它所在*窗口的大小，在*窗口的右下角) | 1.支持 width、height、image 属性。 |
| QSlider | 1.支持盒模式。 2.对于横向，min-width 和 height 属性必须提供。 3.对于纵向，min-height 和 width 属性必须提供。 4.::groove 设置槽，一般情况下槽是默认在盒模式的 content 中，控件可以滑动的 handle(句柄)用::handle 辅助控制器设置。句柄在槽上移动，在盒模式中的 content。 |
| QSpinBox | 1.支持盒模式。 2.::up-button 和 up-arrow 控制上面的按钮和按钮上箭头。 3.::down-button 和 down-arrow 控制下面的按钮和按钮上的箭头。默认箭头在按钮的中间位置。 |
| QSplitter(界面分离器) | 一个界面被分为两个1.支持盒模式。 2.::handle 设置分割器可移动句柄 handle。 |
| QStatusBar（状态栏） | 1.只有 background 属性起作用，每一个 items 用::items 设置。 |
| QTabBar | 1.每一个 tab 页用::tab 设置样式，关闭用 ::close-button,tab页支持 only-one、:fist、:last、:middle、:privious-selected、:next-seleced、:selected 状态。 2.:top、:left、:right、:bottom 状态取决于 tabs 在部件的方向。 3.选择重叠 tabs 状态（这个状态时表示在很多 tab 的时候，点击一个 tab 页为当前显示时，就表示这个 tab 突出覆盖了左右 tab 的 n个 px）是利用负 margins（盒模式中的 margin）或者是相对位置来控制。 4.当 tab 很多个的时候，有时候 tabbar 不能把它完全显示出来，就会在 tabbar 上显示可以左右调节 tab 页的按钮，这个按钮为QToolButton，定制这个 QToolButton 的宽度用::scroller 辅助控制器定制 。 5.::tear 定制 tear 指示器的样式。6.QTabBar 的 tab 方向用 alignment（top |
| QTabWidget | 1.用::pane 设置页面的外框。 2.::left-corner 和 ::right-corner 设置左侧角落和右侧角落。 3.它的 tab 位置通常用::tab-bar 设置，默认是 QWindowsStyle 的风格。 4.:top, :left, :right, :bottom 选择 tab 上、左、下和右的方位。 |
| QTableView | 1.支持盒模式。 2.alternating row colors 可 用 的 时 候 我 们 可 以 使 用 属 性alternate-background-color 控制交替的表格背景颜色。 3.selection-color 和 selection-background-color 属性设置选择 item 的前景颜色和背景颜色。 4.在 QTableView 中控件可以作为一个 QAbstractButton 和可以用QTableView QTableCornerButton::section 设置样式。 5.表格颜色 gridline-color。 6.参看 QAbsractScrollArea 设置背景 backgrounds。 |
| QTextEdit（一个文本编辑器） | 1.支持盒模式。 2.selection-color 和 selection-background-color 决定它的文本颜色和背景颜色。 |
| QToolBar（工具栏） | 1.支持盒模式。 2.:top, :left, :right, :bottom 工具栏的位置，是在主窗口的上，左，右，下状态设置属性。 3.:first, :last, :middle, :only-one 选择了工具栏中第一组按钮。 4.工具栏的分隔符是由::separator 控制。 5.可以控制工具栏可移动::handle 选择器选择它并改变样式。 |
| QToolButton（工具栏按钮） | 1.支持盒模式。 2.如果 QToolBox 有一个菜单，::menu-indicator 来选择它的指示符（就是可以移动工具栏的句柄，可以参考 WPS 的新建工具栏）。 3. 当 QToolBar 在 QToolButton::MenuButtonPopup 模 式下，::menu-button 控制这个菜单按钮，::menu-arrow 是控制这个按钮的箭头，默认的情况下会放置在按钮上 content 位置 4.当 QToolBar 显示箭头时候::up-arrow, ::down-arrow,::left-arrow and ::right-arrow 可以被用到。 |
| QToolBox | 1.支持盒模式。 2.::tab辅助控制器设置tab，tab支持:only-one、:first、:、last:、middle:、previous-selected:next-selected、:selected 状态。如同好友 QQ 模式 |
| QToolTip（ 鼠标 划过 时的 提示语） | 1.支持盒模式。 2.支持 opacity（不透明）属性。（QToolTip 类继承自 QFrame） |
| QTreeView | 1.支持盒模式。 2.当 alternating row colors（行交替着不同的颜色） 是可用的时候，可以通过 alternate-background-color 属性设置它交替颜色。 3.selection-color 属性和 selection-background-color 属性设置选择 item 的前景颜色和背景颜色。 4.show-decoration-selected 设置选择行为属性。 5.分支辅助控制器::branch 支持:open, :closed, :has-siblingand :has-children 状态。 6.::item 辅助控制器更详细的控制 QTreeView 的 items。 |
| QWidget | 1.只支持 background, background-clip 和 background-origin属性。 2.如果你的类是QWidget的子类，你需要重写paintEvent函数如下： void CustomWidget::paintEvent(QPaintEvent *){ QStyleOption opt;opt.init(this);QPainter p(this);style()->drawPrimitive(QStyle::PE_Widget, &opt, &p,this); } /如果没有样式表设置，那么它是什么作用都不起的/ |
3. 辅助控制器列表
| 辅助控制器 | 说明 |
|---|---|
| ::add-line | 在 QScrollBar 中添加一行的按钮。 |
| ::add-page | 在 QScrollBar 中添加页的按钮。 |
| ::branch | QTreeView 的分支。 |
| ::chunk | QProgressBar 的进度条里的块（里面的进度条可以变成一块一块的增加，而不是整体都是一种颜色）。 |
| ::colse-button | QDockWidget 和 QTabBar 标题栏上的关闭按钮。 |
| ::corner | 在 QAbstractScrollArea 两个滚动条之间的位置。 |
| ::drwn-arrow | QComboBox、QHeaderView(排序时需要)、QScrollBar、QSpinBox 的向下箭头。 |
| ::down-button | QScrollBar、QSpinBox 的向下按钮。 |
| ::drop-down | QComboBox 展开时。 |
| ::float-button | QDockWidget 标题栏上的浮动按钮。 |
| ::groove | QSlider 的槽。 |
| ::indicator | QAbstractitemView、QCheckBox、QRadioButton、可点击的 QMenu 的item、可点击的 QGroupBox 的指示符。 |
| ::handle | QScrollBar、QSplitter、QSlider 的滑块。 |
| ::icon | QAbstractitemView 和 QMenu 的图标。 |
| ::item | QAbstractitemView、QMenuBar、QMenu、QStatusBar 的单独的一项。 |
| ::left-arrow | QScrollBar 的向左的箭头。 |
| ::left-corner | QTabWidget 的左侧。 |
| ::menu-arrow | 菜单里 QToolButton 箭头。 |
| ::menu-button | 工具栏上的按钮。 |
| ::menu-indicator | 菜单里的 QPushButton 指示符。 |
| ::right–arrow | QMenu 或者是 QScrollBar 的右侧箭头。 |
| ::pane | QTabWidget 去掉标题的框架。 |
| ::right-corner | QTabWidget 的右侧。 |
| ::scroller | QMenu 和 QTabBar 因为界面大小布局左右调试的滚动按钮。 |
| ::section | QHeaderView 的表头横向和纵向。 |
| ::separator | QMainWindow 和 QMenu 的分离器（就是一个主窗口被分割成几个小的区域的线，QMenu 里是 item 的分离线）。 |
| ::sub-line | QScrollBar 内容减少方向的按钮。 |
| ::sub-page | QScrollBar 减少一页的按钮，在滑块与减少一行 sub-line 之间。 |
| ::tab | QTabBar 和 QToolBox 的一个页选项。 |
| ::tab-bar | 一个 QTabWidget 的 tab 按钮，设置 tabs 一般用::tab。 |
| ::tear | TabBar 的指示符 |
| ::tearoff | QMenu 的指示符 Warning：确保我们定义了宏 Q_OBJECT 在我们定制的部件里。 |
| ::text | QAbstractitemView 的内容。 |
| ::title | QGroupBox 和 QDockWidget 的标题。 |
| ::up-arrow | QHeaderView（排序时）、QScrollBar、QSpinBox 向上按钮箭头。 |
| ::up-button | QSpinBox 的向上按钮。 |
4 状态列表
| 状态 | 说明 |
|---|---|
| :active | 当前活动的窗口。 |
| :adjoins-item | QTreeView 的一个 branch 存在毗邻下一个与自己不是兄弟项目的项。 |
| :alternate | 当 QAstractitemView 的 QAstractitemView ： ：alternatingRowColors()的属性设置为 true 时，行之间背景颜色交替颜色变化， |
| :bottom | 在 item 的下面，例如 QTabBar 的 tab 按钮在下面。 |
| :checked | 按钮已选中。 |
| :closable | items 是可以关闭的，例如 QDockWidget 有一个 QDockWidget：：DockWidgetClosable 的功能。 |
| :closed | （open 相对的）窗口位于关闭或者销毁的状态，例如 QTreeView 没有打开时的状态 |
| :default | 默认的状态。 |
| :disabled | 禁用窗口部件 |
| :editabled | QComboBox 可以编辑的 |
| :edit-focus | 那种可编辑的控件，比如文本框，当它正在编辑的时候，就是QStyle::State_HasEditFocus 状态。 |
| :enabled | 启用窗口部件。 |
| :exclusive | 表示按钮组设置为单选，只能选择一个的状态。例如菜单栏的选项。 |
| :first | 部件的第一个，例如 QTabBar 的第一个 tab |
| :flat | 没有突起的部件。 |
| :floatable | 部件是可浮动，例如 QDockWidget。 |
| :focus | 窗口部件有输入焦点。 |
| :has-children | Item 有子目录的，例如 QTreeView。 |
| :has-siblings | 有兄弟目录的，例如 QTreeView。 |
| :horizontal | 部件是横向的。 |
| :hover | 鼠标划过窗口部件时的状态。 |
| :indeterminate | 按钮部分被选中的状态。 |
| :last | 最后一个，例如：QTabBar 的最后一个 tab。 |
| :left | 位于左面，例如 QTabBar 的 tab 位于左面的那个。 |
| :maximized | 最大化状态。 |
| :middle | 在列表中中间位置，例如 QTabBar 的 tab 不是最后一个也不是第一个的。 |
| :minimized | 最小化的时候。 |
| :movable | 这个部件可以移动，例如 QDockWidget。 |
| :no-frame | 这个部件是没有 frame 的，例如 QLineEdit 和 QSpinBox。 |
| :non-exclusive | 不能单选的，菜单来就是单选的。 |
| :off | 前提是这个部件是可以选或者不选的，与 on 相对，窗口部件是“off”状态。 |
| :on | 前提是这个部件是可以选或者不选的，与 off 相对，窗口部件是“on”状态。 |
| :only-on | 只有一个，例如 QTabBar 只有一个 tab 的时候。 |
| :open | 窗口部件位于打开或者是展开的状态，如 QTreeView，QComboBox 和QPushButton 在 menu 时的打开状态。 |
| :next-selected | 选择下一个的时候，在列表中，例如 QTabBar。 |
| :pressed | 鼠标按键点击窗口部件 |
| :previous-selected | 选择上一个，例如 QTabBar。 |
| :read-only | 部件是只读的，例如 QLineEdit,和 QComboBox 的编辑窗口为不可编辑时。 |
| :right | 部件位置的右侧，QTabBar 的 tab 可以位于右侧。 |
| :selected | 被选择的，例如 QTabWidget 被选择的 tab 页或者是 QMenu 下拉菜单被选择的某一个条目。 |
| :top | 位于部件的上面，例如 QTabBar 的 tab 可以位于上面，也可以在下面一样。 |
| :unchecked | 按钮未被选中的。 |
| :vertical | 垂直的方向。 |
| :window | 这个部件是一个窗口。 |
5. 属性列表
| 属性 | 值 | 说明 |
|---|---|---|
| alternate-background-color | Brush | 表 示 交 替 论 表 格 颜 色 的 属 性 ， 它 应 用 于QAbatractitemView 的子类如果你不设置这个颜色值，它会有一个默认的值备用。QTreeView {alternate-background-color: blue;background: yellow;} |
| background | Background | 简 单 的 设 置 背 景 颜 色 ， 等 价 于backgroun-color,background-image,background-repeat 或者 backgroun-position这个属性支持 QAbstractitemView 的子类，子类包 括 （ QAbstractSpinBox 子类 ,QCheckBox,QDialog,QFrame,QGroupBox,QLabel,QLineEdit,QMenu,QMenuBar,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,和 plain 的 QWidgets） |
| background-color | Brush | 用于部件的背景颜色。 QLabel{ background-color: yellow } QLineEdit{background-color:rgb(255, 0,0) } |
| background-image | Url | 用于部件的背景图片，可以用 background-color的般透明度给图片加效果。 QFrame {background-image:url(:/images/hydro.png)} |
| background-repeat | Repeat | 无 论 是 否 指 定 重 复 的 填 充 背 景 图 片(background-image)于盒模式的矩形内，只要图片太小它都会自动的重复填充。如果这个 y 或者x 属性没有被指定，背景图片是从两边(x.y)同时开始重复。例： QFrame {background: whiteurl(e:/wb/styles/start.png);background-repeat: repeat-y;background-position: right;} 这样我们指定了背景图片它重复的方向是 y（竖着）轴，右侧开始。 |
| backgroud-position | Alignment | 在盒模式中定位背景图片开始显示的位置，默认是左上角开始显示。 QFrame {background:url(:/images/footer.png);background-position: bottom left;} 这样就可以设置部件显示图片是从左下角开始显示。 |
| background-attachment | Attachment | 描述背景图片是否在 QAbstractScrollArea 的区域跟随滚动条滚动，scrolled 是图片跟随滚动条滚动，fixed 是图片不跟随滚动条滚动。 QTextEdit {background-image: url(“leaves.png”);background-attachment: fixed;} |
| background-clip | Origin | 1.在部件的盒模式中那些可以当做背景显示的。 2.这个属相指定盒模式的 backgroud-color 和background-image 被裁减。 3.这个属性支持以下类QAbstractItemView 的子类, QAbstractSpinBoxsubclasses, QCheckBox, QComboBox, QDialog,QFrame, QGroupBox, QLabel, QPushButton,QRadioButton, QSplitter, QTextEdit,QToolTip, 和一些无复杂设置的 QWidgets. 4.如果没有使用该属性，那么默认情况下是border。 5.例如：QFrame {background-image:url(:/images/header.png);background-position: top left;background-origin: content;background-clip: padding;} |
| background-origin | Origin | 1.可 以 background-position 和background-image 联合一起使用设置空间的背景显示在盒模式中的起点位置。 |
| border | Border | 1.简便的设置部件的外框线。 2.等价于 border-color, border-style, 或者border-width. QLineEdit { border: 1px solid white } |
| border-top | Border | 简 单 的 设 置 部 件 上 的 外 框 线 ， 等 效 于border-top-color, border-top-style, 或 者border-top-width |
| border-right | Border | 简 单 的 设 置 部 件 上 的 右 外 框 线 |
| border-bottom | Border | 简 单 的 设 置 部 件 上 的 右 外 框 线 |
| border-left | Border | 简 单 的 设 置 部 件 上 的 右 外 框 线 |
| border-color | Box Colors | 1.设置所有外框线的颜色，border-top-color,border-right-color, border-bottom-color,和 border-left-color. QLineEdit {border-width: 1px;border-style: solid;border-color: white;} |
| border-top-color | Brush | 外框线的上面颜色。 |
| border-right-color | Brush | 外框线的上面颜色。 |
| border-bottom-color | Brush | 外框线的上面颜色。 |
| border-left-color | Brush | 外框线的上面颜色。 |
| border-image | Border Image | 1.把图片的分割的九个区域中的四个角区域填充到 border 中（详细查看九宫格分割法），其实border 在盒模式中是一块区域，默认值只是因为太小了，所以我们通常认为是线，但是在这里我们要改正一下我们以往的惯用思维。 |
| border-radius | Radius | 1.外框线 border 角的弧度 2. 默认的情况下是 0px. QLineEdit {border-width: 1px;border-style: solid;border-radius: 4px;} |
| border-top-left-radius | Radius | 左上角角的弧度 |
| border-top-right-radius | Radius | 左上角角的弧度 |
| border-bottom-right-radius | Radius | 左上角角的弧度 |
| border-bottom-left-radiusRadius | 左上角角的弧度 | |
| border-style | Border Style | 1.对所有的 border 设置。 2. 默认情况下是 none。 QLineEdit {border-width: 1px;border-style: solid;border-color: blue;} |
| border-top-style | Border Style | border 的上外框的样式。 |
| border-right-style | Border Style | border 的上外框的样式。 |
| border-bottom-style | Border Style | border 的上外框的样式。 |
| border-left-style | Border Style | border 的上外框的样式。 |
| border-width | Box Lengths | 1.border 的宽度值。 QLineEdit {border-width: 2px;border-style: solid;border-color: darkblue;} |
| border-top-width | Length | border 的上边缘线的宽度。 |
| border-right-width | Length | border 的上边缘线的宽度。 |
| border-bottom-width | Length | border 的上边缘线的宽度。 |
| border-left-width | Length | border 的上边缘线的宽度。 |
| bottom | Length | 1.相对位置下（默认的情况下）辅助控制器的移动就抵消了它原来的位置，指定 bottom y 等效于 top：-y。（看 TabWidget）。 2.如果位置是绝对的，辅助控制器的 bottom 关联于母控件的边界。 QSpinBox::down-button { bottom: 2px } |
| button-layout | Number | 1.对类 QDialogButtonBox 和 QMessageBox 的按钮进行布局。 2.提供的值是 （WinLayout），1（MacLayout），2（KdeLayout），3（GnomeLayout）（不同系统值不一样） 3.默 认 情 况 下 是 当 前 情 况 下SH_DialogButtonLayout 的风格。 * { button-layout: 2 } |
| color | Brush | 1.字体的颜色，认为是前景色。 2.支持 QWidget：：palette 都可以支持的属性。 3.这个属性没有被设置默认为黑色。 QPushButton { color: red } |
| font | Font | 1.简单的对界面的字体进行设置。 2.等 效 于 font-family, font-size,font-style, 及 font-weight. 3.那么就支持所有的部件（部件支持 font）使用。 4.默认的情况下是 QWidget::font. QCheckBox {font: bold italic large “Times New Roman”} |
| font-family | String | 1.字体集 QCheckBox {font-family: “New Century Schoolbook”} |
| font-size | Font Size | 1.文本字体的大小。 2.在 Qt 中只支持 pt 和 px。 QTextEdit { font-size: 12px } |
| font-style | Font Style | 1.文本字体的样式。 QTextEdit { font-style: italic } |
| font-weight | Font Weight | 文本字体的磅数。 |
| height | Length | 1.辅助控制器的高度（例如一个 widget）。 2.如果没有设定，则默认值是根据当前辅助控制器自己的样式或者是窗口部件的样式显示。 3.Warning:如果一个部件设定了固定的宽和高，那么这个属性将不起做用，如设置了一个部件的min-height 和 max-height。 QSpinBox::down-button { height: 10px } |
| icon-size | Length | 1.在部件中设置图标的高和宽。 2.以下的类可以用到这个属性QCheckBox,QListView,QPushButton,QRadioButton,QTabBar,QToolBar,QToolBox,QTreeView |
| image* | Url+ | 1.在辅助控制器的盒模式中的 content 中绘制图形。 2.这个属性接受一个 Urls 列表或者是一个 svg 3.设置了一个辅助控制器的图片，默认的情况下是设置了这个选择器的宽和高。4.4.3 中和更高的版本中，可以指定图片开始显示位置。 5.对于辅助控制器的 noly-将不支持其他的类型元素。 QSpinBox::down-button{image: url(:/images/spindown.png)} |
| image-position | alignment | 在 4.3 中和更高的版本中，可以指定图片开始显示位置。 |
| left | Length | 1.相对位置下（默认）辅助控制器的移动就抵消了它原来的位置向右。 2.绝对位置下，关联于母控件的 left。 3.默认的情况下是 0. QSpinBox::down-button { left: 2px } |
| lineedit-password-character* | Number | 1.QLineEdit 的密码，是 Unicode 格式。 2.默认是 SH_LineEdit_PasswordCharacter 属性的样式 * { lineedit-password-character: 9679 } |
| margin | Box Lengths | 1.部件的间距。 QLineEdit { margin: 2px } |
| margin-top | Length | 上面的空白区域 |
| margin-right | Length | 上面的空白区域 |
| margin-bottom | Length | 上面的空白区域 |
| margin-left | Length | 上面的空白区域 |
| max-height | Length | 辅选择控制器的最大高度。 |
| max-width | Length | 辅选择控制器的最大高度。 |
| min-height | Length | 辅选择控制器的最大高度。 |
| min-width | Length | 辅选择控制器的最大高度。 |
| opacity* | Number | 1.部 件 的 不 透 明 度 ，（0[transparent]~255[opaque]）. 2.只支持 tooltips QToolTip { opacity: 223 } |
| padding | Box Lengths | 部件的 padding QLineEdit { padding: 3px } |
| padding-top | Length | 部件的上面的 padding。 |
| padding-right | Length | 部件的上面的 padding。 |
| padding-bottom | Length | 部件的上面的 padding。 |
| padding-left | Length | 部件的上面的 padding。 |
| paint-alternating-rowcolors-for-empty-area | bool | 控制是否可以绘制颜色交替的 QTreeView 的空白区域。 |
| position | relative或者absolute | 用相对的还是绝对的控制 left，right，top 和bottm 的位置，默认的情况下是相对的。 |
| right | Length | 1.如果是相对位置（默认）辅助控制器的移动抵消了原来的位置向左。 .绝对位置，子控件的右边界关联于母控件的右边界。 3.默认的情况下是 0. QSpinBox::down-button { right: 2px } |
| selection-backgroundcolor* | Brush | 1.选择一个 item 时的背景颜色。 2.这个部件是可选并且 QWidget::palette 都支持此属性。3.默认情况下是 Highlight。 QTextEdit { selection-background-color:darkblue } |
| selection-color* | Brush | 1.选择一个 item 时的前景色。 2.这个部件是可选并且 QWidget::palette 都支持此属性。 3.默认是 HighlightedText QTextEdit { selection-color: white } |
| spacing* | Length | 1.部件的内部空间大小 3.默认值由当前的部件的大小决定。 QMenuBar { spacing: 10 } |
| subcontrol-origin* | Origin | 1.在盒模式的四个区域中设置辅助控制器起点位置。 2.默认为 padding。 QSpinBox::upbutton {image: url(:/images/spinup.png);subcontrol-origin: content;subcontrol-position: right top;} |
| text-align | Alignment | 1.设置文本，图标在部件盒模式 content 中文本起始方向。 QPushButton {text-align: left;} |
| text-decoration | none underline overline line-through |
添加文本效果。没有效果，下划线，上划线，线穿过文本。 |
| top | Length | 1.如果是相对位置（默认）辅助控制器的移动通过抵消原来的位置向下移动。 2.绝对位置，子控制器的上边界关联于母控件的上边界线。 3.默认的情况下是 0 QSpinBox::up-button { top: 2px } |
| width | Length | QSpinBox::up-button { width: 12px } |
6. 值列表
| 值 | 语法 | 说明 |
|---|---|---|
| Alignment | { top , bottom , left , right ,center } | 方位 |
| Attachment | { scroll , fixed} | 背景是否跟随滚动条滚动 |
| Background | { Brush ,Url , Repeat ,Alignment} | 任意的一个代替在查找下一层（笔刷，路径，重复，方位）。 |
| Border | { Border Style, Length, Brush} | 简单的设置线的属性，长度，笔刷 |
| Boolean | 0,1 | True（1）false（0） |
| Border Image | none, Url Number{4}, (stretch , repeat){0,2} | 看九宫格分割法 |
| Border Style | dashed , dot-dash, dot-dot-dash, dotted, double, groove, inset, outset, ridge, solid, none | 用这些值绘制一个 border |
| Box Colors | Brush{1,4} | 可以设置四个方向的颜色顺序为上，右，下，左，缺省方式参考下面 Box Lengths。 |
| Box Lengths | Length{1,4} | 四个方向顺序为 top, right, bottom, and left注释皆为此顺序。 1.QLabel {border-width: 1px } /* 1px 1px 1px 1px / 当输入一个值如 1px 则默认 QLable 的四个方向的值都为 1px。此时是 right 默认用 top 的值，bottom 自动用 top的值，right 自动用 right 的 2.QLabel {border-width: 1px 2px } / 1px 2px 1px 2px / 输入两个值则表示 bottom 值和 right 的都使用默认的值 bottom 使用 top，right 使用 left。 3.QLabel {border-width: 1px 2px 3px } / 1px 2px 3px 2px /输入三个值表示最后一个 left 值默认用 right 侧的值 4.QLabel {border-width: 1px 2px 3px 4px } / 1px 2px 3px 4px */ |
| Brush | Color, Gradient, PaletteRole | 指定颜色,渐变,调色板 |
| Color | rgb(r, g, b) , rgba(r, g, b, a), hsv(h, s, v), hsva(h, s, v, a, #rrggbb, Color Name | 颜色 rgba 和 hsva 后面的参数是透明度。 |
| Font | (Font Style, Font Weight) {0,2}, Font Size String | 简单设置文字字体 |
| Font Size | Length | 文字字体大小 |
| Font Style | normal, italic, oblique | 文字字体的格式 |
| FontWeight | normal, bold, 100, 200, … | 文字的磅 bold 加粗 |
| Gradient | qlineargradient, qradialgradient, qconicalgradient | 渐变器（线性的渐变, 径向渐变（辐射渐变）, 梯形渐变）边界的模式是左上角（0,0），右下角（1,1）参数是从 0 到 1，一般为实际的盒模式的坐标。必须是升序排序。 /* linear gradient from white to green / QTextEdit {background:qlineargradient(x1:0, y1:0, x2:1,y2:1,stop:0 white, stop: 0.4 gray, stop:1 green)} （（x1，y2）（x2，y2）线性的两个点） / linear gradient from white to green / QTextEdit {background:qlineargradient(x1:0, y1:0, x2:1,y2:1, stop:0 white, stop: 0.4 rgba(10, 20, 30, 40),stop:1 rgb(0, 200, 230, 200))（透明度）} / conical gradient from white to green / QTextEdit {background:qconicalgradient(cx:0.5,cy:0.5,angle:30,stop:0 white, stop:1 #00FF00)} /中心点（0.5,0.5）角度 30/ / radial gradient from white to green */ QTextEdit {background:qradialgradient(cx:0, cy:0, radius:1,fx:0.5, fy:0.5, stop:0 white, stop:1 green)} /中心点（0，0），半径 1 焦点（0.5,0.5）从焦点开始渐变/ |
| Icon | (Url (disabled, active, normal, selected) ? (on , off)? ) | 一组图标地址 +按钮的（禁用,活动,正常,选择） ？（on,off）意思是前面括号里四个中的一个状态和后面两个中的一个的组合来控制图片的显示哪一个。 * { file-icon: url(file.png), url(file_selected.png) selected;} QMessageBox {dialogbuttonbox-buttons-have-icons:true;dialog-ok-icon: url(ok.svg);dialog-cancel-icon:url(cancel.png), url(grayed_cancel.png disabled;} |
| Length | Number(px , pt , em ,ex) | 长度单位（数字+其中一个） |
| Origin | margin, border, padding, content | margin: 最外边的矩形. 可以控制两个部件之间的空隙。 border: 为边界预留的空间。 padding: 在 border 里面控制 border 与部件内容的空间。 content: 部件窗口内容 |
| Radius | Length{1, 2} | 角的弧度 1.可以是一个值这样就是角的直接弧度。 2.两个值的时候，第一个是横向的弧度，第二个是纵向的弧度。可以制作出一个类似椭圆四分之一圆的角度。 |
| Repeat | repeat-x, repeat-y, repeat, no-repeat | repeat-x: 横向重复图. repeat-y: 纵想重复 repeat: 横纵同时 no-repeat: 不重复 |
| Url | url(filename) | 地址 |
四、常用例子
1. 定制全局颜色
*{
background:blue;
color:red;
}
2. 定制按钮
QPushButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
.QPushButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px; /*边缘线的半径*/
border-color: #fcaf17; /*按钮的边缘线为黄色*/
font: bold 14px; /*字体*/
min-width: 10em;
padding: 6px;
}
QPushButton:pressed {
background-color: #7fb80e; /*当按钮被按下(pressed)的时候就出现若绿色按钮*/
border-style: inset;
}
本文地址：https://blog.csdn.net/ly1390811049/article/details/111053672