Qt之样式表设置总结。。。持续更新

参考文章链接如下:
Qt样式表之一:Qt样式表和盒子模型介绍
Qt样式表之二:QSS语法及常用样式
Qt样式表之三:实现按钮三态效果的三种方法
Qt样式表之一:QSS名词解释
Qt样式表之二:常用控件qss
Qt样式表之三:QSS奇技淫巧

样式表介绍

Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件的世界

样式表特性:
1)层叠性:是处理样式发生冲突的一种能力,只有在多个选择器匹配到同一个 Widget 才会发生层叠性。

pBtn1->setStyleSheet("QPushButton{color: yellow;}");
pBtn1->setStyleSheet(".QPushButton{color: blue;}");

吃下栗子:这两个选择器匹配到同一个按钮,但后一个样式会覆盖前面的样式。

2)级联效应:QSS可以在QApplication、父部件、子部件中设置。冲突发生时,不论冲突规则的特殊性,部件自身的样式表总优先于任何继承样式表。考虑下面的例子。首先,我们在QApplication中设置样式表:

qApp->setStyleSheet("QPushButton { color: white }");
然后,我们设置QPushButton的样式表:myPushButton->setStyleSheet("color: blue");

QPushButton样式表强制QPushButton(以及任何子部件)显示蓝色文字,尽管应用程序范围内的样式表提供的规则更具体。

3)继承性:在经典的CSS中,当字体和颜色没有明确设置时,它就会自动从父继承。当使用QSS时,部件不会自动从父继承字体和颜色。例如,一个QGroupBox中包含QPushButton:

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton不会继承其父QGroupBox的颜色,而是显示系统的颜色。

设置样式表的方法

使用代码设置样式表

**样式表使用文本描述,可以使用 QApplication:: setStyleSheet() 函数将其设置到整个应用程序上,也可以使用 QWidget::setStyleSheet() 函数将其设置到一个指定的部件(还有它的子部件)上。如果在不同的级别都设置了样式表,那么Qt会使用所有有效的样式表,这被称为样式表的层叠。**下面来看一个简单的例子。

新建Qt Gui应用,项目名称为myStyleSheets,类名为MainWindow,基类保持QMainWindow不变。建立好项目后进入设计模式,向界面上拖入一个PushButton和一个Horizontal Slider,然后在mainwindow.cpp文件中的构造函数里添加如下代码:

//设置pushButton的背景颜色为黄色
ui->pushButton->setStyleSheet("background:yellow");
//设置horizontalSlider的背贵为蓝色
ui->horizontalSlider->setStyleSheet("background:blue");

**这样便设置了两个部件的背景色。不过像这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表,如果想对所有的相同部件都使用相同的样式表,那么可以在它们的父部件上设置样式表。因为这里两个部件都在MainWindow上,所以可以为MainWindow设置样式表。**先注释掉上面的两行代码,然后添加如下代码:

this->setStyleSheet("background:blue");

这样,以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都会改为这里指定的颜色。

在设计模式(Ui界面)中设置样式表

除了使用代码来设置样式表外,也可以在设计模式中为添加到界面上的部件设置样式表,这样更加直观。先注释掉上面添加的代码,然后进入设计模式。在界面上右击,在弹出的菜单中选择“改变样式表”,这时会出现编辑样式表对话框,在其中输入如下代码:

QPushButton{
}

注意光标留在第一个大括号后。然后单击上面“添加颜色”选项后面的下拉箭头, 在弹出的列表中选择“background-color”一项。这时会弹出选择颜色对话框,随便选择一个颜色,然后单击“确定按钮”,这时会自动添加代码:

QPushButton{background-color: rgb(0, 0, 255);
}

可以看到,在这里设置样式表不仅很便捷而且很直观,不仅可以设置颜色,还可以使用图片,使用渐变颜色或者更改字体。在设计模式,有时无法正常显示设置好的样式表效果,不过运行程序后会正常显示的。这里是在MainWindow界面上设置了样式表,当然,也可以按照这种方法在指定的部件上添加样式表。

注:程序设置的样式表比ui文件里设置的优先级更高。

盒子模型介绍

使用Style Sheets时,所有的部件都被视为有四个同心矩形的盒子(box):边缘矩形(margin rectangle),边框矩形(border rectangle),填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型对四个矩形有详细的描述,如下图所示:
在这里插入图片描述
边缘,边框宽度和填充属性默认为0。这样四个矩形(margin, border, padding和content)重合

使用background-image属性,你可以为部件指定背景图片。默认地,背景图片只画在边框以内。背景图片不随部件大小改变而改变。提供一个随部件大小改变而改变的背景或皮肤,必须使用border-image因为border-image属性提供了一个备选背景,所以并不需要再为部件指定一个背景图片。在两者都指定的情况下,border-image将画于background-image之上

备注:除了内容外, 其他三个部分均不能单独设置颜色, 只能设置其宽度, 并且是以像素为单位。Widget 的width和height属性指的是整个盒子的宽度和高度

样式表语法

样式规则:选择器+声明(属性)

QSS包含了一个样式规则,**一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指定哪些属性应该在部件上进行设置。**例如:

QPushButton { color: red }

上面的例子中QPushButton是选择器,{ color: red }是声明,该规则指定QPushButton及其子类(例如:MyPushButton)应使用红色作为前景色。

几个选择器可以指定相同的声明,使用逗号(,)来分隔选择器。例如:

QPushButton, QLineEdit, QComboBox { color: red }

相当于三个规则序列:

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

声明部分的规则是一个属性值对(property: value)列表,包含在花括号中,以分号分隔。例如:

QPushButton { color: red; background-color: white }

参考助手:Qt Style Sheets Reference中List of Properties部分。

注:QSS通常不区分大小写(即:color、Color、COLOR、cOloR指同一属性),唯一例外就是类名(class names)、对象名(object names)、属性名(property names)区分大小写。

选择器

下表总结了最有用的选择器,所有示例使用了选择器中最简单的类型,类型选择器QSS支持所有的selectors defined in CSS2。
在这里插入图片描述
思维导图如下:
在这里插入图片描述
在这里插入图片描述

选择器::辅助控制器(sub-control)

辅助控制器一词是相对于选择器存在的,可以理解为我们选择了一个控件的子部件,例如一个 QcheckBox,这个部件它分为两个部分,文本部分和可以点击的小窗口的部分,如下图所示而这个可点击的小窗口部分我们要单独的设置,就要再次分离出来,就需要::indicator(QCheckBox 有这个辅助控制器)来设置,例子如下:

/*说明是在QCheckBox中的指示符( indicator)宽为20px,height 为20px。*/
QCheckBox::indicator{width:20px;height:20px;
}

辅助控制器是用双冒号进行指定。如果没有::indicator那么我们这个小例子将是对整个 QCheckBox 设置的,使用了辅助控制器的时候就自动分离出这个小窗口,对小窗口进行设置。不同的选择器有不同的辅助控制器,具体可查看下表
在这里插入图片描述
在这里插入图片描述

选择器:伪状态( pseudo-states)

除了辅助控制器对一个部件的分离,样式表还可以根据窗口部件的各个状态来设置窗口。例如 hover 表示鼠标划过时的状态,例子如下:

/*例子说明只有当鼠标滑过复选框文本时变为red*/
QCheckBox:hover{color: red;
}

伪状态列表如下:
在这里插入图片描述
在这里插入图片描述
思维导图如下:
在这里插入图片描述

选择器:逻辑否(!)+伪状态

有时候我们在设置某种状态的属性时,希望同时在某些非(!)的状态下设置,这个时候我们就要用(!)来选择某种状态,比如 !checked 、!has-children(没有子目录)等等

声明(属性)

它是一个窗口部件所固有的特征、性质,每一个窗口部件都会有属于他们自己的属性。如前面做的小例子中我们一直未曾提过 color,width,height 等。组合多个属性同时使用设计出多种效果

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。

位置属性

position:定位属性
如果 position 是 relative(默认值),则将子控件移动一定的偏移量;如果 position 是 absolute,则指定子控件相对于父控件位置
top
right
bottom
left

字体属性

font:字体样式
font-family:字体类型
取值: 各种字体名称(如宋体,黑体,隶书等)
作用: 设置文字的字体

font-size:字体大小
取值: 数值+px(如20px)
作用: 设置字体的大小

font-style:字体风格。取值:

  • normal:正常
  • italic:斜体
  • oblique:倾斜的字体
    作用: 设置字体的风格

font-weight:字体粗细
取值:

  • normal: 正常粗细
  • bold: 加粗
  • 整型数字(数越大,字体越粗)
    作用: 设置文字的粗细

color:字体颜色

连写格式
font

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布

ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布 介绍创建ASP.NET Web (.Net Framework)http服务器创建项目创建脚本部署Http站点服务器测试 Get测试编写刚才的TestWebController.cs代码如下测试写法1测试写法2 Post测…

yolov11剪枝

思路:yolov11中的C3k2与yolov8的c2f的不同,所以与之前yolov8剪枝有稍许不同; 后续:会将剪枝流程写全,以及增加蒸馏、注意力、改loss; 注意: 1.在代码105行修改pruning.get_threshold(yolo.mo…

贪心算法基础解析

贪心算法 贪心算法的核心思想是:在每个阶段选择当前状态下最优的选择,从而希望通过局部最优的选择达到全局最优。 53. 最大子数组和 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素&#…

【初阶数据结构和算法】二叉树顺序结构---堆的定义与实现(附源码)

文章目录 一、堆的定义与结构二、堆的实现1.堆的初始化和销毁堆的初始化堆的销毁 2.向上调整算法和入堆向上调整算法入堆 3.向下调整算法和出堆顶数据向下调整算法出堆 4.堆的有效数据个数和判空堆的有效数据个数堆的判空 5.取堆顶数据 三、堆的源码 一、堆的定义与结构 本篇内…

【北京迅为】iTOP-4412全能版使用手册-第二十章 搭建和测试NFS服务器

iTOP-4412全能版采用四核Cortex-A9,主频为1.4GHz-1.6GHz,配备S5M8767 电源管理,集成USB HUB,选用高品质板对板连接器稳定可靠,大厂生产,做工精良。接口一应俱全,开发更简单,搭载全网通4G、支持WIFI、蓝牙、…

大数据新视界 -- 大数据大厂之 Hive 函数库:丰富函数助力数据处理(上)(11/ 30)

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

【Docker】Docker配置远程访问

配置Docker的远程访问,你需要按照以下步骤进行操作: 1. 在Docker宿主机上配置Docker守护进程监听TCP端口 Docker守护进程默认只监听UNIX套接字,要实现远程访问,需要修改配置以监听TCP端口。 ‌方法一:修改Docker服务…

LuaForWindows_v5.1.5-52.exe

Releases rjpcomputing/luaforwindows GitHub #lua C:\Users\Administrator\Desktop\test.lua print("Hello lua!") print("ZengWenFeng 13805029595")

力扣380:O(1)时间插入、删除和获取随机数

实现RandomizedSet 类: RandomizedSet() 初始化 RandomizedSet 对象bool insert(int val) 当元素 val 不存在时,向集合中插入该项,并返回 true ;否则,返回 false 。bool remove(int val) 当元素 val 存在时&#xff0…

Mysql后台线程

在InnoDB的后台线程中,分为4类,分别是:Master Thread 、IO Thread、Purge Thread、Page Cleaner Thread。 Master Thread 核心后台线程,负责调度其他线程,还负责将缓冲池中的数据异步刷新到磁盘中, 保持数据的一致性…

antd table 自定义表头过滤表格内容

注意:该功能只能过滤可一次性返回全部数据的表格,通过接口分页查询的请自主按照需求改动哈~ 实现步骤: 1.在要过滤的列表表头增加过滤图标,点击图标显示浮窗 2.浮窗内显示整列可选选项,通过勾选单选或者全选、搜索框来…

Streamlit 应用从本地部署到服务器并进行访问

目录 1 部署 Streamlit 应用到服务器2 配置服务器允许远程访问3 使用反向代理4 使用 HTTPS5 总结 1 部署 Streamlit 应用到服务器 1 选择一个服务器平台 首先,你需要选择一个服务器平台来部署你的 Streamlit 应用。常见的选择包括: 云服务器&#xff1a…

【分页查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

CSP-J初赛不会备考咋办?

以下备考攻略仅供参考,如需资料请私信作者!求支持! 目录 一、编程语言基础 1.语法知识 -变量与数据类型 -运算符 -控制结构 -函数 2.标准库的使用 -输入输出流 -字符串处理 -容器类(可选) 二、算法与数据结构 1.基…

sentinel使用手册

1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId></dependency>2.yaml spring:cloud:sentinel:transport:dashboard: localhost:8090 #sentinel控制台地址…

火语言RPA流程组件介绍--键盘按键

&#x1f6a9;【组件功能】&#xff1a;模拟键盘按键 配置预览 配置说明 按键 点击后,在弹出的软键盘上选择需要的按键 执行后等待时间(ms) 默认值300,执行该组件后等待300毫秒后执行下一个组件. 输入输出 输入类型 万能对象类型(System.Object)输出类型 万能对象类型…

Spring框架整合各种常用日志方法详解

文章目录 Spring框架整合各种常用日志方法详解一、引言二、Spring日志框架整合1、SpringBoot日志整合1.1、引入依赖1.2、配置日志 2、使用Log4j22.1、引入依赖2.2、配置Log4j2 三、在代码中使用日志四、使用lombok.extern.slf4j.Slf4j五、总结 Spring框架整合各种常用日志方法详…

网站布局编辑器前端开发:设计要点与关键考量

一、设计说明 &#xff08;一&#xff09;功能模块 可视化操作区域 这是用户进行网站布局设计的主要画布。通过拖放各种页面元素&#xff08;如文本框、图片、按钮、导航栏等&#xff09;到该区域&#xff0c;用户能够直观地构建网站页面的布局结构。支持对元素的实时缩放、旋…

环形链表系列导学

问题描述 给定一个单链表,可能存在一个环。我们的目标是找到环的入口节点,即从这个节点开始,链表进入循环。如果没有环,则返回 null。 将链表问题转化为数学问题 状态序列与循环 我们可以将链表节点视为状态,每个节点的 next 指针代表状态转移函数 f f f。从头节点开始,我…

springboot vue 开源 会员收银系统 (12)购物车关联服务人员 订单计算提成

前言 完整版演示 http://120.26.95.195/ 开发版演示 http://120.26.95.195:8889/ 在之前的开发进程中&#xff0c;我们完成订单的挂单和取单功能&#xff0c;今天我们完成购物车关联服务人员&#xff0c;用户计算门店服务人员的提成。 1.商品关联服务人员 服务人员可以选择 一…