码上通QT实战04--主窗体布局

1、前言

在Qt中，主窗体布局通常使用布局管理器（Layout Managers）来实现，确保控件能够随窗体大小变化自动调整。以下是几种常见的布局方法，可以灵活地实现Qt主窗体的布局需求：

使用QHBoxLayout或QVBoxLayout

QHBoxLayout和QVBoxLayout是最基础的布局管理器，分别用于水平和垂直方向的控件排列。通过将控件添加到布局中，再设置为主窗体的布局，可以实现简单的界面设计。

cpp 复制代码

QWidget *mainWidget = new QWidget();
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(new QPushButton("Button 1"));
layout->addWidget(new QPushButton("Button 2"));
mainWidget->setLayout(layout);
mainWidget->show();

使用QGridLayout

QGridLayout适用于更复杂的网格布局，允许控件跨越多个行或列。通过指定行和列的索引，可以精确控制控件的位置。

cpp 复制代码

QWidget *mainWidget = new QWidget();
QGridLayout *layout = new QGridLayout();
layout->addWidget(new QPushButton("Button 1"), 0, 0);
layout->addWidget(new QPushButton("Button 2"), 0, 1);
layout->addWidget(new QPushButton("Button 3"), 1, 0, 1, 2); // 跨越两列
mainWidget->setLayout(layout);
mainWidget->show();

使用嵌套布局

对于更复杂的界面，可以通过嵌套布局实现。例如，将多个水平或垂直布局组合到一个主布局中

cpp 复制代码

QWidget *mainWidget = new QWidget();
QVBoxLayout *mainLayout = new QVBoxLayout();
QHBoxLayout *topLayout = new QHBoxLayout();
QHBoxLayout *bottomLayout = new QHBoxLayout();

topLayout->addWidget(new QPushButton("Top Button 1"));
topLayout->addWidget(new QPushButton("Top Button 2"));
bottomLayout->addWidget(new QPushButton("Bottom Button"));

mainLayout->addLayout(topLayout);
mainLayout->addLayout(bottomLayout);
mainWidget->setLayout(mainLayout);
mainWidget->show();

使用QMainWindow

QMainWindow是Qt中用于主窗体的类，提供了菜单栏、工具栏、状态栏和中心部件的支持。中心部件可以设置为任何QWidget，并通过布局管理器管理其子控件。

cpp 复制代码

QMainWindow *mainWindow = new QMainWindow();
QWidget *centralWidget = new QWidget();
QVBoxLayout *layout = new QVBoxLayout();

layout->addWidget(new QPushButton("Button 1"));
layout->addWidget(new QPushButton("Button 2"));
centralWidget->setLayout(layout);
mainWindow->setCentralWidget(centralWidget);
mainWindow->show();

使用QFormLayout

QFormLayout适用于表单类型的布局，通常用于标签和输入框的配对显示。可以快速创建整齐的表单界面.

cpp 复制代码

QWidget *mainWidget = new QWidget();
QFormLayout *layout = new QFormLayout();
layout->addRow("Name:", new QLineEdit());
layout->addRow("Age:", new QLineEdit());
mainWidget->setLayout(layout);
mainWidget->show();

注意事项

布局管理器会自动处理控件的尺寸和位置，避免手动设置几何属性。
使用setSizePolicy可以调整控件在布局中的行为，例如扩展或固定大小。
嵌套布局时，注意层级关系以避免布局混乱。

本项目布局采用QMainWindow嵌套布局实现

2、开始干

先看一下原来自动生成的布局，自动生成的菜单及状态条必须删除。

1、整体布局采用左右两列

Widget 概述

Widget（微件）是用户界面中的小型组件或应用程序，通常用于显示特定信息或提供简单交互功能。常见于桌面、移动设备或网页，能够快速访问常用功能（如天气、时钟、日历等），无需打开完整应用。

常见类型

桌面 Widget

嵌入操作系统桌面，如 Windows 的天气工具或 macOS 的通知中心插件。

移动 Widget

iOS 的"今日视图"或 Android 的主屏幕小组件，支持快速查看日程、步数等。

网页 Widget

嵌入网站的小工具，如聊天窗口、搜索栏或社交媒体插件。

设计原则

简洁性：聚焦核心功能，避免复杂交互。
实时性：定期更新数据（如股票行情）。
可定制化：允许用户调整尺寸或内容偏好。

通过合理设计，Widget 能显著提升用户体验效率。

上面的图标就是水平布局，在Qt中，水平布局（QHBoxLayout）是一种常用的布局管理器，用于将控件按水平方向排列。

调整布局的边距通常可以通过以下方式实现，具体取决于使用的布局类型和需求。

通过设置左侧widget的宽度实现调整范围

2、左侧导航布局

QLabel 的基本用法

QLabel 是 Qt 框架中用于显示文本或图像的控件，支持富文本、超链接和动态内容。

注意事项

若需频繁更新图像，建议使用 QPixmap::load() 替代重复创建对象。
富文本渲染可能影响性能，复杂场景建议改用 QTextEdit。
默认情况下，QLabel 不会自动换行，需通过 setWordWrap(true) 启用。

弹簧控件Space的基本用法

在Qt中，verticalSpacer 是一种用于布局管理的组件，通常用于在垂直布局（QVBoxLayout）中填充空白区域或调整控件之间的间距，可以通过拖拽"Spacer"组件到布局中创建垂直间隔器。选择"Vertical Spacer"后，将其放置在布局的顶部、底部或控件之间，用于自动调整间距。

注意事项

间隔器不参与信号/槽机制，仅用于布局管理。
在复杂布局中，结合 QHBoxLayout 和嵌套布局可实现更灵活的界面设计。
避免过度使用间隔器，优先考虑布局的拉伸因子（setStretch）实现类似效果。

3、CSS中的盒子模型

CSS 盒子模型（Box Model）是QT布局的核心概念，用于描述元素在页面中的占位方式。每个元素被抽象为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型的组成部分

内容（Content）：元素的实际内容区域，显示文本或子元素。
内边距（Padding）：内容与边框之间的透明空间，控制内容与边框的距离。
边框（Border）：围绕内容和内边距的线条，可设置样式、颜色和宽度。
外边距（Margin）：盒子与其他元素之间的透明空间，控制盒子间的距离。

4、运行测试

复制代码

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