Qt Style Sheets--简介

本文介绍Qt样式表的强大功能,可自定义部件外观,提供独特的观感体验。样式表不仅适用于整个应用程序,也可用于特定部件及其子部件。通过具体实例说明如何使用样式表自定义QtWidgets,以及样式表相对于QPalette的优势。

(本文翻译自Qt SDK帮助手册,水平有限,多多包含,不是完全的直译)
Qt样式表是一个功能强大的机制,它允许您自定义部件的外观,这是除了子类化QStyle来自定义部件外观的另一种机制(其实Qt样式表跟QStyle有很大的关系,以后慢慢了解)。
Qt样式表的概念、术语、语法都深受HTML启发Cascading Style Sheets (CSS)但是却适合于widgets的世界。


专题

  • 概述
  • Qt设计师集成开发工具(以后不对这个模块做描述,大家有兴趣的自己看看帮助文档)
  • 使用样式表自定义Qt Widgets
  • Qt样式表标准
  • Qt样式表例子

概述

  样式表是一种能使用 QApplication::setStyleSheet()设置到整个应用程序或者使用QWidget::setStyleSheet()设置到某个特定的部件(包括其子部件)的文本规范。如果在几个不同的级别上设置了不同的样式表,Qt会同时应用这几个级别上设置的所有样式表,这就是所谓的级联。
  举个例子,下面的样式表语句规定所有的QLineEdit都应该将黄色作为它们的背景样色,同样的,所有的QCheckBox都应该将红色作为该部件上字体的颜色:

QLineEdit { background: yellow }
QCheckBox { color: red }

  对于这种定制,样式表比QPalette要强大得多。举个例子,通过设置QPalette::Buttonrole成红色以获得一个红色的按钮看似非常有诱惑力,然而,这并不能保证适用于所有风格,因为样式作者会受限于不同平台的指导方针和(在 Windows XP 和 Mac OS X)本地的主题引擎。
  此外,样式表可以在你不子类化QStyle的情况下也能为你的应用程序提供独特的观感。举个例子,你可以为单选框和复选框指定任意的图片以使它们更加的突出。使用这种技术,还可以实现更小的定制,但这通常需要子类化一下style类,比如style hint。下面展示的两个独特的样式表,你可以尝试和修改。


  样式表让你可以执行任何QPalette难以做到甚至不能做到的各种自定义操作。 如果你想让必填字段显示黄色的背景色、让退出按钮等破坏性的按钮显示红色的文字有或者想弄个花里胡哨的复选框,那么样式表都能满足你。

  样式表应用在所有部件的顶层,这意味着你的应用程序看起来会像本地的样式,但是任何样式表定义都会被考虑。与palette那种不靠谱相反,样式表能保证:如果你把QPushButton的背景色设置成了红色,你可以确定在所有平台和主题下它的背景颜色都是红色的。此外,Qt 设计师工具提供了样式表的集成,可以更直观的看到样式表的效果。

  当样式表激活时,由QWidget::style()返回的QStyle其实是“样式表”的包装而不是平台指定的样式。“样式表”的包装保证样式表会优先使用,否则在进行绘制操作时,平台指定的样式将会生效。(例子:Windows XP上使用QWindowsXPStyle)


版权声明:本文为博主原创文章,欢迎转载,转载请注明出处

### 关于 Qt Advanced Stylesheets 的使用教程 #### 初始化项目 为了开始使用 `Qt-Stylesheets`,可以从项目的例子目录入手。例如,在 `examples/full_features/main.cpp` 文件中可以看到如何初始化并运行带有高级样式的应用程序[^3]。 ```cpp #include <QApplication> #include "MainWindow.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); MainWindow w; w.show(); return app.exec(); } ``` 这段代码展示了基本的应用程序结构,其中包含了创建和显示主窗口的过程。通过这种方式可以加载自定义的样式表来美化界面组件。 #### 配置文件说明 对于配置方面,`Qt-Advanced-Stylesheets` 提供了一套扩展功能用于增强传统的 QSS (Qt Style Sheets),使得开发者能够更加灵活地定制 GUI 外观。这些特性包括但不限于响应式设计的支持、类选择器机制以及伪状态的选择等功能[^2]。 #### 实现响应式布局 利用媒体查询实现响应式设计是一项重要改进。这允许根据设备的不同尺寸调整 UI 元素的表现形式: ```css QPushButton { font-size: 16px; } @media (min-width: 800px){ QPushButton { padding-left: 20px; padding-right: 20px; } } ``` 上述 CSS 片段表示当视口宽度大于等于 800 像素时按钮会增加左右内边距;而在较小屏幕上则保持原始样式不变。 #### 应用类选择器提高复用率 借助 `.classname` 这样的方式给多个相似部件指定相同的视觉效果变得简单许多: ```css .classname { background-color: lightblue; border-radius: 5px; } ``` 任何拥有此类名称的对象都会自动继承这里定义好的属性集合,从而减少了重复劳动并且易于维护统一风格。 #### 利用伪类细化交互反馈 除了常规的选择符之外还引入了一些特殊的标记用来描述特定时刻下的对象行为,比如鼠标悬停(`:hover`) 或者激活状态下 (`:active`) : ```css button:hover { color: red; } input:focus { outline-style: solid; outline-color: blue; } ``` 以上规则会在用户操作相应控件期间触发对应的外观变化,提供更好的用户体验感。 #### 计算属性简化数值处理 最后值得一提的是新增加了一个类似 Web 开发里常见的 `calc()` 方法来进行动态计算的能力: ```css width: calc(100% - 40px); height: calc((100vh / 3) + 2em); ``` 这种做法让设定固定与相对单位混合使用的场景变得更加直观易懂。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值