一键抓取的网站怎么做,网站建设配色方案,免费的企业网站源码,企业宣传注册哪些论坛 网站好前言
最近想给程序做个换皮肤的功能#xff0c;于是想起了用 QSS。QSS 这个东西也算是老古董了#xff0c;博主刚工作那会就有接触过#xff0c;但是没有深入去了解#xff0c;趁着这一次机会来学习一下。网上翻阅了一些资料#xff0c;结合 Qt 的官方文档#xff0c;博…前言
最近想给程序做个换皮肤的功能于是想起了用 QSS。QSS 这个东西也算是老古董了博主刚工作那会就有接触过但是没有深入去了解趁着这一次机会来学习一下。网上翻阅了一些资料结合 Qt 的官方文档博主把 QSS 的相关知识点整理了一下希望对大家有帮助也方便自己后期回顾。
一. QSS 简介
QSS 全称为 Qt Style Sheets 也就是 Qt 样式表它是 Qt 提供的一种用来自定义控件外观的机制。QSS 大量参考了 CSS 的内容只不过 QSS 的功能要比 CSS 弱很多体现在选择器要少可以使用的 QSS 属性也要少很多并且并不是所有的属性都可以用在 Qt 的所有控件上。
二. QSS 语法高亮
通过 “工具” - “选项” 进入设置通过 “text/css” 快速定位然后在详情中添加 “*.qss” 即可实现 QSS 文件语法高亮注意分隔符用 ‘;’
三. 如何在 Qt 程序中加载 QSS
void MainWindow::changeStyle(QString fileName)
{QString path :/qss/ fileName;QFile file(path);if ( file.open(QFile::ReadOnly) ){QString qss QLatin1String(file.readAll());this-setStyleSheet(qss);file.close();}
}四. QSS 语法解析
这里先献上 Qt 的 QSS 官方文档 和 QSS 官方示例方便大家查阅对比。
基础语法 selector { attribute : value }; 其中 selector 选择器通常情况下为控件类名如 QPushButton attribute 属性待设置的样式表属性如 background-color value 值属性赋值如 rgb(40, 85, 20); 示例QPushButton { color: red }
*注Qt 样式表通常不区分大小写即color、Color、color 和 color 指的是同一属性但是类名、对象名和 Qt 属性名它们是区分大小写的
共享属性
QCheckBox, QComboBox, QSpinBox
{color:rgb(255,0,0);background-color:rgb(255,255,255);font:bold;
}这样就设置了所有作用范围内的 QCheckBox、QComboBox、QSpinBox 的前景色、背景色和字体
选择器SELECTOR Qt 样式表支持 CSS2 中定义的所有选择器下表总结了最常用的选择器类型
选择器举例解释通用选择器*所有 Qt 的 widget即不声明选择器时属性作用于所有组件类型选择器QPushButton作用于 QPushButton 及其子类的实例属性选择器QPushButton[flat“false”]作用于非平面flat“false”的 QPushButton 实例类选择器.QPushButton作用于 QPushButton 的实例但不匹配其子类的实例。前面加了个’.’)ID选择器QPushButton#okButton作用于对象名称为 okButton 的所有 QPushButton 实例后代选择器QDialog QPushButton匹配作为 QDialog 的子体子级、孙级等的所有 QPushButton 实例子选择器QDialog QPushButton匹配作为 QDialog 的直接子级的所有 QPushButton 实例子控制QComboBox::drop-down作用于 QComboBox 的子控件 drop-down 下拉箭头
伪状态PSEUDO-STATES 用户在操作时可以根据不同的交互状态展示不同的用户样式界面能够识别用户操作不需要代码控制即可响应不同状态下的样式
示例程序为一个按钮在默认、悬浮、按下和禁用时的样式
QPushButton {border: 1px solid #555;padding: 4px;min-width: 65px;min-height: 12px;
}QPushButton:hover {background-color: #999;
}QPushButton:pressed {background-color: #333;border-color: #555;color: #AAA;
}QPushButton:disabled {color: #333333;
}下表为 QSS 官方文档翻译过来的全部伪状态
伪状态解释:active此状态在 widget 驻留在活动窗口中时设置adjoins-item此状态在 QTreeView 的 ::branch 与项相邻时设置:alternate当 QAbstractItemView::ternatingRowColors() 设置为 true 时将为绘制 QAbstractItemView 的行时的每隔一行设置此状态:bottom该项目位于底部。例如标签位于底部的 QTabBar:checked该项目已选中。例如QAbstractButton 的选中状态:closable这些项目可以关闭。例如QDockWidget 打开了 QDockWidget::DockWidgetClosable 功能:default该项目为默认值。例如QMenu 中的默认 QPushButton 或默认操作:disabled该项目已禁用:editableQComboBox 是可编辑的:edit-focus该项具有编辑焦点请参见 QStyle::State_HasEditFocus此状态仅适用于 Qt 扩展应用程序:enabled该项目已启用:exclusive该项目是独占项目组的一部分。例如独占 QActionGroup 中的菜单项:first该项目是列表中的第一个项目。例如QTabBar 中的第一个选项卡:flat这件物品是平的。例如平面 QPushButton:floatable这些项目可以浮动。例如QDockWidge t打开了 QDockWidget::DockWidgetFloatable 功能:focus该项具有输入焦点:has-children该项目具有子项。例如QTreeView 中具有子项的项:has-siblings该项目有同级。例如QTreeView 中的同级项:horizontal该项目具有水平方向:hover鼠标悬停在该项目上:indeterminate该项具有不确定状态。例如部分选中 QCheckBox 或 QRadioButton:last该项是列表中的最后一项。例如QTabBar 中的最后一个选项卡:left该项目位于左侧。例如选项卡位于左侧的 QTabBar:maximized该项目将最大化。例如最大化的 QMdiSubWindow:middle项目在中间在列表中。例如QTabBar 中不在开头或结尾的制表符:minimized该项目被最小化。例如最小化的 QMdiSubWindow:movable物品可以四处移动。例如QDockWidget 打开了 QDockWidget::DockWidgetMoovable 功能:no-frame该项目没有框架。例如无框架的 QSpinBox 或 QLineEdit:non-exclusive该项是非独占项组的一部分。例如非独占 QActionGroup 中的菜单项:off对于可以切换的项目这适用于处于“关闭”状态的项目:on对于可以切换的项目这适用于处于“打开”状态的 widget:only-one该项目是列表中的唯一项目。例如QTabBar 中的一个单独的选项卡:open该项目处于打开状态。例如QTreeView 中的展开项或具有打开菜单的 QComboBox 或 QPushButton:next-selected选择下一项在列表中。例如QTabBar 的选定选项卡紧挨着该项:pressed正在使用鼠标按下该项:previous-selected选择上一项在列表中。例如QTabBar 中选定选项卡旁边的选项卡:read-only该项目标记为只读或不可编辑。例如只读 QLineEdit 或不可编辑的 QComboBox:right该项目位于右侧。例如选项卡位于右侧的 QTabBar:selected该项目即被选中。例如QTabBar 中的选定选项卡或 QMenu 中的选定项目:top该项目位于顶部。例如选项卡位于顶部的 QTabBar:unchecked该项目处于取消选中状态:vertical该项目具有垂直方向:windowwidget是窗口即顶层小部件
子控件 要设置复杂的 widget 样式需要访问 widget 的子控件如 QComboBox 的下拉按钮或 QSpinBox 的上下箭头。选择器可以包含子控件从而可以将规则的应用限制到特定的 widget 子控件
下表为 QSS 官方文档翻译过来的全部子控件
子控件说明::add-lineQScrollBar 添加行的按钮::add-pageQScrollBar 的控制柄滑块和添加线之间的区域::branchQTreeView 的分支指示符::chunkQProgressBar 的进度块::close-buttonQDockWidget 或 QTabBar 选项卡的关闭按钮::corner在 QAbstractScrollArea 中两个滚动条之间的角::down-arrowQComboBox、QHeaderView排序指示符、QScrollBar 或 QSpinBox 的向下箭头::down-buttonQScrollBar 或 QSpinBox 的向下按钮::drop-downQComboBox 的下拉按钮::float-buttonQDockWidget 的浮动按钮::grooveQSlider 的槽::indicatorQAbstractItemView、QCheckBox、QRadioButton、可点击的 QMenu 项或可点击的 QGroupBox 的指示器::handleQScrollBar、QSplitter 或 QSlider 的手柄滑块::iconQAbstractItemView 或 QMenu 的图标::itemQAbstractItemView、QMenuBar、QMenu 或 QStatusBar 的项::left-arrowQScrollBar 的左箭头::left-cornerQTabWidget 的左角。例如此控件可用于控制 QTabWidget 中的左角小部件的位置::menu-arrow带有菜单的 QToolButton 的箭头::menu-buttonQToolButton 的菜单按钮::menu-indicatorQPushButton 的菜单指示器::right-arrowQMenu 或 QScrollBar 的右箭头::paneQTabWidget 的窗格框架::right-cornerQTabWidget 的右角。例如此控件可用于控制 QTabWidget 中右角小部件的位置::scrollerQMenu 或 QTabBar 的滚动条::sectionQHeaderView 的部件::separatorQMenu 或 QMainWindow 中的分隔符::sub-lineQScrollBar 减去行的按钮::sub-pageQScrollBar 的控制柄滑块和子行之间的区域::tabQTabar 或 QToolBox 的选项卡::tab-barQTabWidget 的选项卡栏。这个子控件的存在只是为了控制 QTabWidget 中 QTabBar 的位置::tearQTabBar 的撕裂指示器::tearoffQMenu 的撕裂指示器::textQAbstractItemView 的文本::titleQGroupBox 或 QDockWidget 的标题::up-arrowQHeaderView排序指示符、QScrollBar 或 QSpinBox 的向上箭头::up-buttonQSpinBox 的向上按钮
五. 案例展示
原始经典 爆炎黑 天空蓝 亚麻橙 工业灰 森林绿 梦幻紫 冰川银
