码上通QT实战09--监控页面01-区域划分

1、前言

Qt 中的布局（Layout）系统，这是 Qt 界面开发中实现控件自适应窗口大小、跨平台界面适配 的核心技术，Qt 布局系统（QLayout 及其子类）的核心目标是自动管理控件的位置和大小 ，解决原生固定坐标布局（setGeometry/move）的两大痛点：

窗口缩放时，控件不会自适应，界面错乱；
不同分辨率 / 系统（Windows/macOS/Linux）下界面布局不一致。

布局的核心逻辑：

布局会根据控件的大小策略（Size Policy） 、最小 / 最大尺寸 、伸缩因子（Stretch Factor） 自动分配空间；
布局本身是 "不可见容器"，需挂载到 QWidget/QDialog/QMainWindow 等窗口上生效。

Qt 提供了 4 种核心布局类，覆盖绝大多数界面布局场景：

使用布局的核心步骤：

创建布局对象（如 QVBoxLayout）；
向布局中添加控件 / 子布局（addWidget/addLayout）；
将布局设置到窗口 / 容器控件上（setLayout）。

布局的高级技巧：

伸缩因子（Stretch Factor）
伸缩项（Stretch Item）
大小策略（Size Policy）
嵌套布局，布局可以无限嵌套（布局中添加子布局），实现复杂界面

2、如何干

1、整体划分左右板块，右边占220

2、左侧划分上下区域，下面占180

3、左上部分划分为左中右区域

4、温度部分划分上中下三个区域

5、QSS 样式表

QSS 是 Qt 对 CSS 的定制化实现与扩展，90% 的基础语法和 CSS 一致，学习成本低；
QSS 专门适配 Qt 控件体系，提供了 Qt 专属的选择器、伪状态、属性，完美贴合 Qt 开发；
QSS 支持 C++ Qt 和 PyQt/PySide2/PySide6，语法完全通用，只是代码中加载方式略有差异；
QSS 可以实现「样式与逻辑分离」，界面美化代码不用耦合业务逻辑，维护更方便

QSS 基础语法结构

cpp 复制代码

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

语法说明

选择器 ：指定「哪些 Qt 控件」会应用这个样式（比如 QPushButton 代表所有按钮，QLabel 代表所有标签）；
声明块 ：用 {} 包裹，内部是键值对格式的样式属性；
样式属性 ：属性名: 属性值 为一组，每组末尾必须加 ; 分号（分号是结束符，缺一不可）；
多个样式规则可以并列编写，互不影响。

QSS 最常用的选择器

控件类型选择器（最基础，全局控件）
id 选择器（# 号选择器，精准控件，推荐！）
后代选择器（空格分隔，父子控件）
直接子选择器（> 号分隔，直接父子）
分组选择器（逗号分隔，批量控件）

QSS 常用样式属性速查表

QSS 优先级规则

优先级从高到低排序：

局部样式 > 全局样式 ：控件自身 setStyleSheet() 设置的样式，优先级最高，会覆盖全局样式；
精准选择器 > 宽泛选择器 ：#id选择器 > 直接子选择器 > 后代选择器 > 类型选择器；比如：#btn_login 比 QPushButton 优先级高，QWidget > QPushButton 比 QPushButton 优先级高；
伪状态 > 普通状态：带伪状态的样式（如:hover）会覆盖同选择器的普通样式；
同优先级，后写的样式覆盖先写的样式：同一个选择器的样式，后面写的属性会覆盖前面的同名属性。

6、运行效果

7、小结

布局（Layout）是 Qt 界面开发的核心基石 ，所有继承自QWidget的控件都能通过布局管理位置和大小，QHBoxLayout 水平布局【使用率最高，QVBoxLayout 垂直布局【使用率最高】，QGridLayout 网格布局【功能最强，必备】，QFormLayout 表单布局【专用布局，高频】，真理：没有任何一个复杂界面是单个布局能实现的，所有复杂界面都是「基础布局的嵌套组合」。

复制代码

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。