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进行垂直布局,整形运行效果如下:

相关推荐
conkl1 天前
PyCharm 在 Linux 上的安装指南
linux·ide·pycharm
zhangzeyuaaa1 天前
Linux 进程名查看与pkill命令的使用
linux·运维·服务器
美好的事情能不能发生在我身上1 天前
Linux实用操作以及基础命令
linux·运维·服务器
笨蛋少年派1 天前
Shell常用快捷键和常用文件操作命令
linux·运维·服务器
零基础的修炼1 天前
Linux---文件系统
linux·运维·服务器
许怀楠1 天前
【Linux】环境变量
linux
CC.GG1 天前
【Linux】Linux编辑器--vim
linux·编辑器·vim
满天点点星辰1 天前
Linux命令大全-usermod命令
linux·运维
欲掩1 天前
Shell脚本
linux
Lynnxiaowen1 天前
今天继续学习nginx服务部署与配置
linux·运维·服务器·学习·nginx