【QT】QSS基础

在这里插入图片描述

欢迎来到Cefler的博客😁
🕌博客主页:折纸花满衣
🏠个人专栏:QT

在这里插入图片描述


目录

  • 👉🏻基本语法
  • 👉🏻从⽂件加载样式表
  • 👉🏻选择器
    • 伪类选择器
  • 👉🏻自定义输入框
  • 👉🏻设计登录界面

👉🏻基本语法

Qt的QSS(Qt Style Sheets)是一个用于定制Qt应用程序外观的样式表语言,类似于CSS。通过QSS,开发者可以修改控件的外观和样式,使其更加美观和符合应用需求。以下是QSS的基本语法和常用属性的介绍。

基本语法

  1. 选择器

    • 选择器用于指定要应用样式的控件。例如,QPushButton选择所有按钮。
  2. 属性

    • 样式属性使用属性名: 属性值;的形式书写。例如,background-color: red;
  3. 规则

    • 一个完整的QSS规则如下所示:
      QButton {background-color: blue;color: white;
      }
      

给指定控件设置样式之后, 该控件的⼦元素也会受到影响

常用属性

  1. 背景和边框

    • background-color: 背景颜色。
    • border: 边框样式,例如border: 1px solid black;
  2. 字体

    • font-family: 字体类型,例如font-family: Arial;
    • font-size: 字体大小,例如font-size: 12px;
    • color: 字体颜色,例如color: #000000;
  3. 间距和填充

    • padding: 控件内边距,例如padding: 5px;
    • margin: 控件外边距,例如margin: 10px;
  4. 状态样式

    • 可以根据控件状态应用不同样式,例如:
      QPushButton:hover {background-color: green;
      }
      
  5. 图像

    • background-image: 设置背景图像,例如background-image: url(image.png);

示例

以下是一个简单的QSS示例,应用于一个按钮和一个标签:

QPushButton {background-color: blue;color: white;border: 2px solid black;padding: 10px;
}QLabel {font-size: 14px;color: darkgray;margin: 5px;
}

使用方法

  1. 在代码中应用QSS

    • 可以在Qt应用程序中通过setStyleSheet方法应用QSS样式。
      QPushButton *button = new QPushButton("Click Me");
      button->setStyleSheet("QPushButton { background-color: blue; color: white; }");
      
  2. 外部文件

    • 也可以将QSS样式保存到文件中,并在应用启动时加载:
      QFile file("style.qss");
      file.open(QFile::ReadOnly);
      QString styleSheet = QLatin1String(file.readAll());
      qApp->setStyleSheet(styleSheet);
      

👉🏻从⽂件加载样式表

首先自己创建一个qss文件,然后放入qrc资源中。
最后在初始化时,从文件中读取好设定好的qss样式即可。
在这里插入图片描述

#include "widget.h"
#include "ui_widget.h"
#include<QFile>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QString style = Widget::loadQss();this->setStyleSheet(style);
}Widget::~Widget()
{delete ui;
}QString Widget::loadQss()
{QFile file(":/style.qss");file.open(QFile::ReadOnly);QString style = file.readAll();return style;
}

Tips:
当我们发现⼀个控件的样式不符合预期的时候, 要记得排查这四个地⽅:
• 全局样式
• 指定控件样式
• qss ⽂件中的样式
• ui ⽂件中的样式

👉🏻选择器

选择器类型说明
类型选择器选择特定类型的控件且影响子控件,例如 QWidget
类选择器选择特定类型的控件,不会选择子控件,例如 .QPushButton
id选择器根据控件的对象名称选择,例如 #myButton
后代选择器选择特定控件的子控件,例如 QWidget QLineEdit
伪状态选择器根据控件状态选择样式,例如 QPushButton:hover
属性选择器根据控件属性选择样式,例如 QLineEdit[readOnly="true"]
组合选择器组合多个选择器,例如 QPushButton, QLabel
通配符选择器通配所有控件,例如 *
类名选择器选择类的所有实例,例如 QAbstractButton

当某个控件⾝上, 通过类型选择器和 ID 选择器设置了冲突的样式时, ID 选择器样式优先级更
⾼.

伪类选择器

伪类选择器说明
:hover当鼠标悬停在控件上时应用的样式。
:pressed当控件被按下时应用的样式。
:checked当复选框或单选按钮被选中时应用的样式。
:unchecked当复选框或单选按钮未被选中时应用的样式。
:enabled当控件处于启用状态时应用的样式。
:disabled当控件处于禁用状态时应用的样式。
:focus当控件获得焦点时应用的样式。
:selected当项在下拉框或列表中被选中时应用的样式。
:first选择第一个子元素。
:last选择最后一个子元素。
:nth-child(n)选择第n个子元素,n可以是数字或表达式。
::indicator用于自定义复选框和单选按钮的指示器外观。通常与 QCheckBoxQRadioButton 一起使用,可以设置背景、边框等样式。

这些状态可以使⽤ ! 来取反. ⽐如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时,等等.

👉🏻自定义输入框

QLineEdit {border-width: 1px; border-radius: 10px;border-color: rgb(58, 58, 58);border-style: inset;padding: 0 8px;color: rgb(255, 255, 255);background:rgb(100, 100, 100);selection-background-color: rgb(187, 187, 187);selection-color: rgb(60, 63, 65);
}
属性说明
border-width设置边框宽度。
border-radius设置边框圆角。
border-color设置边框颜色。
border-style设置边框风格。
padding设置内边距。
color设置文字颜色。
background设置背景颜色。
selection-background-color设置选中文本的背景颜色。
selection-color设置选中⽂字的⽂本颜⾊

在这里插入图片描述

👉🏻设计登录界面

在这里插入图片描述
使⽤ QVBoxLayout 来管理上述控件

2.编写 QSS 样式.

QFrame {border-image: url(:/blue_girl.png);
}
QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border-style: none;border-radius: 10px;
}
QCheckBox {color: white;background-color: transparent;
}
QPushButton {font-size: 20px;color: white;background-color: #555;border-style: outset;border-radius: 10px;
}
QPushButton:pressed {color: black;background-color: #ced1db;border-style: inset;
}

在这里插入图片描述


如上便是本期的所有内容了,如果喜欢并觉得有帮助的话,希望可以博个点赞+收藏+关注🌹🌹🌹❤️ 🧡 💛,学海无涯苦作舟,愿与君一起共勉成长
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

supermap iclient3d for cesium模型沿路径移动

可以直接settimeout隔一段时间直接设置位置属性&#xff0c;但是得到的结果模型不是连续的移动&#xff0c;如果想要连续的移动&#xff0c;就需要设置一个时间轴&#xff0c;然后给模型传入不同时间时的位置信息&#xff0c;然后就可以了。 开启时间轴 let start Cesium.Jul…

云安全风险优先级已失效以下是修复方法

想象一下&#xff0c;你身处一栋着火的建筑物内。每个房间的火警都响了。你站在走廊里&#xff0c;手里拿着灭火器。你必须扑灭大火。你从哪里开始呢&#xff1f; 这是许多团队在保护云中的应用程序时面临的情况。 随着云采用率的增长和云应用程序的增加&#xff0c;这些应用…

使用 HFD 加快 Hugging Face 模型和数据集的下载,解决443报错

Hugging Face 提供了丰富的预训练模型和数据集&#xff0c;而且使用 Hugging Face 提供的 from_pretrained() 方法可以轻松加载它们&#xff0c;但是&#xff0c;模型和数据集文件通常体积庞大&#xff0c;用默认方法下载起来非常花时间。 本文将指导你如何使用 HFD&#xff08…

【通俗易懂介绍OAuth2.0协议以及4种授权模式】

文章目录 一.OAuth2.0协议介绍二.设计来源于生活三.关于令牌与密码的区别四.应用场景五.接下来分别简单介绍下四种授权模式吧1.客户端模式1.1 介绍1.2 适用场景1.3 时序图 2.密码模式2.1 介绍2.2 适用场景2.3时序图 3.授权码模式3.1 介绍3.2 适用场景3.3 时序图 4.简化模式4.1 …

NLP 文本匹配任务核心梳理

定义 本质上是做了意图的识别 判断两个内容的含义&#xff08;包括相似、矛盾、支持度等&#xff09;侠义 给定一组文本&#xff0c;判断语义是否相似Yi 分值形式给出相似度 广义 给定一组文本&#xff0c;计算某种自定义的关联度Text Entailment 判断文本是否能支持或反驳这个…

统信服务器操作系统【Cron定时任务服务】

Cron定时任务服务服务介绍、服务管理、服务配置 文章目录 一、功能概述二、功能介绍1. Cron 服务管理2.Cron 服务管理3.Cron 服务配置run-parts一、功能概述 cron是一个可以用来根据时间、日期、月份、星期的组合来 调度对周期性任务执行的守护进程。利用 cron 所提供的功能,可…

插座空置状态检测系统源码分享

插座空置状态检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…

输电线塔目标检测数据集yolo格式该数据集包括2644张输电线塔高清图像,该数据集已经过yolo格式标注,具有完整的txt标注文件和yaml配置文件。

输电线塔目标检测数据集yolo格式 该数据集包括2644张输电线塔高清图像&#xff0c;该数据集已经过yolo格式标注&#xff0c;具有完整的txt标注文件和yaml配置文件。 输电线塔目标检测数据集 数据集名称 输电线塔目标检测数据集&#xff08;Transmission Tower Object Detecti…

视频去水印 —— 释放创意,让学习与创作更自由!

&#x1f31f; 视频去水印 —— 释放创意&#xff0c;让学习与创作更自由&#xff01; 在这个短视频盛行的时代&#xff0c;抖音、快手、小红书等平台成为了创意与灵感的聚集地。你是否曾遇到过想要学习或进行二次创作&#xff0c;却被视频中的水印所困扰&#xff1f;现在&…

RHCSA认证-Linux(RHel9)-Linux入门

文章目录 概要一、创建、查看和编辑⽂本1.1 输出重定向1.2 vim编辑器1.3 shell 变量1.5 获取帮助 二、管理本地用户和组2.1 描述用户2.2 切换用户和赋权2.3 用户管理2.4 用户组管理2.5 密码策略 三、控制文件访问3.1 列出文件和文件权限3.2 更改文件权限和拥有者3.3 控制默认权…

WPF自定义Dialog模板,内容用不同的Page填充

因为审美的不同&#xff0c;就总有些奇奇怪怪的需求&#xff0c;使用框架自带的对话框已经无法满足了&#xff0c;这里记录一下我这边初步设计的对话框。别问为啥要用模板嵌套Page来做对话框&#xff0c;问就是不想写太多的窗体。。。。 模板窗体&#xff08;XAML&#xff09;…

独立游戏《Project:Survival》UE5C++开发日志0——游戏介绍

该游戏是《星尘异变》团队的下一款作品&#xff0c;太空科幻题材的生存游戏&#xff0c;我将负责使用C、蓝图实现游戏的基础框架和核心功能&#xff0c;其中还包含使用人工智能算法助力游戏开发或帮助玩家运营 目前已有功能&#xff1a; 1.3D库存系统&#xff1a;所有库存中的物…

1.6 计算机网络体系结构

参考&#xff1a;&#x1f4d5;深入浅出计算机网络 常见的三种计算机网络体系结构 TCP/IP体系结构 路由器一般只包含网络接口层和网际层。 应用层TCP/IP体系结构的应用层包含了大量的应用层协议&#xff0c;例如HTTP、SMTP、DNS、RTP等运输层TCP和UDP是TCP/IP体系结构运输层的…

UWA支持鸿蒙HarmonyOS NEXT

华为在开发者大会上&#xff0c;宣布了鸿蒙HarmonyOS NEXT将仅支持鸿蒙内核和鸿蒙系统的应用&#xff0c;不再兼容安卓应用&#xff0c;这意味着它将构建一个全新且完全独立的生态系统。 为此&#xff0c;UWA也将在最新版的UWA SDK v2.5.0中支持鸿蒙HarmonyOS NEXT&#xff0c…

链表分割-----------lg

现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 我们可以假设x为36&#xff0c;则小于36都排在前边&#xff0c;>3…

虚幻引擎游戏保存/加载存档功能

函数名功能Does Save Game Exist检查存档是否存在Load Game from Slot加载存档Save Game to Slot保存存档Delete Game in Slot删除存档 Slot Name 是插槽名字 存档都是通过插槽名字来 读取/加载/检查/删除的 先创建一个SaveGame类 , 这个类里可以存放要保存的数据 , 比如 玩家…

【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第二篇-着色器制作】

在上一篇文章中&#xff0c;我们已经理顺了实现流程。 接下来&#xff0c;我们将在UE5中&#xff0c;从头开始一步一步地构建一次流程。 通过这种方法&#xff0c;我们可以借助一个熟悉的开发环境&#xff0c;使那些对着色器不太熟悉的朋友们更好地理解着色器的工作原理。 这篇…

思科安全网络解决方案

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…

Redis数据持久化总结笔记

Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出&#xff0c;服务器中的数据库状态也会消失。所以 Redis 提供了持久化功能&#xff01; Redis 提供了 2 个不同形式的持久化方式 RDB&#xff08;Redis DataBase&#…

【python】requests 库 源码解读、参数解读

文章目录 一、基础知识二、Requests库详解2.1 requests 库源码简要解读2.2 参数解读2.3 处理响应2.4 错误处理 一、基础知识 以前写过2篇文章&#xff1a; 计算机网络基础&#xff1a; 【socket】从计算机网络基础到socket编程——Windows && Linux C语言 Python实现…