Linux下Qt样式配置

1.Qt样式

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

2.语法格式

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

选择器 {属性1: 值1;属性2: 值2;...
}

选择器：指定要应用样式的控件或控件状态。
声明块：包含一个或多个属性值对，用分号分隔，大括号包裹。
例如设置QPushButton 样式：

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

  设置QPushButton状态

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

  QWidget样式设置

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

  QLabel样式设置

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

2.1样式嵌套

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样式
   

#label{
font: 20pt "黑体";/*字体*/
border:1px solid #FFFFFF;/*边框*/
background-color: rgb(255,255, 255, 230);/*背景颜色*/
border-radius:10px;/*圆角半径*/
color: #1E90FF;/*字体颜色*/
}

3. 设置widget容器样式

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

4. 设置内容显示样式
   

#frame{
border:1px solid #FF0000;/*边框*/
border-radius:10px; /*圆角半径*/
}

5. 设置Button图片和样式
   
   设置样式
   

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

3.3 UI布局

  对UI进行垂直布局，整形运行效果如下：