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.mzph.cn/diannao/56299.shtml

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

相关文章

Redis协议详解及其异步应用

Redis协议详解及其异步应用

目录 一、Redis Pipeline&#xff08;管道&#xff09;概述优点使用场景工作原理Pipeline 的基本操作步骤C 示例&#xff08;使用 [hiredis](https://github.com/redis/hiredis) 库&#xff09; 二、Redis 事务概述事务的前提事务特征&#xff08;ACID 分析&#xff09;WATCH 命…
阅读更多...
爱快路由器配置腾讯云动态域名DDNS详细说明

爱快路由器配置腾讯云动态域名DDNS详细说明

直白点说就是让爱快路由器自动配置当前公网IP地址给域名&#xff0c;动态域名DDNS不清楚的请自行百度&#xff0c; 这里就可以看见操作日志&#xff0c;那么我们一步一步来配置它吧&#xff0c;首先登录爱快路由器&#xff0c;如下图&#xff1a; 那么腾讯云我们怎么找到ID和…
阅读更多...
koa知否论坛交流系统的设计与实现---附源码53933

koa知否论坛交流系统的设计与实现---附源码53933

目 录 1 绪论 1.1研究背景 1.2研究意义 1.3论文结构与章节安排 2 知否论坛交流系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4本章小…
阅读更多...
Spring Boot环境下的大创项目质量保证系统

Spring Boot环境下的大创项目质量保证系统

3系统分析 3.1可行性分析 通过对本大创管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本大创管理系统采用SSM框架&#xff0c;JAVA作为开发语言&#…
阅读更多...
鸿蒙OS启动流程

鸿蒙OS启动流程

启动流程(基于openharmony4.1) 系统上电加载内核后&#xff0c;按照以下流程完成系统各个服务和应用的启动&#xff1a; 内核加载init进程&#xff0c;一般在bootloader启动内核时通过设置内核的cmdline来指定init的位置。init进程启动后&#xff0c;会挂载tmpfs&#xff0c;…
阅读更多...
宝塔PHP8.1安装fileinfo拓展失败解决办法

宝塔PHP8.1安装fileinfo拓展失败解决办法

在宝塔面板中安装PHP8.1后&#xff0c;安装fileinfo扩展一直安装不上&#xff0c;查看日志有报错&#xff0c;于是手动来安装也报错。 宝塔报错&#xff1a; 手动命令行编译安装同&#xff0c;也有报错 cd /www/server/php/81/src/ext/fileinfo/ make distclean ./configure …
阅读更多...
MongoDB初学者入门教学：与MySQL的对比理解

MongoDB初学者入门教学：与MySQL的对比理解

&#x1f3dd;️ 博主介绍 大家好&#xff0c;我是一个搬砖的农民工&#xff0c;很高兴认识大家 &#x1f60a; ~ &#x1f468;‍&#x1f393; 个人介绍&#xff1a;本人是一名后端Java开发工程师&#xff0c;坐标北京 ~ &#x1f389; 感谢关注 &#x1f4d6; 一起学习 &…
阅读更多...
020 elasticsearch7.10.2 elasticsearch-head kibana安装

020 elasticsearch7.10.2 elasticsearch-head kibana安装

文章目录 全文检索流程ElasticSearch介绍ElasticSearch应用场景elasticsearch安装允许远程访问设置vm.max_map_count 的值 elasticsearch-head允许跨域 kibana 商品数量超千万&#xff0c;数据库无法使用索引 如何使用全文检索&#xff1a; 使用lucene&#xff0c;在java中唯一…
阅读更多...
MySQL 的数据类型

MySQL 的数据类型

1.整数类型 1.1 tinyint tinyint 为小整数类型&#xff0c;存储空间为1个字节&#xff08;8位&#xff09;&#xff0c;有符号范围-128 ~ 127&#xff0c;无符号范围 0 ~ 255,此类型通常在数据库中表示类型的字段&#xff0c;如某一字段 type 表示学科,其中 “type1” 表示语文…
阅读更多...
什么是芯片正向设计和芯片反向设计？

什么是芯片正向设计和芯片反向设计？

什么是芯片反向设计&#xff1f;反向设计其实就是芯片反向设计&#xff0c;它是通过对芯片内部电路的提取与分析、整理&#xff0c;实现对芯片技术原理、设计思路、工艺制造、结构机制等方面的深入洞悉&#xff0c;可用来验证设计框架或者分析信息流在技术上的问题&#xff0c;…
阅读更多...
004、合并两个有序数组

004、合并两个有序数组

0、题目描述 合并两个有序数组 1、法1 数组nums1有m个元素&#xff0c; 直接在下标为m的位置处追加nums2的元素。然后再qsort整体排序。 —— —— qsort函数&#xff0c;&#xff08;数组首元素地址&#xff0c;排序的个数&#xff0c;排序元素大小&#xff0c; 比较函数&…
阅读更多...
从零实现高并发内存池

从零实现高并发内存池

目录 1. 项目介绍1.1 这个项目具体功能是什么&#xff1f;1.2 本项目的知识储备 2. 什么是内存池2.1 池化技术2.2 内存池主要解决的问题2.3 malloc 3. 定长内存池设计4. 高并发内存池整体框架设计4.1 Thread Cache的设计思路4.2 Central Cache的设计思路4.3 Page Cache的设计思…
阅读更多...
Vue工程化结构环境安装及搭建教程 ： 之nvm

Vue工程化结构环境安装及搭建教程 ： 之nvm

vue需要的环境&#xff1a; node.js : Node.js和Vue.js通常会一起使用。Node.js作为后端服务器&#xff0c;处理服务器端的逻辑和数据访问&#xff0c;而Vue.js则负责前端用户界面的构建和交互。通过Ajax通信&#xff0c;Vue.js应用程序向Node.js服务器发送请求&#xff0c;并…
阅读更多...
模电板测试分析报告【运放直流偏置电路】

模电板测试分析报告【运放直流偏置电路】

测试方法&#xff1a;输入一个1K正弦波,调节R80观看是否进行偏置调节。 需要接正负电源。 按照这个计算公式&#xff0c;信号在第二极被放大了11倍。 这么看的话第一级也被放大了10倍&#xff1a; R79是用来调节增益的&#xff0c;R80是用来调节偏置的&#xff1a; 芯片介绍&a…
阅读更多...
大学生入学审核系统(论文+源码)_kaic

大学生入学审核系统(论文+源码)_kaic

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了大学生入学审核系统的开发全过程。通过分析大学生入学审核系统管理的不足&#xff0c;创建了一个计算机管理大学生入学审核系统的方案。文章介绍了大学生入学审核…
阅读更多...
【C语言】你不知道的知识小盲区——柔性数组

【C语言】你不知道的知识小盲区——柔性数组

文章目录 一、什么是柔性数组二、柔性数组的特点三、柔性数组的使用四、柔性数组的优势 一、什么是柔性数组 也许你从来没有听说过柔性数组&#xff08;flexible array&#xff09;这个概念&#xff0c;但是它确实是存在的。在C99标准中&#xff0c;如果结构体的最后一个成员是…
阅读更多...
Spring Integration + MQTT

Spring Integration + MQTT

1. 简介 Spring Integration&#xff1a; Spring Integration是一个开源的Java库&#xff0c;用于构建基于消息的应用程序。它提供了一套丰富的组件和工具&#xff0c;使得开发者可以轻松地开发出可靠、灵活和可扩展的集成解决方案。以下是Spring Integration的一些主要用途&…
阅读更多...
jenkins 插件Publish Over SSH

jenkins 插件Publish Over SSH

一、安装插件 二、配置sshserver http://192.168.31.156:8080/manage/configure 三、添加自由风格&#xff1a;PublishOverSSHDemo 我们将工作目录&#xff1a;/var/lib/jenkins/workspace/PublishOverSSHDemo下的图片m3.jpeg 同步到目标143服务器目录&#xff1a;/root/imag…
阅读更多...
SQL分类中的DDL

SQL分类中的DDL

DDL&#xff08;Data Definition Language):数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库&#xff0c;表&#xff0c;字段&#xff09;。 一、DDL语句操作数据库 1、查询所有数据库&#xff1a;show databases&#xff1b;&#xff08;一般用大写&#xff…
阅读更多...
OpenCV-人脸检测

OpenCV-人脸检测

文章目录 一、人脸检测流程二、关键方法三、代码示例四、注意事项 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了多种人脸检测方法&#xff0c;以下是对OpenCV人脸检测的详细介绍&#xff1a; 一、人脸检测流程 人脸检测是识别图像中人脸位置的过程&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023