当前位置：首页 > article >正文

Qt中样式表常用的属性名称定义

article 2024/9/22 15:46:33

Qt中，用好样式表，不但可以做出意想不到的酷炫效果，有时候也能减轻开发量，可能由于你不了解某些样式使用，想破脑袋通过代码实现的效果，反倒不如别人用样式，一两句样式脚本就搞定。
Qt中，样式操作使用QSS语言，QSS是用于描述图形用户界面（GUI）样式的语言，可以让开发者为应用程序的控件定义视觉外观，如颜色、字体、尺寸和布局等。QSS主要目的是提供一种简洁而灵活的方式来美化应用程序的界面，使其具有一致的外观和风格。通过使用QSS，开发者可以分离界面的样式和功能代码，从而更容易维护和定制界面的外观。QSS样式表通常以.qss文件的形式保存，包含了一系列的样式规则，这些规则使用选择器来指定要应用样式的控件及对应的样式属性和值,QSS样式来自仿css模式（大部分通用的，但有些是不支持的，或者没有定义的），如果需要全面学习样式设置，可以专门研究下CSS。
一.先说样式：
盒子模型

按照盒子模型，了解Box样式各个属性
1 Box样式
width：宽度
height：高度
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
margin：边距尺寸
margin-left：左边距
margin-top：顶部边距
margin-right：右边距
margin-bottom：底部边距
padding：填充尺寸
padding-left：左侧填充间距
padding-top：顶部填充间距
padding-right：右侧填充间距
padding-bottom：底部填充间距
2 位置样式
position：定位属性
如果 position 是 relative（默认值），则将子控件移动一定的偏移量；如果 position 是 absolute，则指定子控件相对于父控件位置
top：顶部位置
right：右侧位置
bottom：底部位置
left：左侧位置

3 字体样式
font：字体样式
font-family：字体类型
font-size：字体大小
font-style：字体风格
font-weight：字体粗细
color：字体颜色

4文本样式
text-decoration：文本修饰
text-align：水平对齐

5 背景样式
background：背影样式
background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-position：背景定位
background-attachment：背景固定
background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框下面。

background-origin：指定背景图片 background-image 属性的原点位置的背景相对区域

background 的简写方法

/简写·这个在阅读代码中经常出现，某个属性大类放在一行，各子属性值空格分开，需要好好研究练习/
QWidget{
background:#000 url(…) repeat fixed left top;
}

6 边框样式
border：边框样式
border-top：顶部边框
border-top-color：顶部边框线的颜色
border-top-style：顶部边框线的样式，线，点，点线等等
border-top-width：顶部边框线的宽度
//以下同理，各个边框线的属性
border-right：
border-right-color
border-right-style
border-right-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-color：边框颜色
border-style：边框风格
border-width：边框宽度
border-image：边框图片
border-radius：元素的外边框圆角
border-top-left-radius：左上角边框弧度
border-top-right-radius：右上角边框弧度
border-bottom-right-radius：右下角边框弧度
border-bottom-left-radius：左下角边框弧度

7 颜色样式
alternate-background-color：交替行颜色
gridline-color：QTableView 中网格线的颜色
selection-color：所选文本或项目的前景色
selection-background-color：所选文本或项目的背景色

8 文本样式
//这个outline很有个性，可能有些环境下设置了看不出来，但另一个环境下，就给你冒出来，所以要搞清楚
outline：轮廓属性
outline-color：设置一个元素轮廓的颜色
outline-offset：设置 outline 与元素边缘或边框之间的间隙
outline-style：设置元素轮廓的样式
outline-radius：设置元素的轮廓圆角弧度
outline-bottom-left-radius：左下方轮廓弧度
outline-bottom-right-radius：右下方轮廓弧度
outline-top-left-radius：左上方轮廓弧度
outline-top-right-radius：右上方轮廓弧度

9 其他样式
opacity：控件的不透明度
icon-size：控件中图标的宽度和高度
image：在子控件的内容矩形中绘制的图像
image-position：在 Qt 4.3 及更高版本中，可以使用相对或绝对位置指定图像图像位置的对齐
spacing：控件中的内部间距
subcontrol-origin：父元素中子控件的原始矩形
subcontrol-position：subcontrol-origin 指定的原始矩形内子控件的对齐方式。
button-layout：QDialogButtonBox 或 QMessageBox 中按钮的布局
messagebox-text-interaction-flags：消息框中文本的交互行为
dialogbuttonbox-buttons-have-icons：QDialogButtonBox 中的按钮是否显示图标
titlebar-show-tooltips-on-buttons：是否在窗口标题栏按钮上显示工具提示
widget-animation-duration：动画应该持续多少（以毫秒为单位）。值等于零意味着将禁用动画
lineedit-password-character：该 QLineEdit 的密码字符作为 Unicode 数字
lineedit-password-mask-delay：在将 lineedit-password-character 应用于可见字符之前，QLineEdit 密码掩码延迟（以毫秒为单位）
paint-alternating-row-colors-for-empty-area：QTreeView 是否为空白区域（即没有项目的区域）绘制交替的行颜色
show-decoration-selected：控制 QListView 中的选择是覆盖整个行还是仅覆盖文本的范围

二.辅助控制器
辅助控制器是用双冒号进行指定。使用了辅助控制器的时候就自动分离出一个窗口的各个子窗口，对小窗口进行设置。不同的选择器有不同的辅助控制器，具体可查看下面这些：

::add-line 在 QScrollBar 中添加一行的按钮
::add-page:branch 在 QScrollBar 中添加页的按钮
::branch QTreeView 的分支
::chunk QProgressBar 的进度条里的块（里面的进度条可以变成一块一块的增加，而不是整体都是一种颜色)
::colse-button QDockWidget 和 QTabBar 标题栏上的关闭按钮
::corner 在 QAbstractScrollArea 两个滚动条之间的位置
::drwn-arrow QComboBox、QHeaderView (排序时需要)、QScrollBar、QSpinBox 的向下箭头
::up-button 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 的指示符
::text QAbstractitemView 的内容
::title QGroupBox 和 QDockWidget 的标题
::up-arrow QHeaderView（排序时）、QScrollBar、QSpinBox 向上按钮箭头

三.伪状态
在Qt中，伪状态是用来定义一个控件在特定条件下的外观的。比如按钮，伪状态可以用于按钮在被按下或者获得焦点，被禁用等不同状态时改变其外观。

伪状态说明如下：
:checked 按钮已选中
:unchecked 按钮未被选中
:hover 鼠标划过窗口部件时的状态
:pressed 控件被按下
:focus 窗口部件有输入焦点
:disabled 禁用窗口部件
:enabled 启用窗口部件
:indeterminate 按钮部分被选中的状态
:on 控件处于 on 状态
:off 控件处于 off 状态
:active 当前活动的窗口
:flat 没有突起的部件
:exclusive 表示按钮组设置为单选，只能选择一个的状态。例如菜单栏的选项
:non-exclusive 不能单选的，菜单来就是单选的
:default 默认的状态
:horizontal 部件是横向的。
:editabled QComboBox 可以编辑的
:edit-focus 那种可编辑的控件，比如文本框，当它正在编辑的时候，就是 QStyle: :State_HasEditFocus 状态
:no-frame 这个部件是没有 frame 的，例如 QLineEdit 和 QSpinBox
:closable items 是可以关闭的，例如 QDockWidget 有一个 QDockWidget::DockWidgetClosable 的功能
:floatable 部件是可浮动，例如 QDockWidget
:movable 这个部件可以移动，例如 QDockWidget
:closed (open 相对的)窗口位于关闭或者销毁的状态，例如QTreeView没有打开时的状态
:has-children Item有子目录的,例如 QTreeView
:has-siblings 有兄弟目录的，例如 QTreeView
:adjoins-item QTreeView 的一个 branch 存在毗邻下一个与自己不是兄弟项目的项
:first 部件的第一个，例如 QTabBar 的第一个 tab
:last 最后一个，例如 :QTabBar 的最后一个 tab
:left 位于左面，例如 QTabBar 的 tab 位于左面的那个
:bottom 在 item 的下面，例如 QTabBar 的 tab 按钮在下面
:middle 在列表中中间位置，例如 QTabBar 的 tab 不是最后一个也不是第一个的
:minimized 最小化的时候
:maximized 最大化状态
:alternate 当 QAstractitemView 的 QAstractitemView::alternatingRowColors() 的属性设置为 true 时，行之间背景颜色交替颜色变化。

四、属性的值
属性的值是属性后面跟随的一组数字、颜色或者是一个 bool 类型等这些我们称它为值，这些值决定了窗口部件的最终的展示效果。

Alignment { top | bottom | leftright | center } 表示方位
Attachment { scroll | fixed }* 背景是否跟随滚动条滚动
Background { Brush | Ur1 | Repeat | Alignment } 任意的一个代替在查找下一层（笔刷，路径，重复，方位)。
Border { Border Style l Length | Brush }* 简单的设置线的属性，长度，笔刷
Boolean 0|1 True（ 1） false（ 0）
Border Image none
| Url Number{4}
(stretch
| repeat) 看九宫格分割法
Border Style { dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none } 用这些值绘制一个 border
Brush {Color | Gradient } 指定颜色|渐变|调色板
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 Style { normal | italic | oblique } 文字字体的格式
FontWeight { normal | bold | 100 | 200 … | 900} 文字的磅 bold 加粗
Gradient { qlineargradient | qradialgradient | qconicalgradient} 渐变器（线性的渐变 |径向渐变（辐射渐变） |梯形渐变）边界的模式是左上角（ 0,0），右下角（ 1,1）参数是从 0 到 1，一般为实际的盒模式的坐标。必须是升序排序
Origin { margin | border | padding | content } margin: 最外边的矩形. 可以控制两个部件之间的空隙。 border: 为边界预留的空间。padding: 在 border 里面控制 border 与部件内容的空间。 content: 部件窗口内容