【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

2024-04-08 23:12

本文主要是介绍【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

往期回顾:

【QT入门】 无边框窗口设计之实现圆角窗口-CSDN博客【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口-CSDN博客

【QT入门】 无边框窗口设计之综合运用,实现WPS的tab页面-CSDN博客

【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

一、qss简介

1、什么是qss样式

Qt-style-sheet, 简写就是qss, Qt样式表,不需要用C++代码控件进行重载,就可以修改控件外观,美化界面,类似于前端的css,但是没有css功能强大。qss千变万化,可以写出各种花里胡哨的样式。

qss样式很多,篇幅很多,没法一一细讲,自己多看qss简介大全,需要用到什么得时候就去搜就是,主要是多看多记多熟悉,我以及把常用的上传。

https://download.csdn.net/download/LF__plus/89089225?spm=1001.2014.3001.5501

qss样式的注释形式: /*我是qss注释*/ 

2、QLabel 样式示例

比如:以QLabel为例进行介绍:

QLabel 
{background-color: rgb(54,54,54);   /*背景色*/color: rgb(230,230,230);           /*字体颜色,前景色*/font-family: "Microsoft YaHei";    /*字体类型*/font-size: 14px;                   /*字体大小*/         
}

颜色可以直接用英文单词来写,也可以用rgb(r,g,b)来写,也可以rgba(r, g, b,透明度)来写。

二、常用样式

 1、字体样式

1.1示例
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #123456;

我们一一分析

font-family 为设置字体类型,标准形式需要加双引号,不加也可能会生效,具体看系统是否支持,中英文都支持,但要保证字体编码支持,一般程序编码为"utf-8"时没问题。
font-size为设置字体大小,单位一般使用 px 像素
font-style 为设置字体斜体样式,italic 为斜体, normal 为不斜体
font-weight为设置字体加粗样式,bold 为加粗, normal 为不加粗
color为设置字体颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent;注意:字体颜色用的是 color 属性,没有 font-color 这个属性

注意:字体颜色不是font-color,直接就是color 

当然字体也可以一起设置:

font: bold italic 18px "Microsoft YaHei";

同时设置字体 style weight size family 的样式时,style(是否斜体) 和 weight (是否加粗)必须出现在开头,size 和 family 在后面,而且 size 必须在 family 之前,否则样式将不生效, 

 2、边框样式

2.1示例
QLabel 
{border-style: solid;/*单独设置某一边 border-right-style:dotted;*/border-width: 2px;border-color: red;
}

也可以一起设置

border: 2px solid red;

solid 为实线, dashed 为虚线, dotted 为点线, none 为不显示(如果不设置 border-style 的话,默认带边框) 

单独的属性设置:上、右、下、左

border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red; 


border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;


border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;


border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua; 

边框半径(圆角):

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
border-radius: 20px;  /*统一的半径*/

3、文字位置 

3.1对齐方式

 在 qss 中,没有对齐方式,只能通过设置 padding 来实现文字的显示位置

一般 padding-left 相当于 x 坐标,padding-top 相当于 y 坐标,设置这两个就可以在任意位置显示了(默认情况下文字是上下左右都居中显示的),这里就涉及到一个问题,如果同时设置padding-left 和padding-right呢?建议是不要同时设置,可能会出问题,一般来说真实开发的时候原型图上都会给清楚的。

4、背景样式

4.1示例
background-color: rgb(54,54,54);
background-image: url(:/imgs/picture/0.png);   /*显示背景图片, 也可以不用引号*/
background-repeat: no-repeat;  /*不重复显示*/
background-position: left center;

再次一一分析:

 background-color为设置背景颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue等,或者使用rgb(r,g,b)和rgba(r,g,b,a)来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent
 background-image为设置背景图片,图片路径为 url(image-path)
 background-repeat为设置背景图是否重复填充背景,如果背景图片尺寸小于背景实际大小的话,默认会自动重复填充图片,可以设置为 no-repeat 不重复,repeat-x 在x轴重复,repeat-y 在y轴重复
 background-position为设置背景图片显示位置,只支持 left right top bottom center;值 left right center 为设置水平位置,值 top bottom center 为设置垂直位置

同样的有统一设置

background: url(":/imgs/picture/0.png") no-repeat left center #363636;

background 为设置背景的所有属性,color image repeat position 这些属性值出现的顺序可以任意 

 5、动态悬浮样式

 5.1示例
QLabel:hover
{color: red;border-color: green;background-color: #363636;
}

就是当鼠标放上去的时候会显示什么,这个运用是非常非常广泛的,多多熟悉 

 6、禁止使用的样式

6.1示例
QLabel:disabled
{color: blue;border-color: brown;background-color: #363636;
}

以上,就是qss常用的一些样式。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

这篇关于【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/886635

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

Qt QCustomPlot库简介(最新推荐)

《QtQCustomPlot库简介(最新推荐)》QCustomPlot是一款基于Qt的高性能C++绘图库,专为二维数据可视化设计,它具有轻量级、实时处理百万级数据和多图层支持等特点,适用于科学计算、... 目录核心特性概览核心组件解析1.绘图核心 (QCustomPlot类)2.数据容器 (QCPDataC

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码