Qt- QSS风格选择器常用属性选择器样式表盒子

1. 风格设置

Qt 提供了 3 种整体风格,使用 QStyleFactory::keys() 来获取 (windowsvista 、Windows 、Fusion)

可以在 main.cpp 中调用 setStyle 方法对应用程序进行全局风格的设置

int main(int argc, char *argv[])
{
  QApplication a(argc, argv);
  MainWindow w;
  w.show();

  // 获取整体风格
  qDebug() << QStyleFactory::keys();

  // 设置风格
  // a.setStyle("windowsvista");     // 默认使用
  // a.setStyle("Windows");
  a.setStyle("Fusion");


  return a.exec();
}

2. QSS概述

  • QSS 全称为 Qt Style Sheets 也就是 Qt 样式表,它是 Qt 提供的一种用来自定义控件外观的机制。

  • 简单理解 : QSS 的作用就是给程序美容

  • QSS 大量参考了 CSS,但是 QSS 比 CSS 要弱很多。QSS 的选择器、属性、值都比较少

2.1 图形化设置样式

第一步: 选中任意控件 --> 选择 styleSheet 属性

 第二步:点击 ... 按钮,弹出设置框

第三步:选中任意设置项

 

第四步:选中具体值

选中后:

效果:按钮中的文本变红

允许同时设置多种属性和匹配值:  

说明:

  • font: 用来设置字体

  • text-decoration: 用来设置文本样式

  • color: 用来设置文字颜色

  • background-color: 用来设置背景色

2.2 QSS 的基本写法

  • QSS 书写格式 :

选择器 {
  属性1: 值1;         background-color: red;
  属性2: 值2;         color: orange;
  ......
}
  • setStyleSheet(样式代码) : 该方法让 QSS 生效

示例:设置按钮的样式

// 设置 btn1 按钮的样式
// corlo: red;           设置字体颜色为红色
// font-size: 30px;      设置字体的大小为 30px
// font-family: '楷体';   设置字形为楷体
ui->btn1->setStyleSheet("QPushButton{color:red; font-size:30px;}");

ui->btn1->setStyleSheet("color:orange; font-family:'楷体';");

3. 选择器

选择器的作用: 选中界面上的控件(组件)

选择器示例说明
通用选择器*一次性选中所有的部件
类型选择器QPushButton一次性选中所有的QPushButton按钮
属性选择器QPushButton[flat=true]选中QPushButton按钮上有flat=true的按钮
类选择器.QPushButton和类型选择器类似,但不匹配派生类
ID选择器#btn | QPushButton#btn获取对象名为 btn 的部件

示例:

// * 通用选择器,能够选中所有部件
// 注意事项: 使用通过选择器时直接使用 this 调用 setStyleSheet 方法
this->setStyleSheet("*{color: red}");
// 类型选择器
// 一次性选中所有 QPushButton
this->setStyleSheet("QPushButton{color: orange}");
// ID选择器, 部件对项目就是 ID值 (唯一的)
// 注意事项: ID选择器前需要加 #
// QPushButton#btn3 或者 #btn3 均可
this->setStyleSheet("#btn3{font-size: 30px}");
// 属性选择器
ui->btn3->setFlat(true);    // 给 btn3 设置 flat="true" 属性,去掉按钮边框
ui->btn3->setProperty("flat", true);  // 功能同上
this->setStyleSheet("QPushButton[flat=true]{color: orange}");
// 类选择器
this->setStyleSheet(".QLabel{color: blue; font-size: 30px}");
// 从 QPushButton 派生的按钮
MyButton *myBtn = new MyButton;
myBtn->resize(100, 40);
myBtn->setText("我的按钮");
myBtn->setParent(this);
myBtn->move(30, 200);

// 类型选择器能够选中所有的 QPushButton, 包括派生的 QPushButton
//    this->setStyleSheet("QPushButton{color: orange}");

// 类选择器能够选中所有的QPushButton, 不包括派生类
this->setStyleSheet(".QPushButton{color: orange}");

4. 常用属性

属性的使用方式可参考QSS 官方文档icon-default.png?t=O83Ahttps://doc.qt.io/qt-5/stylesheet-reference.html示例icon-default.png?t=O83Ahttps://doc.qt.io/qt-5/stylesheet-examples.html

4.1 font 属性

font 用来设置文字属性

  • font-family:设置文本使用的字形,如: 宋体、微软雅黑等

  • font-size:设置字体大小

  • font-style:设置字体是否倾斜

  • font-weight:设置文本的粗细,常用值: 400, 900

  • 连写: font : 加粗 倾斜 大小 字形 (加粗和倾斜可以省略)

    • 示例: QLabel{font: 900 italic 18pt "Arial"; }

// 示例: 
ui->lb2->setStyleSheet("QLabel{font-size:30px; font-weight: 25}");
ui->lb3->setStyleSheet("QLabel{font-size:30px; font-family:'楷体'; font-weight: 50; font-style:italic}");
ui->lb4->setStyleSheet("QLabel{font: 75 18pt 'Arial';}");

4.2 text 属性

  • text-decoration:设置文本水平线的位置

    • underline 下划线 | line-through 贯穿线 | overline 上划线 | none 无线条(默认)

  • text-align: 设置文本对齐位置

    • 只能用于 QPushButton 和 QProgressBar

    • top | center | bottom

    • left | center | right

  • color: 设置文本颜色

    • 十六进制: #AA09B5 (#00 00 00 #FF FF FF)

    • rgba: 红绿蓝色值, a 为透明度 0~1 之间 (rgb(0, 0, 0) rgb(255, 255, 255))

    • 英文单词: red 、green、 cyan 等

ui->lb4->setStyleSheet("QLabel{text-decoration: overline; color: rgba(0, 0, 0, 0.15)}");
ui->pushButton->setStyleSheet("text-align: right bottom");
ui->progressBar->setStyleSheet("text-align: center; color: red");

4.3 背景

  • background-color: 设置背景色

    • 色值设置同 QColor

  • background-image:url(图片资源地址) : 设置背景图

  • background-repeat:设置背景图是否重复

    • no-repeat | repeat-x | repeat-y | repeat(默认)

  • background-position: x y; 设置背景图位置

    • x 可选值: left 、 center、 right

    • y 可选值: top、 center、bottom

  • background-attachment: 背景图是否跟随滚动

    • scroll:跟随滚动

    • fixed:固定

ui->textEdit->setStyleSheet(""
    "QTextEdit{"
       "background-image:url(:/images/3.png);"
       "background-repeat:no-repeat;"
       "background-position: right bottom;"
       "background-attachment: fixed;"
    "}"
);

5. 选择器进阶

5.1 复合选择器

选择器示例说明
后代选择器QDialog QPushButton获取 QDialog 中所有的 QPushButton 按钮
子代选择器QDialog > QPushButton获取 QDialog 中子代 QPushButton 按钮
并集选择器QPushButton,QLabel同时获取 QPushButton 和 QLabel 控件
// 子代选择器
this->setStyleSheet("QDialog>QPushButton{color: red}");

connect(ui->btn1, &QPushButton::clicked, [=](){
  QDialog dia(this);
  dia.setFixedSize(300, 300);

  QPushButton *btn = new QPushButton("btn", &dia);

  dia.exec();
});

5.2 子控件

  • 当部件比较复杂时可以使用 :: 对其子部件进行样式的设置。例如: QComboBox

 示例:

// ::down-arrow  下箭头
ui->comboBox->setStyleSheet("QComboBox::down-arrow {image: url(:/images/arrow.png)}");
ui->comboBox->addItem("北京");
ui->comboBox->addItem("上海");
ui->comboBox->addItem("深圳");

5.3 伪状态

  • 选择器可以包含伪状态来限制样式在部件的指定状态上应用

// :hover  鼠标悬浮在按钮上时触发
this->setStyleSheet("QPushButton:hover{color: red}");

// :focus  获取焦点时触发
this->setStyleSheet("QLineEdit:focus{border: 1px solid red}");

6. 样式表特点

6.1 继承

如果一个控件没有设置样式,它会继承父控件的样式

ui->groupBox->setStyleSheet("color: red");

RadioButton没有设置文字颜色,但是父控件GroupBox设置了文字颜色,所以RadioButton的文字颜色就是红色 。

6.2 层叠

当使用多个选择器设置样式并加载在同一个控件上,这些样式都会生效。

示例:

ui->groupBox->setStyleSheet("color: red;");
ui->radioButton->setStyleSheet("font-size: 30px;");

6.3 冲突

  • 当多个选择器选中同一个控件,并且同时设置同一个样式,则会产生冲突。

  • 当冲突产生时,系统会按照优先级进行设置。规则为: 给控件直接设置的样式 > 继承的样式

ui->groupBox->setStyleSheet("color: red; font-size: 40px;");
ui->radioButton->setStyleSheet("font-size: 30px;");

7. 盒子模型

当使用样式表时,每一个部件都被看做是拥有四个同心矩形的盒子,如下图所示。这四个矩形分别是内容(content)、填衬(padding)、边框(border)和边距(margin)。边距、边框宽度和填衬等属性的默认值都是0,这样四个矩形恰好重合。

注意事项:

  • 当控件的宽高已经被设置完成后,它所占的面积就固定了。

  • border、padding 和 margin 只会挤占 content 的面积

7.1 border 边框

  • border : 设置整体边框样式

  • 边框样式可以拆开设置:

    • top、left、right、bottom

    • color、style

  • border-radius: 设置圆角

// 整体设置
this->setStyleSheet("QLabel {border: 2px solid red;}");

// 分别设置上下左右
ui->label_3->setStyleSheet(""
  "border-right: 3px dashed orange; "
  "border-top: 2px solid #338811; "
  "border-left: 5px dot-dot-dash rgba(0, 0, 0, .5);"
  "border-bottom: 10px double red;"
);

// 分别设置 边框粗细、样式、颜色
ui->label_3->setStyleSheet(""
  "border-width: 3px;"
  "border-style: solid;"
  "border-color: #AE0987;"
);

圆角

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;  // 5px的圆角
    text-align: center;
}

7.2 padding 和 margin

ui->label_3->setStyleSheet(""
  "border-width: 3px;"
  "border-style: solid;"
  "border-color: #AE0987;"
);


ui->label_4->setStyleSheet(""
  "border-width: 3px;"
  "border-style: solid;"
  "border-color: #AE0987;"
  "padding: 15px;"
);

8. QSS 文件

  • 在项目中为每一个控件单独设置样式是非常麻烦的事情

  • 实际开发中,可以将样式写入到独立的 .qss 文件中,再在项目中使用 qss 文件即可

  • 使用步骤:

    1. 创建一个 xxx.qss 文件并添加到项目资源中(过程同图片资源)

    2. 在 qss 文件中编写样式代码

    3. 在 main.cpp 文件中使用 QFile 读取 qss 中的样式代码,再使用 setStyleSheet 方法设置样式即可

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity中使用Json导入项目无法识别Newtonsoft.Json

Unity导入项目无法识别Newtonsoft.Json 因为项目中用到了JSON解析&#xff0c;所以引入了一个解析类库 using Newtonsoft.Json.Linq; 换了台设备之后&#xff0c;导入这个项目之后&#xff0c;这个引用就标红了&#xff0c;找不到类库。 因为是C#报错所以研究了半天visual stu…

自动驾驶系列—深入解析自动驾驶系统验车平台:确保车辆交付质量的关键工具

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

LeetCode刷题日记之贪心算法(二)

目录 前言买卖股票的最佳时机II跳跃游戏跳跃游戏II总结 前言 在上一篇贪心算法的学习中&#xff0c;我们探讨了贪心算法的基本思路和逻辑框架。在这篇文章中&#xff0c;我将继续分享几道经典的LeetCode贪心算法题&#xff0c;并探讨其背后的解题思路和技巧。希望通过这些题目…

Java入门-创建对象

Java包管理器 包&#xff08;package&#xff09;的导入 Java体系非常庞大&#xff0c;为了管理更多的代码互不侵犯&#xff0c;采用了一个叫“包管理”的机制来管理代码&#xff0c;简单来说就是把不同的Java代码放在不同的文件夹里&#xff0c;这个文件夹就是“包”。对于使…

【Linux】【命令】查找(grep/find)与统计(wc)

查找与统计 grepfindwcExamples grep grep 命令用于在文件中或者标准输出中搜索特定字符串&#xff0c;并显示匹配结果。 grep 全称&#xff1a;Global Regular Expression Print 基本语法&#xff1a; grep [OPTION]... PATTERN [FILE] ...默认情况下&#xff0c;PATTERN 是…

Agentic RAG(基于智能体的检索增强生成)是检索增强生成(Retrieval-Augmented Generation,RAG)技术的一种高级形式

Agentic RAG&#xff08;基于智能体的检索增强生成&#xff09;是检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;RAG&#xff09;技术的一种高级形式&#xff0c;它通过引入人工智能代理&#xff08;Agent&#xff09;的概念&#xff0c;为语言模型赋予了…

2024.10月18日- Vue2组件开发(3)

Vue组件开发 一、 ref属性 如果在vue里&#xff0c;想要获取DOM对象&#xff0c;并且不想使用JS的原生语法&#xff0c;那么就可以使用ref属性。ref属性的用法&#xff1a; 1&#xff09;在HTML元素的开始标记中&#xff0c;或者在Vue子组件中的开始标记中定义&#xff0c;相…

Pytest参数详解 — 基于命令行模式!

1、--collect-only 查看在给定的配置下哪些测试用例会被执行 2、-k 使用表达式来指定希望运行的测试用例。如果测试名是唯一的或者多个测试名的前缀或者后缀相同&#xff0c;可以使用表达式来快速定位&#xff0c;例如&#xff1a; 命令行-k参数.png 3、-m 标记&#xff08;…

jenkins添加新服务

jenkins添加新服务 新建item 添加流水线 node{def envname "ENVIRONMENT:1234-dev"def projectGitUrl http://xxxxx/xxxxxx/12345.gitdef imageServer harbor.xxxxx.com //镜像仓库地址def projectAppName 12345-applicationdef projectGitBranch dev//git分…

Android Camera2在textureView中的预览和拍照

Camera2预览和拍照 1、Camera2相机模型2、Camera2的重要类3、Camera2调用流程4、Camera2调用实现 1)定义TextureView作为预览界面2)设置相机参数3)开启相机4)开启相机预览5)实现PreviewCallback6)拍照 1、Camera2相机模型 解释上诉示意图&#xff0c;假如想要同时拍摄两张不同…

React高级Hook

useReducer useReducer 是 React 提供的一个 Hook&#xff0c;用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer&#xff0c;但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。 基本用法 useReducer 接收…

五金件 CNC 加工 —— 为您的产品增添价值

在现代制造业中&#xff0c;五金件作为各种产品的重要组成部分&#xff0c;其质量和精度直接影响着产品的性能和外观。而 CNC(Computer Numerical Control&#xff0c;计算机数控)加工技术的出现&#xff0c;为五金件的生产带来了革命性的变化。它以高精度、高效率和高稳定性的…

031 商品上架-增量同步和全量同步(cubemall-search模块)

文章目录 增量同步全量同步SpuInfoDao.xmlSpuInfo实体类application.ymlpom.xmlSpuInfoController.javaSpuInfoDao.javaSpuInfoEntity.javaSpuInfoRepository.javaSpuInfoServiceImpl.javaCubemallSearchApplication.java 增量同步 1.功能分析 前端页面&#xff0c;点击"…

LabVIEW智能螺杆空压机测试系统

基于LabVIEW软件开发的螺杆空压机测试系统利用虚拟仪器技术进行空压机的性能测试和监控。系统能够实现对螺杆空压机关键性能参数如压力、温度、流量、转速及功率的实时采集与分析&#xff0c;有效提高测试效率与准确性&#xff0c;同时减少人工操作&#xff0c;提升安全性。 项…

智能指针(3)

目录 可能问题五&#xff1a; 问题分析&#xff1a; 答案格式&#xff1a; shared_ptr的模拟实现 部分1&#xff1a;引用计数的设计(分考点1) 代码实现&#xff1a; 部分2&#xff1a;作为类所必须的部分(分考点2) 代码实现&#xff1a; 部分3&#xff1a;拷贝构造函数…

河北工业大学《2021年+2020年980自动控制原理真题》 (完整版)

本文内容&#xff0c;全部选自自动化考研联盟的&#xff1a;《河北工业大学980自控考研资料》的真题篇&#xff0c;真题年份为2004-最新一年。后续会持续更新更多学校&#xff0c;更多年份的真题&#xff0c;记得关注哦~ 目录 2021年真题 2020年真题 Part1&#xff1a;2021年…

Data+AI下的数据湖和湖仓一体发展史

DataAI下的数据湖和湖仓一体发展史 前言数据湖的“前世今生”AI时代的救星&#xff1a;湖仓一体湖仓一体实践演进未来趋势&#xff1a;智能化、实时化结语 前言 数据湖&#xff1f;湖仓一体&#xff1f;这是什么高科技新名词&#xff1f; 别急&#xff0c;我们慢慢聊。想象一…

DBeaver导出数据表结构和数据,导入到另一个环境数据库进行数据更新

在工作中&#xff0c;我们会进行不同环境之间数据库的数据更新&#xff0c;这里使用DBeaver导出新的数据表结构和数据&#xff0c;并执行脚本&#xff0c;覆盖另一个环境的数据库中对应数据表&#xff0c;完成数据表的更新。 一、导出 右键点击选中想要导出的数据表&#xff0…

parent参数

一、parent参数 parent参数除了有之前父窗口的界面效果外&#xff0c;还体现了Qt的内存管理策略。parent参数的对象是当前创建的对象的父对象。因此在Qt中存在父对象与子对象的概念&#xff0c;需要注意的是&#xff0c;此处的父子关系与继承无关&#xff0c;至于parent参数有关…

UNION 联合查询

1.UNION ALL联合查询 同样为了演示方便&#xff0c;先向 teacher 表插入多条测试数据&#xff1a; INSERT INTO teacher (name,age,id_number,email) VALUES (姓名一,17,42011720200604077X,NULL), (姓名二,18,42011720200604099X,123qq.com), (姓名三,19,42011720200604020X…