Vscode实现应用qss样式表

news/2024/12/23 21:25:14/文章来源:https://www.cnblogs.com/CrescentWind/p/18625054

qss简介

qss(Qt Style Sheets)是一种基于CSS的样式语言,用于描述用户界面元素的外观和感觉。qss可以让用户在不修改代码的情况下,轻松地自定义应用程序的外观。

其语法基本如下:

objectName{property: value;
}

其中,objectName是要设置样式的对象名,property是要设置的属性,value是属性的值。比如,要设置按钮的背景色为红色,可以这样写:

QPushButton{background-color: red;
}

若想对同一控件设置多套样式,可以指定姓名

QLabel#label1{background-color: blue;
}
QLabel#label2{background-color: green;
}

在程序中使用setObjectName();方法设置控件名称对应到qss中的名称即可使用对应的样式。

QLabel *label = new QLabel(this);
label->setObjectName("label1"); // 此label背景色为蓝色
QLabel *label2 = new QLabel(this);
label2->setObjectName("label2"); // 此label背景色为绿色

对于一些拥有不同状态的控件,如按钮在普通状态以下按下状态,以及鼠标悬停状态等,可以用不同的qss样式表实现不同状态的样式。

QPushButton:pressed{background-color: green;
}
// 按下按钮时改变背景颜色为绿色QPushButton:hover{background-color: yellow;
}
// 鼠标悬停在按钮上时改变背景颜色为黄色

可以混合使用,比如:

QPushButton#btn1:pressed{background-color: green;
}
// 按下btn1按钮时改变背景颜色为绿色

qrc文件

对于样式表,可以使用一个后缀为.qrc的文件来管理.qss以及编写时所用的图片资源。其实质上就是一个xml文件,里面可以包含多个<file>标签,每个标签对应一个资源文件。

<RCC><qresource prefix="/"><file>ui/img/img.png</file><file>ui/img/close.png</file><file>ui/img/min.png</file><file>ui/img/max.png</file><file>ui/img/R.svg</file><file>ui/style/style.qss</file></qresource>
</RCC>

其中<RCC>表示该文件为资源文件集合,<qresource>表示资源文件,prefix属性表示资源文件的前缀,这里设置为/表示资源文件位于程序根目录下。<file>标签表示资源文件名,这里可以指定多个资源文件。

注意,这里使用prefix设置的路径是虚拟路径。在下面的<file> </file>中设置的资源文件的路径应当是相对于.qrc文件的路径。这样设置后,在程序中可以通过如下方式获取资源文件:

QFile file(":/ui/style/style.qss");
/*通过":"表示使用虚拟路径访问文件*/

倘若更改prefix如下

<qresource prefix="/source">

则在程序中获取资源文件时,应当使用如下方式:

QFile file(":/source/ui/style/style.qss");
/*通过":"表示使用虚拟路径访问文件*/

也就是说这里定义的虚拟路径不需要它在物理地址中存在,即可使用Qt这种资源管理机制来管理资源文件。方便的实现资源的分组、共享以及版本控制。

设置好.qrc文件后,在程序中可以用如下方式获取资源文件中整合的文件:

QFile file(":/ui/style/style.qss");
/*通过":"表示资源文件*/

qss文件中,也可以使用这种方法来引用资源文件中的资源:

QLabel{background-image: url(":/ui/img/img.png");
}

Vscode应用qss样式表

在扩展安装界面安装QSSEditor插件,这样可以提供qss相关的代码补全以及高亮显示功能。

在写qss时,可能输出以下,大概是由于这个插件可以联动QtDesigner来实时显示样式。这方面我也不太会。不影响对qss代码的补全高亮。
image

建立文件树如下的目录结构:

├── ui
│   ├── img
│   │   ├── close.png
│   │   ├── img.png
│   │   ├── max.png
│   │   ├── min.png
│   │   └── R.svg
│   └── style
│       └── style.qss
└── ui.qrc

名称任意取。其中ui.qrc文件的要求上面已经说明。若要使用该文件,需要修改CMakeLists.txt文件,添加如下内容:

find_package(Qt5 REQUIRED COMPONENTS Core Widgets REQUIRED)set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON) # RCC编译器将qrc文件编译为cpp文件
set(CMAKE AUTOUIC ON)
# 注意 : 要想使用qt5_add_resources,必须先find_package到Qt的路径或者手动指定QT_DIR
set(QT_SOURCE_FILE ui.qrc) # 将资源文件放到工程目录下,该部分会由RCC编译器预编译为cpp文件# 添加资源文件
qt5_add_resources(QT_RESOURCES ${QT_SOURCE_FILE})# 添加源文件
set(SOURCE_FILES main.cpp)# 生成可执行文件
add_executable(main ${SOURCE_FILES} ${QT_RESOURCES})

这样在主程序中就可以通过Qt的资源管理机制来访问资源文件了。

要想应用qss样式表,在主程序中调用setStyleSheet()方法即可。

#include <QApplication>
int main(int argc, char *argv[])
{QApplication app(argc, argv);QFile file(":/ui/style/style.qss"); # 读取样式表文件if (file.open(QFile::ReadOnly)){QTextStream stream(&file);QString styleSheet = stream.readAll();app.setStyleSheet(styleSheet);}MainWindow win;win.show();return app.exec();
}

当然,在Qt中,每个控件都有属于自己的setStyleSheet()接口用于单独设置样式,用起来也是很简单粗暴,其参数是一个qss样式表字符串。

QLabel *label = new QLabel(this);
/*设置label的背景色为红色*/
label->setStyleSheet("background-color: red;");
/*当然下面这种写法也ok*/
label->setStyleSheet("QLabel{background-color: red;}");

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

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

相关文章

【嵌入式开发】链接让你的程序在内存中找到正确位置

一、空间和地址分配 二、符号解析与重定位 三、静态库链接前面已经了解了ELF目标文件的内容,本篇文章的重点在于怎么将多个目标文件链接起来形成一个可执行文件。 现在链接器的链接过程主要分两步: 1、空间和地址分配 2、符号解析与重定位 下面来看一下,这两个步骤具体干了什…

校园二手交易平台UML图

类图:时序图: 买家买商品:买家撤回:用户更新:用户登录:卖家发布:用例图:

2 升力线理论

2 升力线理论 2.1 减阻 阻力 什么是阻力?阻力是阻止主要运动(位移向量)的力。 可以用一个简单的公式描述阻力: \[\begin{equation}\overrightarrow{R_2}-\overrightarrow{R_1}\propto\vec{T}-\vec{D} \end{equation} \]这里的R是反作用力(reactive force),T是推力(thru…

python网络编程之sse

服务端:from fastapi import FastAPI from fastapi.responses import StreamingResponse from fastapi.middleware.cors import CORSMiddleware import timeapp = FastAPI()# 允许所有来源的跨域请求 app.add_middleware(CORSMiddleware,allow_origins=["*"], # 允…

Array Collapse

前言 调 \(C\) 快魔怔了, 还是先来打这个 思路 方法 \(1\) : 笛卡尔树 看到这种类 \(\rm{RMQ}\) 问题直接一个笛卡尔树起手, 恰好 \(p\) 是不重的, 那么更方便了啊 搞出树树挖下性质 例如样例中的 4 2 4 1 3你注意到每次删除操作相当于选择一个键值段, 然后只保留这一段的根节点…

禅道bug增加自定义字段

禅道版本 18.9 需求 给禅道的bug模块,增加自定义字段。目前主要增加“发现阶段”、“所属环境”、“出现频率” 增加bug的类型 在bug列表增加搜索:“发现阶段”、“所属环境”、“出现频率” 在测试报告增加模块:“发现阶段”、“所属环境”、“出现频率”禅道开发手册 http…

php网络编程tcp

服务端:<?php $server = new Swoole\Server(127.0.0.1, 9501);$server->set([worker_num => 8, // worker进程数 cpu1-4倍max_request => 10000, // 根据内存定义 https://wiki.swoole.com/#/server/setting// open_eof_check => true,// package_eof => &…

php网络编程swoole websocket

服务端:<?php use Swoole\WebSocket\Server;// 创建 HTTP 服务器 $server = new Server(127.0.0.1, 8888, SWOOLE_PROCESS, SWOOLE_SOCK_TCP);$server->on(start, function ($server) {//print_r($server);echo "Swoole websocket server is started at ws://127.…

php网络编程swoole udp

服务端:<?php $server = new Swoole\Server(127.0.0.1, 9504, SWOOLE_PROCESS, SWOOLE_SOCK_UDP);$server->on(start, function ($server) {echo "UDP Server is started at udp://127.0.0.1:9504\n"; });$server->on(packet, function ($server, $data, …

第36次ccf-csp题解(思维)

比赛链接 https://sim.csp.thusaac.com/contest/36/home比赛感受这会刚打完上海icpc,比起区域赛的题,这个简单太多了。 感受还不错,写的很顺手。除了第3题,其他3题都是一发过。 刷题得长期刷。 A题 移动题意:f : y+1 ;  b : y-1 ;   l : x-1 ;  r : x+1 一个简单的模…