当前位置: 首页 > news >正文

Qss自定义属性

QSS自定义属性

更多精彩内容
👉个人内容分类汇总 👈
👉QSS样式学习 👈

文章目录

  • QSS自定义属性
    • @[toc]
  • 前言
  • 一、实现效果
  • 二、使用方式
    • 1.QSS设置Q_PROPERTY属性样式
    • 2.QSS设置动态属性样式
    • 3.qproperty-<属性名称>语法1
    • 4.qproperty-<属性名称>语法2
  • 四、主要代码
  • 五、源代码

前言

  • Qss内置了许多的伪状态可以用于设置控件的样式动态变化(例如::checked:hover),但在日常开发中为了更加灵活的样式,这些伪状态就不够用了;
  • 将QObject中的属性功能与Qss结合使用就会发现不一样的风景,主要有4种用法;
    1. 使用Qss属性选择器设置通过【Q_PROPERTY】定义的属性的样式,当属性状态改变后控件样式跟着改变;
    2. 使用Qss属性选择器设置通过【setProperty()】定义的动态属性的样式,当属性状态改变后控件样式跟着改变;
    3. 使用 【qproperty-<属性名称>】语法设置通过Q_PROPERTY定义的属性的值;
    4. 定义一个枚举,使用Q_ENUM或者Q_ENUMS注册枚举类型,使用Q_PROPERTY定义一个已注册的枚举类型的属性,可以通过【qproperty-<属性名称>:枚举名称】方式设置属性的值。
  • 在代码中不再是将样式表放在资源文件中,而是放到可执行程序路径下,可定制性更强。

一、实现效果

在这里插入图片描述

二、使用方式

1.QSS设置Q_PROPERTY属性样式

  1. 在继承于QWidget的类中Q_OBJECT后,私有区域使用Q_PROPERTY定义一个属性;

    Q_PROPERTY(bool checked READ isChecked WRITE setChecked)
    
  2. 在类中分别定义属性对应的变量、函数;

    在这里插入图片描述

  3. 使用QSS属性选择器设置对应的样式,[属性名=属性值]

    /* 设置Q_PROPERTY定义的属性样式 */
    #Widget[checked = true] {background-color: rgb(0, 255, 127);
    }
    
  4. 在程序中修改属性值后,样式不会发生变化,需要调用polish(控件) 刷新控件样式;

    this->style()->polish(this);
    

2.QSS设置动态属性样式

  1. 再Qss样式表中使用QSS属性选择器设置对应的样式,[属性名=属性值]

    /* 设置动态属性样式 */
    #Widget[property1 = true] {background-color: rgb(255, 0, 127);
    }
    
  2. 再程序中调用setProperty() 函数设置属性值,如果没有通过Q_PROPERTY定义属性,使用setProperty(“property1”, value)设置后会将property1添加为动态属性,并且返回false

    this->setProperty("property1", value)
    
  3. 在程序中修改动态属性值后,样式不会发生变化,需要调用polish(控件) 刷新控件样式;

    this->style()->polish(this); 
    

3.qproperty-<属性名称>语法1

  1. 在继承于QWidget的类中Q_OBJECT后,私有区域使用Q_PROPERTY定义一个属性;

    Q_PROPERTY(QColor BgColor READ isBgColor WRITE setBgColor)
    
  2. 在类中分别定义属性对应的变量、函数;

    在这里插入图片描述

  3. 在Qss样式表中使用 qproperty-<属性名称>语法设置属性的值。

    /* 通过Qss设置Q_PROPERTY定义的属性的值 */
    #Widget {qproperty-BgColor: rgb(255, 0, 0);
    }
    
  4. 由于在程序界面还没显示时样式表还没生效,所以在构造函数中时无法获取设置后的属性值,在程序启动并且显示后可以获取设置后的属性值。

    在这里插入图片描述

4.qproperty-<属性名称>语法2

  1. 在继承于QWidget的类中,公有区域定义一个枚举,并使用Q_ENUM或者Q_ENUMS向元对象系统注册枚举类型;

    在这里插入图片描述

  2. 使用Q_PROPERTY定义一个该枚举类型的属性;

    Q_PROPERTY(AgeEnum age READ age WRITE setAge)
    
  3. 在类中分别定义属性对应的变量、函数;

    在这里插入图片描述

  4. 在Qss样式表中使用 qproperty-<属性名称>语法设置属性的值,值为注册的枚举中的项,不能是数字。

    /* 通过Qss设置Q_PROPERTY定义的属性的值 */
    #Widget {qproperty-age: age3;                 /* 通过Q_ENUM注册的枚举修改自定义属性值*/
    }
    
  5. 在程序启动并且显示后可获取设置后的属性值;

    在这里插入图片描述

四、主要代码

  • widget.h

    #ifndef WIDGET_H
    #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
    namespace Ui { class Widget; }
    QT_END_NAMESPACEclass Widget : public QWidget
    {Q_OBJECTQ_PROPERTY(bool checked READ isChecked WRITE setChecked)Q_PROPERTY(QColor BgColor READ isBgColor WRITE setBgColor)Q_PROPERTY(AgeEnum age READ age WRITE setAge)               // 想要通过Q_ENUM注册的枚举修改属性值,属性的类型就需要时【枚举的类型】,而不能是其它类型,例如intpublic:Widget(QWidget *parent = nullptr);~Widget();enum AgeEnum {age1 = 10,age2 = 20,age3 = 30};Q_ENUM(AgeEnum)  // 向元对象系统注册枚举类型(可以使用Q_ENUM或者Q_ENUMS,不过后者已经过时)bool isChecked() const;void setChecked(bool value);QColor isBgColor() const;void setBgColor(QColor color);AgeEnum age() const;void setAge(AgeEnum value);private slots:void on_pushButton_clicked();void on_pushButton_2_clicked();void on_pushButton_3_clicked();private:void initStyle();private:Ui::Widget *ui;bool m_checked = false;QColor m_bgColor = QColor(255, 255, 255);AgeEnum m_age;
    };
    #endif // WIDGET_H
  • widget.cpp

    #include "widget.h"
    #include "ui_widget.h"#include <QFile>
    #include <QTextStream>
    #include <QDebug>
    #include <QStyle>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
    {ui->setupUi(this);initStyle();qDebug() << "在构造函数中获取属性值:" << m_bgColor.name();   // 无法获取到qss修改后的属性值
    }Widget::~Widget()
    {delete ui;
    }bool Widget::isChecked() const
    {return m_checked;
    }void Widget::setChecked(bool value)
    {m_checked = value;
    }QColor Widget::isBgColor() const
    {return m_bgColor;
    }void Widget::setBgColor(QColor color)
    {m_bgColor = color;
    }Widget::AgeEnum Widget::age() const
    {return m_age;
    }void Widget::setAge(AgeEnum value)
    {m_age = value;
    }/*** @brief 加载qss文件*/
    void Widget::initStyle()
    {QString strFile = qApp->applicationDirPath() + "/style.css";   // 这里我没有使用资源文件,而是把样式表文件放在当前路径下,便于随时更换QFile file(strFile);if(file.open(QIODevice::ReadOnly)){QTextStream stream(&file);QString strQss;while (!stream.atEnd()){strQss.append(stream.readLine());}qApp->setStyleSheet(strQss);               // 设置整个程序的样式表而不是当前窗口}else{qWarning() << "打开qss文件失败!";}
    }/*** @brief 通过Q_PROPERTY定义的属性更新Qss样式*        设置属性的方式有两种*        方式一:setChecked*        方式二:setProperty("checked", value)  : 设置成功返回true,否则返回false*/
    void Widget::on_pushButton_clicked()
    {this->setChecked(!this->isChecked());   // 更改控件的属性 【Q_PROPERTY】this->style()->polish(this);            // 属性值更改后重新初始化给定控件的样式。
    }/*** @brief 通过动态属性的方式更新QSS样式*        如果没有通过Q_PROPERTY定义属性,使用setProperty("property1", value)*        设置后会将property1添加为动态属性,并且返回false,*        效果和使用Q_PROPERTY定义的属性类似*/
    void Widget::on_pushButton_2_clicked()
    {static bool value = true;qDebug() << this->setProperty("property1", value);   // 设置动态属性value = !value;this->style()->polish(this);                         // 属性值更改后重新初始化给定控件的样式。
    }/*** @brief 在Qss通过qproperty-属性 的方式修改属性的值,qproperty 语法只在程序启动显示控件是生效一次*        在构造函数中由于控件还没有开始显示,所以qproperty没生效,是无法获取修改后的属性值的,在窗口显示后就可以获取到属性值*        注意:虽然主要继承于QObject的类都可以通过Q_PROPERTY定义属性,但是只有继承于QWidget的类定义的属性可以通过Qss修改,*             因为QObject不包含QStyle*/
    void Widget::on_pushButton_3_clicked()
    {qDebug() << "程序启动后获取属性值:" << m_bgColor.name();qDebug() <<"Qss设置的属性值:" << m_age;
    }
  • style.css

    /* 设置Q_PROPERTY定义的属性样式 */
    #Widget[checked = true] {background-color: rgb(0, 255, 127);
    }/* 设置动态属性样式 */
    #Widget[property1 = true] {background-color: rgb(255, 0, 127);
    }/* 通过Qss设置Q_PROPERTY定义的属性的值 */
    #Widget {qproperty-BgColor: rgb(255, 0, 0);qproperty-age: age3;                 /* 通过Q_ENUM注册的枚举修改自定义属性值*/
    }

五、源代码

  • github
  • gitee

相关文章:

Qss自定义属性

QSS自定义属性 更多精彩内容&#x1f449;个人内容分类汇总 &#x1f448;&#x1f449;QSS样式学习 &#x1f448;文章目录QSS自定义属性[toc]前言一、实现效果二、使用方式1.QSS设置Q_PROPERTY属性样式2.QSS设置动态属性样式3.qproperty-<属性名称>语法14.qproperty-&…...

连接金蝶云星空,数据交互轻松搞定!丨三叠云

金蝶云星空 路径 拓展 >> 插件 功能简介 新增插件「金蝶云星空」。 用户可通过配置「金蝶云星空」插件&#xff0c;就可以实时获取「金蝶云星空」的数据&#xff0c;同时支持回填数据至金蝶系统内。 地图视图 路径 表单 >> 表单设计 功能简介 新增「地图视…...

JSX是什么,React为什么使用JSX,babel怎么转译JSX的

JSX是什么&#xff0c;React为什么使用JSX&#xff0c;babel怎么转译JSX的 在前端的框架中有两种“描述UI”的方案&#xff0c;一种是JSX语法&#xff0c;一种是模板语言。 其中React就是选择的JSX&#xff0c;Vue就是选择的模板语言。 JSX其实就是一个语法糖&#xff0c;在…...

从工地转行软件测试,拿下13k+年终奖是种什么体验?

最近&#xff0c;一则名为《我&#xff1a;毕业五年&#xff0c;存款5000。她:中传硕士&#xff0c;火锅店保洁》的视频走红网络&#xff0c;两位名校毕业生看似高开低走的就业经历&#xff0c;引起了很多人的共鸣。她们所传达的并不是所谓的躺平、摆烂&#xff0c;而是希望更多…...

前端面试题 —— 计算机网络(二)

目录 一、POST和PUT请求的区别 二、GET方法URL长度限制的原因 三、页面有多张图片&#xff0c;HTTP是怎样的加载表现&#xff1f; 四、HTTP2的头部压缩算法是怎样的&#xff1f; 五、说一下HTTP 3.0 六、HTTP协议的性能怎么样&#xff1f; 七、数字证书是什么&#xff1f…...

山东大学机器学习期末2022

接力&#xff1a;山东大学机器学习期末2021 本来是不想写的&#xff0c;因为不想回忆起考试时啥也不会的伤痛&#xff0c;没想到最后给分老师海底捞&#xff0c;心情好了一些&#xff0c;还是一块写完 备考建议&#xff1a;多看ppt&#xff0c;多看ppt&#xff0c;多看ppt 山东…...

FEBC2022|打造VR内容生态闭环 佳创视讯持续加码轻量化内容建设

2月24日&#xff0c;由陀螺科技主办的未来商业生态链接大会作为 2023 癸卯兔年开年率先召开的行业重要影响力盛会在深圳成功召开。今年大会云集了科技、软件、游戏、XR等元宇宙领域的世界500强、上市公司及行业独角兽企业&#xff0c;围绕游戏、元宇宙、XR、数字营销等多项热门…...

Redis常见的数据类型命令

文章目录Redis 常见的数据类型及命令一、常见的NoSQL二、Redis 简介三、key 键的一些操作命令四、Redis的五种基本数据结构1、String&#xff08;字符串&#xff09;介绍常用命令1.1 set/get1.2 append1.3 strlen1.4 setex1.5 mset/mget1.6 setrange/getrange1.7 setnx1.8 incr…...

Python3+Selenium3自动化测试-(准备)

最近在学习selenium自动化测试相关的内容&#xff0c;所以将实际准备情况做一记录&#xff0c; # 系统&#xff1a;win10(64位) # 浏览器&#xff1a;Chrome(67.0)、Firefox(61.0)、IE # python版本&#xff1a;3.6.5 # Selenium&#xff1a;3.13.0Selenium简介 Selenium是一…...

VUE的安装和创建

安装node.js 进入node官网进行下载&#xff0c;然后一直下一步。 测试是否安装成功&#xff1a; 命令提示窗下执行&#xff1a;npm -v 若出现版本号&#xff0c;则安装成功。 安装npm源&#xff1a; npm config set registry http://registry.npm.taobao.org 查看&#xff1a;…...

ETL工具(kettle) 与 ETL产品(BeeloadBeeDI) 差之毫厘,谬以千里

E T L——是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。工具——原指工作时所需用的器具&#xff0c;后引申为达…...

轻松入门H3C无线AC上线AP【入门篇】

我们知道华三的最新模拟器支持了无线AC的配置&#xff0c;今天就浅浅的出个无线AC的教程&#xff0c;你上也会的那种。今天我们模拟的是二层环境下&#xff0c;笔者准备了2个AP&#xff0c;以此展示AP上线到AC的教程&#xff0c;并且用手机测试WiFi连接正常&#xff0c;且客户端…...

尚医通(二十五)就医提醒和预约统计

目录一、就医提醒1、搭建定时任务模块二、后台管理系统-预约统计功能1、开发每天预约数据接口2、封装远程调用接口3、搭建统计分析模块4、整合统计功能前端一、就医提醒 我们通过定时任务&#xff0c;每天8点执行&#xff0c;提醒就诊 1、搭建定时任务模块 &#xff08;1&…...

网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取

文章目录一、网页中的音频数据源二、FFT&#xff1a;时域转频域三、信号的特征分析四、信号的识别提取附录音频数字信号处理 Audio DSP (Digital Signal Processing) 是一个复杂又专业的话题&#xff0c;本文介绍的是如何从音频中实时分析和识别出特定频率信号的一种方法&#…...

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案 UniApp 是一个跨平台的应用开发框架&#xff0c;可以使用 Vue.js 开发多端应用&#xff08;如H5、小程序、App等&#xff09;。在 UniApp 中&#xff0c;可以使用 uni-app 提供的文件系统 API 完成本地文件存储的操作。 1.…...

PyQGIS开发 -- 基础学习笔记

1、自主学习QGIS开发虽然QGIS本身功能强大&#xff0c;但还是架不住我们要编写新的功能、新的业务流程、新的算法。前文中我们提到&#xff0c;扩展QGIS有2种方法&#xff0c;一是用Python、C来写QGIS的插件&#xff1b;另一种就是基于QGIS的C API开发独立应用程序。然而后者资…...

一篇了解模块打包工具之 ——webpack(1)

本篇采用问题引导的方式来学习webpack&#xff0c;借此梳理一下自己对webpack的理解&#xff0c;将所有的知识点连成一条线&#xff0c;形成对webpack的记忆导图。 最终目标&#xff0c;手动构建一个vue项目&#xff0c;目录结构参考vue-cli创建出来的项目 一、问问题 1. 第…...

k8s学习之路 | Day16 k8s 中的容器初探

文章目录容器镜像镜像名称镜像拉取策略私有仓库的拉取策略容器的环境变量和启动命令容器的环境变量容器的启动命令容器的生命周期钩子postStartpreStop容器的探针startupProbelivenessProbereadinessProbek8s 集群中最小的管理单元就是一个Pod&#xff0c;而Pod里面才是容器&am…...

export、import、commit、save、load的区别

目录1. docker export 和 docker import2. docker commit3.docker save 和 docker load1. docker export 和 docker import docker export 容器ID/容器Name > xxx.tar 导出一个容器快照 docker import xxx.tar NewImageName:tag 导入一个容器快照到本地镜像库 适用场景&a…...

多部委联合举办中国人工智能大赛启动会在厦召开,快商通亮相发言

站在“第二个百年奋斗目标”的新起点上&#xff0c;为深入推动我国人工智能产业创新发展&#xff0c;发掘一批人工智能优秀团队&#xff0c; 国家互联网信息办公室、工业和信息化部、公安部、国家广播电视总局、厦门市人民政府将联合主办第四届中国人工智能大赛 。快商通联合创…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

k8s从入门到放弃之Pod的容器探针检测

k8s从入门到放弃之Pod的容器探针检测 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;容器探测是指kubelet对容器执行定期诊断的过程&#xff0c;以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...

C#最佳实践:为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...