【Qt之·控件·样式表】

系列文章目录

文章目录

前言
一、Qt样式表的基础知识
- 1.1 Qt样式表的定义和语法规则
- 1.2 Qt样式表中的选择器和属性
- - 1.2.1 盒子模型
  - - 1.2.2 border
- 1.3 Qt样式表中的伪类和伪元素
二、编写基本的Qt样式表
- 2.1 在Qt应用程序中引入样式表文件的方式
- 2.2 设置基本的背景色、字体样式等
三、Qt样式表的高级应用技巧
- 3.1 使用选择器和属性选择器来更精确地定位元素
- 3.2 使用伪类和伪元素来实现特定的效果
- 3.3 使用层叠样式表（QSS）选择器和属性
四、Qt样式表的调试和优化
- 4.1 使用Qt的样式编辑器
- 4.2 使用Qt Creater的视觉调试工具
- 4.3 实时预览和调试样式表
五、不同控件样式表语法
- 5.1 QComboBox
- - 5.1.1 设置下拉框框体
  - 5.1.2 设置下拉框窗体子项
  - 5.1.3 设置下拉框窗体
六、实例演示
总结

前言

控件样式表是一种基于层叠样式表（CSS）语法的方式，用于定制和美化Qt控件的外观和风格。通过控件样式表，我们可以改变控件的背景颜色、字体、边框等属性，还可以设置控件在不同状态下的样式，如鼠标悬停、按下等。这为我们提供了很大的自由度，使我们能够根据自己的需求和设计风格来定制界面。

本博客将介绍如何使用Qt样式表来定制常见的控件，包括按钮、标签、文本框等。我们将学习如何设置控件的背景颜色、字体、边框等属性，如何设置控件在不同状态下的样式，以及如何通过样式表设置控件的大小和位置等。

一、Qt样式表的基础知识

1.1 Qt样式表的定义和语法规则

1.2 Qt样式表中的选择器和属性

1.2.1 盒子模型

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/72c557f95f2b4f1ebc57bd1371cde4f8.png

注意： margin、border-width和padding属性都默认为0。在这种情况下，所有四个矩形(边距、边框、填充和内容)都完全重合。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

1.2.2 border

每个边框有3个方面：样式（或外观）、颜色、以及其宽度（粗细），下面我们分别重点解释这三项。
边框样式（border-style）
设置元素所有边框的样式，或者单独地为各边设置边框样式。它有10个属性值，分别是：

枚举值	说明
none	无样式
hidden	同样是无样式，主要用于解决和表格的边框冲突
dotted	点划线
dashed	虚线
solid:	实线
double	双线,两条线加上中间的空白等于border-width的取值
groove	槽状(定义 3D 凹槽边框。其效果取决于 border-color 的值。)
ridge	脊状,和groove相反(定义 3D 垄状边框。其效果取决于 border-color 的值。)
inset	凹陷(定义 3D inset 边框。其效果取决于 border-color 的值。)
outset	凸出,和inset相反(定义 3D outset 边框。其效果取决于 border-color 的值。)
inherit	规定应该从父元素继承边框样式

1.3 Qt样式表中的伪类和伪元素

二、编写基本的Qt样式表

2.1 在Qt应用程序中引入样式表文件的方式

2.2 设置基本的背景色、字体样式等

三、Qt样式表的高级应用技巧

3.1 使用选择器和属性选择器来更精确地定位元素

3.2 使用伪类和伪元素来实现特定的效果

3.3 使用层叠样式表（QSS）选择器和属性

四、Qt样式表的调试和优化

4.1 使用Qt的样式编辑器

4.2 使用Qt Creater的视觉调试工具

4.3 实时预览和调试样式表

五、不同控件样式表语法

5.1 QComboBox

5.1.1 设置下拉框框体

"QComboBox {""max-height: 30px;""min-height: 30px;""background-color: #ffffff;""border: 1px solid gray;""border-radius: 3px;""padding: 1px 18px 1px 3px;""min-width: 6em; }"

5.1.2 设置下拉框窗体子项

 "QComboBox QAbstractItemView::item{height: 80px;}"

注意：

QComboBox QAbstractItemView::item来修改item的样式，前提必须调用comboBox->setView(new QListView()); 才会生效。 我们看到虽然高度修改为50了，但是文字大小需要重新设置，此时comboBox->setFont(font);不会影响到下拉框的Item文字

5.1.3 设置下拉框窗体

 "QComboBox QAbstractItemView {""max-height: 200px;""min-height: 200px;""outline: 10px solid;" /*分割线*/"border: 1px solid;""color: black;""background-color: #124879;""selection-background-color:#0a386e;""}"

注意：

在 Qt 的 QComboBox 中，设置下拉框展开后（即下拉列表）的高度并不直接通过属性或方法来实现，因为 QComboBox 本身并没有直接控制下拉列表高度的属性。但是，你可以通过一些间接的方式来影响或控制这个高度。

ui->m_qcombxType->setMaxVisibleItems(10); // 设置最多可见10个项目