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 方法设置样式即可

 

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

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

相关文章

ElasticSearch+Kibana 8.1.0安装部署

ElasticSearch+Kibana 8.1.0安装部署

Windows环境 通过百度网盘分享的文件&#xff1a;ElasticSearchKibanaik 链接&#xff1a;https://pan.baidu.com/s/14Bf9AkRjf5igaa10e18OWA?pwd1rmh 提取码&#xff1a;1rmh 下载后解压 命令都在bin目录下用cmd执行 一、ElasticSearch 注意&#xff1a;8.1.0自带jdk17&…
阅读更多...
2024版51单片机教程

2024版51单片机教程

一、教程简介 前置基础
阅读更多...
Linux云计算 |【第五阶段】ARCHITECTURE-DAY1

Linux云计算 |【第五阶段】ARCHITECTURE-DAY1

主要内容&#xff1a; 了解ELK分布式日志分析系统、Elasticsearch分布式集群搭建、Kibana搭建、使用kibana展示数据&#xff1b; 一、日志分析系统ELK概述 ELK 是 Elasticsearch、Logstash 和 Kibana 的缩写&#xff0c;是三款软件都是开源软件&#xff0c;通常是配合使用&am…
阅读更多...
CentOS7安装Mysql5.7（ARM64架构）

CentOS7安装Mysql5.7（ARM64架构）

1.第一步&#xff1a;下载 arm 版本离线 mysql 5.7 安装包 arm 版本离线 mysql 5.7 安装包 2.第二步&#xff1a;查询并卸载 CentOS 自带的数据库 Mariadb 找到数据库 mariadb&#xff0c;如果有会给出一个结果&#xff0c;结果是 mariadb 名称 rpm -qa | grep mariadb 如果…
阅读更多...
64页精品PPT | 汽车经销商数据应用解决方案

64页精品PPT | 汽车经销商数据应用解决方案

汽车经销商正面临前所未有的盈利能力挑战。从18年起 &#xff0c;传统燃油车汽车行业开始步入低速增长阶段 &#xff0c;卖车已经挣不到钱 &#xff0c;利润往往来自任务完成的厂家返利&#xff1b;新兴的直营模式的出现 &#xff0c;冲击了传统授权经销的方式 &#xff0c;疫情…
阅读更多...
matlab生成任意长度余弦波coe文件以及vivado仿真

matlab生成任意长度余弦波coe文件以及vivado仿真

一、matlab生成任意长度余弦波coe文件 clear clc close all width32; %rom的位宽 depth3600; %rom的深度 xlinspace(0,2*pi,depth); %在一个周期内产生3600个采样点 y_coscos(x); %生成余弦数据 y_cosround(y_cos*(2^(width-1)-1))2^(width-1)-1; %将余弦数据全部转换为…
阅读更多...
用Eclipse运行第一个Java程序

用Eclipse运行第一个Java程序

1.左键双击在桌面“软件 (文件夹)”&#xff0c;打开该文件夹 2.左键双击“eclipse (文件夹)”&#xff0c;打开该文件夹 3.左键双击“eclipse (文件夹)”&#xff0c;打开该文件夹 4.左键双击“eclipse.exe”&#xff0c;运行这个可执行程序 5.左键单击“Ok&#xff08;按下按…
阅读更多...
MySQL学习笔记(持续更新，目前到十一章锁)

MySQL学习笔记(持续更新，目前到十一章锁)

1、Mysql概述 1.1 数据库相关概念 三个概念&#xff1a;数据库、数据库管理系统、SQL 名称全称简称数据库存储数据的仓库&#xff0c;数据是有组织的进行存储DataBase&#xff08;DB&#xff09;数据库管理系统操纵和管理数据库的大型软件DataBase Mangement System&#xf…
阅读更多...
使用npm i报错node-sass失败问题解决

使用npm i报错node-sass失败问题解决

node 版本&#xff1a;v14.15.4 解决方法&#xff1a; npm config set sass_binary_sitehttps://npmmirror.com/mirrors/node-sass设置完之后&#xff0c;再npm i 就可以下载成功 亲测有效
阅读更多...
视频汇聚平台EasyCVR支持云端录像丨监控存储丨录像回看丨录像计划丨录像配置

视频汇聚平台EasyCVR支持云端录像丨监控存储丨录像回看丨录像计划丨录像配置

EasyCVR视频汇聚融合平台&#xff0c;是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。平台以其强大的视频处理、汇聚与融合能力&#xff0c;在构建视频监控系统中展现出了独特的优势。 EasyCVR视频汇聚平台可接入传统监控行业中高清网络摄像机的RTSP…
阅读更多...
C++ | Leetcode C++题解之第475题供暖器

C++ | Leetcode C++题解之第475题供暖器

题目&#xff1a; 题解&#xff1a; class Solution { public:int findRadius(vector<int>& houses, vector<int>& heaters) {sort(houses.begin(), houses.end());sort(heaters.begin(), heaters.end());int ans 0;for (int i 0, j 0; i < houses.…
阅读更多...
【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用

【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用

上篇文章&#xff1a;【Vue】Vue3.0&#xff08;十一&#xff09;Vue 3.0 中 computed 计算属性概念、使用及示例 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年10月16日12点45分 文章…
阅读更多...
施磊C++ | 进阶学习笔记 | 5.设计模式

施磊C++ | 进阶学习笔记 | 5.设计模式

五、设计模式 文章目录 五、设计模式1.设计模式三大类型概述一、创建型设计模式二、结构型设计模式三、行为型设计模式 2.设计模式三大原则3.单例模式1.饿汉单例模式2.懒汉单例模式 4.线程安全的懒汉单例模式1.锁双重判断2.简洁的线程安全懒汉单例模式 5.简单工厂(Simple Facto…
阅读更多...
2024-10-15 学习人工智能的Day7

2024-10-15 学习人工智能的Day7

在简单的了解完学习人工智能所需的高数、线代、概率论后&#xff0c;我们又重新开始了国庆的学习&#xff0c;因为已经有十余天没有接触python&#xff0c;所以今天的内容主要是对之前学习的python的回顾与总结&#xff0c;然后对各个部分进行了简单的实践&#xff0c;在最后学…
阅读更多...
【无线技术】Wireless Technologies and Techniques——Antenna and Propagation

【无线技术】Wireless Technologies and Techniques——Antenna and Propagation

一、 天线基础 Introduction to Antenna 天线&#xff08;Antenna&#xff09;是一种设备&#xff0c;用于将电信号转换为无线电波进行传输&#xff0c;反之亦然&#xff08;用于接收&#xff09;。天线是所有无线系统的 “ 眼睛和耳朵 ” &#xff0c;负责电磁波的发射和接收。…
阅读更多...
性能测试工具JMeter

性能测试工具JMeter

1. JMeter介绍 环境要求&#xff1a;要求java&#xff0c;jdk版本大于8&#xff1b; Apache JMeter 是 Apache 组织基于 Java 开发的压⼒测试⼯具&#xff0c;⽤于对软件做性能测试&#xff1b; 1.1 安装JMeter 1.下载tar包&#xff0c;解压即可。 解压完成后&#xff1a; 1.2…
阅读更多...
查缺补漏----扩展操作码

查缺补漏----扩展操作码

变长操作码&#xff0c;即全部指令的操作码字段的位数不固定&#xff0c;且分散地放在指令字的不同位置上。最常见的变长操作码方法是扩展操作码&#xff0c;操作码的长度随地址码的减少而增加&#xff0c;不同地址数的指令可以具有不同长度的操作码&#xff0c;从而在满足需要…
阅读更多...
AI 编译器学习笔记之七四 -- cann接口使用

AI 编译器学习笔记之七四 -- cann接口使用

1、安装昇腾依赖 # CANN发布件地址 https://cmc.rnd.huawei.com/cmcversion/index/releaseView?deltaId10274626629404288&isSelectSoftware&url_datarun Ascend-cann-toolkit_8.0.T15_linux-aarch64.run Ascend-cann-nnal_8.0.T15_linux-aarch64.run Ascend-cann-ker…
阅读更多...
【机器学习】并行计算（parallel computation）Part2

【机器学习】并行计算（parallel computation）Part2

Asynchronous Parallel Gradient Descent Using Parameter Server 用Parameter Server实现异步并行梯度下降 Parameter Server这种编程模型可以实现异步并行梯度下降&#xff0c;架构采用的是Client-Server&#xff0c;通信方式是Message-passing&#xff0c;同步方式是异步的…
阅读更多...
阿里 C++面试，算法题没做出来，，，

阿里 C++面试，算法题没做出来，，，

我本人是非科班学 C 后端和嵌入式的。在我面试的过程中&#xff0c;竟然得到了阿里​ C 研发工程师的面试机会。因为&#xff0c;阿里主要是用 Java 比较多&#xff0c;C 的岗位比较少​&#xff0c;所以感觉这个机会还是挺难得的。 阿里 C 研发工程师面试考了我一道类似于快速…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023