Qt 5.14.2 学习记录 —— 이십이 QSS
文章目录
- 1、概念
- 2、基本语法
- 3、给控件应用QSS设置
- 4、选择器
- 1、子控件选择器
- 2、伪类选择器
- 5、样式属性
- box model
- 6、实例
- 7、登录界面
1、概念
参考了CSS,都是对界面的样式进行设置,不过功能不如CSS强大。
可通过QSS设置样式,也可通过C++代码设置样式,但QSS使用优先级更高。
2、基本语法
创建QWidget项目
选择器表明是要对哪个widget,即控件进行设置。属性名属性值这个键值对就是具体的设置
比如
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("QPushButton { color: red; }");
}
对一个控件进行设置后,这个控件的子控件也会应用该设置。如果要对界面中每个按钮都设置,那么就可以设置界面的样式
this->setStyleSheet("QPushButton { color: red; }");
这样是对界面中所有按钮进行设置。这是对于界面这个控件的设置,而全局设置在main.cpp中写,方便维护。
#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);// a表示整个应用程序a.setStyleSheet("QPushButton { color: red; }");Widget w;w.show();return a.exec();
}
如果全局和控件设置中都写了对按钮的设置,两个设置一样,那么按照控件的设置来显示。
如果两个设置不一样,比如全局设置了颜色,而控件设置中是大小,那么最终的样式就是既有大小又有颜色,这是叠加,即CSS的层叠性,QSS也有这个性质。
3、给控件应用QSS设置
通常来说,QSS代码会放到单独的文件中,除非代码很简单,那可以直接和C++代码放在一起。
通过qrc来管理样式文件。手动创建一个qss空文件,改扩展名为qss即可,然后添加到qrc中,路径设置为根目录。
编写qss文件
QPushButton {color: red;
}
main.cpp中引入qss文件
#include "widget.h"#include <QApplication>
#include <QFile>QString loadQSS()
{QFile file(":/style.qss");file.open(QFile::ReadOnly);QString style = file.readAll();file.close();return style;
}int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(loadQSS());Widget w;w.show();return a.exec();
}
QSS中更方便也实用的方法是在ui文件里写,右键控件,改变样式表。
QPushButton { color: red; }
样式表里这样写就设置上了。不过这样排查起来比较麻烦。
4、选择器
选择所有的widget是*,在之前的按钮选择中,QPushButton就是选择所有的PushButton和其子控件,.QPushButton是选择所有的PushButton,不包含子控件。
QString style = "QPushButton { color: red; }";style += "#pushButton_2 { color: green; }";style += "QLineEdit, QLabel { color: orange; }";
id选择器优先级比类型选择器优先级更高。
1、子控件选择器
一个控件有哪些子控件,查看Qt文档
// main.cppQString style = "QComboBox::down-arrow { image: url(:/down.png); }";
a.setStyleSheet(style);
2、伪类选择器
这个选择器选择的是控件的状态
常见伪类选择器
unchecked则表示未被选中的状态。更多的查看文档。
对一个按钮设置
QString style = "QPushButton { color: red; }";style += "QPushButton:hover { color: green; }";a.setStyleSheet(style);
当然,这个也可以通过事件来写。
5、样式属性
查看文档,并非所有的控件都可以设置样式。
box model
图中自外向内分别是外边距,边框,内边距,内容。Qt中每个widget都是矩形。
复合属性表示,一个属性有多个子属性,比如margin有上下左右四个方向可设置。
6、实例
按钮样式
// 样式表QPushButton {font-size: 20px;border: 2px solid rgb(170, 85, 255);border-radius: 10px;
}QPushButton:pressed {background-color: rgb(170, 85, 255);
}
复选框样式
在项目的qrc里保存好几个图标
QCheckBox {font-size: 20px;
}QCheckBox::indicator {vidth: 20px;height: 20px;
}QCheckBox::indicator:unchecked {image: 选择添加资源
}QCheckBox::indicator:unchecked:hover {image: 选择添加资源
}QCheckBox::indicator:unchecked:pressed {image: 选择添加资源
}QCheckBox::indicator:checked {image: 选择添加资源
}QCheckBox::indicator:checked:hover {image: 选择添加资源
}QCheckBox::indicator:checked:pressed {image: 选择添加资源
}
单选框同样写法。
输入框样式
QLineEdit {border-vidth: 2px;border-color: rgb(170, 170, 255);border-style: solid;border-radius: 20px;padding-left: 10px; color: rgb(85, 0, 255);font-size: 18;selection-color: rgb(255, 170, 255);
}
selection-color设置选中文本时的文字颜色。
列表框样式
QListWidget::item:hover {background-color: rgb(170, 255, 127);
}QListWidget::item:selected {background-color: rgb(170, 85, 255);
}
渐变色需要x1,y1,x2,y2参数坐标,取值都是0或1,比如x1y1都是0,x2y2都是1,那么就是从左上到右下的渐变。
QListView::item:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FAFBFE, stop: 1, #DCDEF1);
}QListView::item:selected {border: 1px solid #6a6ea9;background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #6a6ea9, stop: 1, #888dd9);
}
菜单样式
创建QMainwindow项目
QMenuBar {background-color: white;spacing: 3px;
}QMenuBar::item {border-radius: 10px;padding: 3px 10px;background-color: rgb(170, 255, 127);
}QMenuBar::item:selected {background-color: rgb(170, 170, 0);
}QMenu::item {border: 2px solid transparent;padding: 2px 10px;
}QMenu::item:selected {border: 2px solid green;
}QMenu::separator {height: 2px;background-color: orange;margin: 0 4px;
}
QMenuBar::item表示选中菜单栏中的元素;spacing表示菜单之间的间隔;border的transparent能让在选中菜单项时,菜单项的文字不会移动一下,其操作是在没被选中时加了无颜色边框,做到和被选中时同样的设置;separator是在设置分隔线。
7、登录界面
创建一个QWidget界面,放两个Line Edit,Radio Button,PushButton到界面上。通过最左上角的按钮把它们放到一块。
输入框和按钮的最小高度和最大高度都设为50。
给上面的控件套一个和窗口大小一样的QFrame控件,在QFrame中设置背景图。设置背景图有background-image,border-image,前者设置固定大小的图片,后者设置的图片可以随控件大小而变化。右击右上角区域的QWidget,改变样式表
QFrame {border-image: url(:/clouds.jpg);
}QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border: none;border-radius: 10px;
}QCheckBox {color: white;font-size: 18px;
}QPushButton {font-size: 20px;color: white;background-color: #555;border-radius: 10px;
}QPushButton:pressed {color: blakc;background-color: rgb(0, 255, 0);
}
两个输入框的placeholderText改为请输入用户名,请输入密码,密码那个框的echoMode改为Password。
结束。
相关文章:

Qt 5.14.2 学习记录 —— 이십이 QSS
文章目录 1、概念2、基本语法3、给控件应用QSS设置4、选择器1、子控件选择器2、伪类选择器 5、样式属性box model 6、实例7、登录界面 1、概念 参考了CSS,都是对界面的样式进行设置,不过功能不如CSS强大。 可通过QSS设置样式,也可通过C代码…...

Hot100之哈希
1两数之和 题目 思路解析 解法1--两次循环 解法2--哈希表一次循环 代码 解法1--两次循环 class Solution {public int[] twoSum(int[] nums, int target) {int nums1[] new int[2];int length nums.length;for (int i 0; i < length; i) {for (int j i 1; j < …...
油漆面积——蓝桥杯
1.题目描述 X 星球的一批考古机器人正在一片废墟上考古。 该区域的地面坚硬如石、平整如镜。 管理人员为方便,建立了标准的直角坐标系。 每个机器人都各有特长、身怀绝技。它们感兴趣的内容也不相同。 经过各种测量,每个机器人都会报告一个或多个矩…...
深度解析:网站快速收录与服务器性能的关系
本文转自:百万收录网 原文链接:https://www.baiwanshoulu.com/37.html 网站快速收录与服务器性能之间存在着密切的关系。服务器作为网站运行的基础设施,其性能直接影响到搜索引擎对网站的抓取效率和收录速度。以下是对这一关系的深度解析&am…...

925.长按键入
目录 一、题目二、思路三、解法四、收获 一、题目 你的朋友正在使用键盘输入他的名字 name。偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次。 你将会检查键盘输入的字符 typed。如果它对应的可能是你的朋友的名字&am…...
JavaScript 中的 var 和 let :关键区别与使用建议
在 JavaScript 开发中,变量声明是基础且重要的部分。 var 和 let 都是用于声明变量的关键字,但它们在作用域、变量提升、重复声明等方面存在显著差异。本文将详细探讨它们的区别,并给出使用建议。 1. 作用域 1.1 var 的作用域 …...
寒假刷题Day19
一、923. 三数之和的多种可能 class Solution { public:int threeSumMulti(vector<int>& arr, int target) {const int MOD 1000000007; // 正确的模数long long ans 0; // 使用 long long 防止溢出std::sort(arr.begin(), arr.end());for (size_t i 0; i < a…...
写好简历的三个关键认知
在当今竞争激烈的就业市场中,一份优秀的简历往往是敲开理想企业大门的第一把钥匙。然而,很多求职者在写简历时往往不得要领,让宝贵的机会从指间溜走。今天,让我们一起探讨如何提升简历写作水平,让你的职业之路走得更顺…...

工具的应用——安装copilot
一、介绍Copilot copilot是一个AI辅助编程的助手,作为需要拥抱AI的程序员可以从此尝试进入,至于好与不好,应当是小马过河,各有各的心得。这里不做评述。重点在安装copilot的过程中遇到了一些问题,然后把它总结下&…...
Koa 基础篇(二)—— 路由与中间件
let app new Koa() router.get(“/”,async ctx > { ctx.body “hello koa router” }) app.use(router.routes()) app.use(router.allowedMethods()) app.listen(3000) 运行项目,在浏览器访问本地3000端口,在页面上就会看到输出的语句。这就…...

帆软 FCA -业务分析师认证学习
帆软 FCA -业务分析师认证学习 认证概述 适合人群 企业中有需求管理、指标梳理、业务逻辑梳理、项目规划等需求的人员,想提升综合数据能力、推进数据应用落地的业务/IT骨干。 具体-FCA-业务分析理论 考试要求: FCA-业务分析理论考试- 费用:…...
Miniconda 安装及使用
文章目录 前言1、Miniconda 简介2、Linux 环境说明2.1、安装2.2、配置2.3、常用命令2.4、常见问题及解决方案 前言 在 Python 中,“环境管理”是一个非常重要的概念,它主要是指对 Python 解释器及其相关依赖库进行管理和隔离,以确保开发环境…...
solidity高阶 -- Eth支付
在区块链的世界里,智能合约是实现去中心化应用(DApp)的核心技术之一。Solidity 是一种专门用于编写以太坊智能合约的编程语言,它可以帮助开发者构建各种功能,包括支付功能。 今天,我们就来探讨如何使用 Sol…...
深入理解Java中的String
前言 在Java中,String类是一个非常重要的内置类,用于处理字符串数据。字符串是不可变的(immutable),这意味着一旦创建,字符串的内容不能被修改。作为Java中最为基础和常用的类之一,String类在内…...

洛谷 P1734 最大约数和 C语言
P1734 最大约数和 - 洛谷 | 计算机科学教育新生态 题目描述 选取和不超过 S 的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大。 输入格式 输入一个正整数 S。 输出格式 输出最大的约数之和。 输入输出样例 输入 #1复制 …...

Golang 执行流程分析
文章目录 1. 编译和运行2. 编译和运行说明 1. 编译和运行 如果是对源码编译后,再执行,Go的执行流程如下图 如果我们是对源码直接 执行 go run 源码,Go的执行流程如下图 两种执行流程的方式区别 如果先编译生成了可执行文件,那么…...

python学opencv|读取图像(五十一)使用修改图像像素点上BGR值实现图像覆盖效果
【1】引言 前序学习了图像的得加方法,包括使用add()函数直接叠加BGR值、使用bitwise()函数对BGR值进行按位计算叠加和使用addWeighted()函数实现图像加权叠加至少三种方法。文章链接包括且不限于: python学opencv|读取图像(四十二ÿ…...
Flask数据的增删改查(CRUD)_flask删除数据自动更新
查询年龄小于17的学生信息 Student.query.filter(Student.s_age < 17) students Student.query.filter(Student.s_age.__lt__(17))模糊查询,使用like,查询姓名中第二位为花的学生信息 like ‘_花%’,_代表必须有一个数据,%任何数据 st…...
kamailio-ACC模块介绍【kamailio6.0. X】
Acc 模块 作者 Jiri Kuthan iptel.org jiriiptel.org Bogdan-Andrei Iancu Voice Sistem SRL bogdanvoice-system.ro Ramona-Elena Modroiu rosdev.ro ramonarosdev.ro 编辑 Bogdan-Andrei Iancu Voice Sistem SRL bogdanvoice-system.ro Sven Knoblich 1&1 Internet …...
数据库对象
数据库对象 数据库对象是构成数据库结构的基本单位,它们定义了数据库存储的数据类型、数据的组织方式以及数据之间的关系。在数据库中,对象可以包括表,视图,索引,触发器,存储过程,函数等多种类…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...

(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...