Linux下Qt样式配置

1.Qt样式

Qt样式是一种基于CSS(层叠样式表)的机制,用于自定义Qt应用程序的界面外观,无需修改底层代码即可实现控件的视觉美化、主题切换和动态效果。它通过简洁的语法规则,为开发者提供了一种高效、灵活的界面定制方案。

2.语法格式

Qt样式表(QSS)的语法格式与CSS高度相似,采用选择器 + 声明块的结构,用于定义控件的外观属性。使用"//" 或者 "/* */"注释,以下是其核心语法规则和示例:

c 复制代码
选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}

选择器:指定要应用样式的控件或控件状态。
声明块:包含一个或多个属性值对,用分号分隔,大括号包裹。

例如设置QPushButton 样式:

c 复制代码
QPushButton { /*针对所有的QPushButton*/
background-color: transparent; /*设置背景透明*/
border: none;/*移除默认边框*/
border-radius: 10px;  /*圆角半径*/
padding: 5px;       /*内边距(避免文字紧贴边缘)*/
color: black;        /*文字颜色*/
}

设置QPushButton状态

c 复制代码
QPushButton:hover {
   background-color: rgba(255, 0, 0, 60); /*设置悬停颜色*/
    }
QPushButton:pressed {  /* 鼠标按下时 */
    background-color: #3e8e41;
}
QPushButton:disabled {  /* 禁用状态 */
    color: gray;
}

QWidget样式设置

c 复制代码
QWidget{
font: 12pt "黑体";  /*字体*/
border:1px solid #FFFFFF;/*边框*/
background-color: rgb(255,255, 255); /*背景颜色*/
border-radius:10px; /*圆角半径*/
color: 	#1E90FF;  /*文字颜色*/
}

QLabel样式设置

c 复制代码
font: 20pt "黑体";
border:1px solid #FFFFFF;/*设置边框为白色,1个像素*/
background-color: rgb(255,255, 255, 230);
border-radius:10px;
color: #1E90FF;

2.1样式嵌套

c 复制代码
QPushButton {
    background-color: #4CAF50;/*背景色*/
    &:hover {  /* 嵌套伪状态 */
        background-color: #45a049;/*悬停背景*/
    }
    &:pressed {
        background-color: #3e8e41;/*按下背景*/
    }
}

2.2 样式优先级关系

直接控件样式 > 父控件样式 > 全局样式 > 默认样式。

后定义的样式会覆盖先定义的(相同优先级时)。

2.3 常用属性与值

颜色设置:十六进制(#RRGGBB)、RGB(rgb(255, 0, 0))、颜色名(red)。

长度设置:像素(px)、点(pt)、百分比(%)。

关键字:如solid(实线边框)、dashed(虚线边框)。

3.样式配置案例

3.1 创建Qt工程

1.打开qt软件。

2.新建工程。






3.2 配置UI

  1. 设置Widget背景
  2. 设置Label样式
c 复制代码
#label{
font: 20pt "黑体";/*字体*/
border:1px solid #FFFFFF;/*边框*/
background-color: rgb(255,255, 255, 230);/*背景颜色*/
border-radius:10px;/*圆角半径*/
color: #1E90FF;/*字体颜色*/
}
  1. 设置widget容器样式
c 复制代码
#widget{
background-color: rgba(255, 255, 255,230);/*背景颜色*/
font: 12pt "黑体";  /*字体*/
border:1px solid #FFFFFF;/*边框*/
border-radius:10px; /*圆角半径*/
color: 	#1E90FF;  /*文字颜色*/
}
  1. 设置内容显示样式
c 复制代码
#frame{
border:1px solid #FF0000;/*边框*/
border-radius:10px; /*圆角半径*/
}
  1. 设置Button图片和样式

      设置样式
c 复制代码
QPushButton{
background-color: transparent; /*设置透明背景*/
border: none;/*移除边框*/
border-radius: 10px; /*圆角半径*/
}

3.3 UI布局

对UI进行垂直布局,整形运行效果如下:

相关推荐
ajassi20009 小时前
开源 C++ QT Widget 开发(十二)图表--环境监测表盘
c++·qt·开源
m0_571372829 小时前
关于嵌入式学习——嵌入式硬件2
linux·驱动开发·嵌入式硬件·学习
Cold_Rain029 小时前
Linux 用户的 Windows 改造之旅
linux·运维·windows
☆璇9 小时前
【Linux】Linux下基本指令
linux·运维·服务器
望获linux9 小时前
【Linux基础知识系列:第一百一十六篇】使用mt进行磁带驱动管理
java·linux·运维·服务器·数据库·windows·嵌入式软件
focksorCr9 小时前
C 内存对齐踩坑记录
linux·c语言·gnu
牟同學10 小时前
从竞态到原子:pread/pwrite 如何重塑高效文件 I/O?
linux·网络编程·c·多线程
码达拉10 小时前
Linux开发必备:yum/vim/gcc/make全攻略
linux·面试·编辑器·操作系统·vim
2401_8919573110 小时前
编辑器vim(Linux)
linux·编辑器·vim
tan77º10 小时前
【项目】分布式Json-RPC框架 - 应用层实现
linux·服务器·网络·分布式·网络协议·rpc·json