Qt样式表Qss(什么是QSS;基本语法;setStyleSheet函数;样式表的属性值;利用QtCreate实现样式切换;样式表实现皮肤改变实例)
本篇介绍什么是样式表,讨论如何使用Qt样式表Qss修改应用程序外观,并通过实例进行讲解。
了解HTML的同学都知道,一般在HTML中我们把样式表叫做CSS,在Qt中我们称之为QSS。QSS和CSS并不完全等同,语法完全类似,定义上存在一些差别。
1. 什么是QSS
QSS是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性,用于美化UI界面。实现界面和程序的分离,快速切换皮肤。
QSS最大的优点就是简单便捷,我们可以通过它快速实现应用程序的外观界面。
2. QSS的基本语法
1)选择器 {property:value}
Qt中有很多控件,例如QPushButton
、QWidget
等被称为选择器, {property:value}
代表属性和值。
QPushButton {color: red} //代表QPushButton 颜色为红色
2)几个选择器可以指定相同的声明,使用逗号“,”
来分隔选择器
//代表QPushButton ,QLineEdit,QComboBox 颜色为红色
QPushButton,QLineEdit,QComboBox {color: red}
3)声明部分的规则有多个属性值时包含在花括号{}
中,以分号;
分隔,属性之间在QSS
之间是不区分大小写的
QPushButton {color: red;background-color:white;}
3. Qt样式表设置函数:setStyleSheet
Qt中设置样式表最主要的函数为setStyleSheet
4. 利用setStyleSheet实现样式表实例
通过实例来介绍如何去设置Qt的样式表,
1)新建工程
2)拉入一个按钮,此时编译运行之后,按下按钮其字体和颜色都是没有发生变化的。
3)通过样式表使得按下按钮后其字体和颜色发生变化。
(1)修改按钮中字体颜色
ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));
实现按钮中的字体显示为红色
Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));
}
运行结果:
(2)设置按钮按下后的颜色变化
以下代码中:QPushButton:pressed
表示按钮按下后,颜色为background-color:rgb(200,200,200);
,border-style:inset;
表示内边框;color:rgb(0,255,0);
字体颜色为color:rgb(0,255,0);
,其中“\”
代表本行写不下,下行仍为同一行。
Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \background-color:rgb(200,200,200);\border-style:inset;\color:rgb(0,255,0);\}\QPushButton{color:rgb(255,0,0)}"));
}
运行结果:未按下按钮结果与上步一致,按下后字体颜色为绿色
上述的方法是使用setStyleSheet
函数实现QSS的方法,下来将会先介绍样式表的属性指向,然后利用QtCreate实现上述内容,最终探讨两种实现方法的区别。
5. Qt中样式表的属性值
以下属性值熟悉有什么内容即可,在使用时再去具体查询使用
1)QSS文本属性
2)QSS背景属性
3)QSS边框属性
4)QSS Box属性
我们将控件的一个区域称为Box,这个Box的内容如果溢出了如何处理,均使用Box属性进行设置
5)QSS 字体属性
6)QSS 外边框属性
控件之间的间距可以使用外边框属性设置
7)QSS 内边框属性
8)QSS 位置属性
6. 利用QtCreate实现上面按钮按下后颜色改变的功能
1)将原代码中使用setStyleSheet设置样式表的内容注释掉
#if 0ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \background-color:rgb(200,200,200);\border-style:inset;\color:rgb(0,255,0);\}\QPushButton{color:rgb(255,0,0)}"));#endif
2)在UI中选择按钮,右键选择“改变样式表”,将样式表中设置的内容粘贴至“编辑样式表”中
运行之后得到的效果与使用setStyleSheet函数设置样式表一样
7. 使用函数和QtCreate实现的区别
在“编译输出”
位置查看
UI文件可以通过uic.exe
来生成ui_widget.h
,通过以下的构造函数中的ui->setupUi(this);
加载界面
Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);}
ui->setupUi(this);
其实就是在ui_widget.h
中,代开ui_widget.h
进行查看
对应内容如下:
#include <QtWidgets/QWidget>QT_BEGIN_NAMESPACEclass Ui_Widget
{public:QPushButton *pushButton;void setupUi(QWidget *Widget){if (Widget->objectName().isEmpty())Widget->setObjectName(QStringLiteral("Widget"));Widget->resize(475, 384);pushButton = new QPushButton(Widget);pushButton->setObjectName(QStringLiteral("pushButton"));pushButton->setGeometry(QRect(150, 160, 112, 34));pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
" border-style:inset;\n"
" color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));retranslateUi(Widget);QMetaObject::connectSlotsByName(Widget);} // setupUivoid retranslateUi(QWidget *Widget){Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));pushButton->setText(QApplication::translate("Widget", "PushButton", Q_NULLPTR));} // retranslateUi};namespace Ui {class Widget: public Ui_Widget {};
} // namespace UiQT_END_NAMESPACE#endif // UI_WIDGET_H
可以看到工具自动生成代码如下,是与我们自己写的代码实际上是一样的。
pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
" border-style:inset;\n"
" color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));
可以看出两种方法都是使用setStyleSheet
实现的,原理上是一样的。
8. 样式表实现皮肤改变实例
样式表除了上述作用,最大的作用是改变应用的皮肤
1)起始页面的qss文件的加载
2)通过按钮实现不同样式的切换
实现方法,通过按钮实现不同样式表的加载
9.学习视频地址:
【Qt学习系列】11.Qt样式表Qss
【Qt学习系列】11.Qt样式表Qss(2)
Qt样式表Qss(什么是QSS;基本语法;setStyleSheet函数;样式表的属性值;利用QtCreate实现样式切换;样式表实现皮肤改变实例)相关推荐
- android 动态设置style属性值,android中的style属性值,以及一些预定义样式
Android平台定义的主题样式:android:theme="@android:style/Theme.Dialog" // 将一个Activity显示为对话框模式 androi ...
- 【QT学习】QSS样式表实现界面换肤(图文详解+源码)
文章目录 前言 一.实现效果 二.QSS简介及用法 1.什么是QSS? 2.怎么使用QSS? 三.QSS用法一:单个控件调用setStyleSheet函数 四.QSS用法二:编写单个界面.qss文件的 ...
- CSS属性以及属性值(样式)
前面讲解了CSS的各种规定,具体能应用到哪些方面呢? (一)文字排版 1.字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设 ...
- 二叉树 跳表_漫谈 LevelDB 数据结构(一):跳表(Skip List)
早对 LevelDB 有所耳闻,这次心血来潮结合一些资料粗略过了遍代码,果然名不虚传--绝对是不世出的工艺品!如果你对存储感兴趣.如果你想优雅使用C++.如果你想学习如何架构项目,都推荐来观摩一下.谷 ...
- Qt样式表之二:QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
- 【Qt】qss样式表之:自定义属性实现动态切换样式
1.问题描述 例如在播放器中播放按钮,由"播放"状态切换成"暂停"状态后,响应的图标要跟着状态切换. 2.解决方法 使用qss样式表中的属性功能,自定义一个属性 ...
- jquery 样式获取设置值_jQuery获取样式中的背景颜色属性值/颜色值
天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome. ...
- [css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解
[css] 说下你对css样式的这几个属性值initial.inherit.unset.revert的理解 initial(初始).inherit(继承).unset(未设置).revert(还原) ...
- 增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)
要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解 元素用于用户输入数据的收集 元素是最重要的表单元素,有许多type其中是用于向表单处理程序提交表单的按钮. 元 ...
- jQuery——入门基础(获取元素、样式、属性,选择集、过滤器、样式类)
目录 Jquery的加载方法 获取元素 操作样式和属性 选择集和过滤器 选择集转移 绑定常用事件 操作样式类名 Jquery的加载方法 (1)$(document).ready(function(){ ...
最新文章
- 不同stm32f103芯片内部外设资源
- [Vani有约会]雨天的尾巴 (线段树合并)
- 技术人如何提升自己的核心竞争力
- vue-router 路由嵌套显示不出来_网络协议|OSI模型第三层网络层中的路由
- TFS 2010 使用手册(一)安装与配置
- android 5.0 新功能,android5.0新特性
- 手动实现bind函数(附MDN提供的Polyfill方案解析)
- 【鸿蒙热】下的冷思考
- 全球及中国工业废物处置服务行业行业发展趋势及十四五规划展望报告2022-2028年
- 厚度仅2.5毫米,重60克,英伟达斯坦福做出了超轻薄VR眼镜
- 浙江大学计算机博士很难复试专业课,2017年浙江大学计算机考研_跨考_复试经验谈...
- java纲要_幼儿园综合素质笔试大纲
- 基于Jquery实现登录功能的前端页面
- NVL和NVL2有什么区别,NULLIF 的使用.
- Gigamon(美国硅谷的网络硬件厂商)用于SSL解密
- 【5G之道】第六章:下行链路物理层处理
- python怎么画地图空间分异图_基于地形梯度的赣南地区生态系统服务价值对人为干扰的空间响应...
- 机器学习中的准确率、召回率、F值详解
- PCB加工文件—Gerber文件的导出
- 微信企业号开发:主动发送消息
热门文章
- java求职简历模板自我评价_java简历自我评价填写样本
- OTDR系统的分类的特点
- idea中导包的快捷键
- 浅谈工业4.0时代,深信服adesk桌面云如何助力智能工厂.
- 大漠为什么不支持win10_Win10系统注册使用大漠插件的方法与设置!常见错误0x8002801...
- 黑苹果efi制作_黑苹果微星B450AMD完美方案分享包括EFI制作工具及教程
- 支付宝、京东支付场景之策略模式实战
- Matlab画直线、圆、球
- SpringBoot项目实现敏感词汇过滤
- 解析DATASTAGE导出文件dsx和congnos的mdl文件