QT 开发日志：QT 布局管理 —— 如何使用布局器组织 UI 元素

在这里插入图片描述

🎬 鸽芷咕：个人主页
🔥 个人专栏: 《C++干货基地》《粉丝福利》

⛺️生活的理想，就是为了理想的生活!

专栏介绍

在软件开发和日常使用中，BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经验分享和知识交流的平台。我们将深入探讨各类BUG的成因、解决方法和预防措施，助你轻松应对编程中的挑战。

博主简介

博主致力于嵌入式、Python、人工智能、C/C++领域和各种前沿技术的优质博客分享，用最优质的内容带来最舒适的阅读体验！在博客领域获得 C/C++领域优质、CSDN年度征文第一、掘金2023年人气作者、华为云享专家、支付宝开放社区优质博主等头衔。

个人社区 & 个人社群加入点击即可

加入个人社群即可获得博主精心整理的账号运营技巧，对于技术博主该如何打造自己的个人IP。带你快速找你你自己的账号定位为你扫清一切账号运营和优质内容输出问题。

文章目录

专栏介绍
- 一、为什么需要布局管理
- 二、Qt 中的布局器类型
- - 1. QHBoxLayout（水平布局）
  - 2. QVBoxLayout（垂直布局）
  - 3. QGridLayout（网格布局）
  - 4. QFormLayout（表单布局）
- 三、如何使用布局器组织 UI 元素
- - 1. 创建布局器对象
  - 2. 添加 UI 元素到布局器
  - 3. 设置布局器到容器窗口
- 四、布局器的高级用法
- - 1. 嵌套布局器
  - 2. 布局器的间距和边距
  - 3. 布局器的拉伸因子
- 五、总结

一、为什么需要布局管理

在软件开发过程中，我们的应用程序可能会在不同的设备上运行，这些设备具有不同的屏幕尺寸和分辨率。如果没有布局管理，我们将不得不手动调整每个 UI 元素的位置和大小，以适应不同的屏幕环境。这不仅是一项繁琐的工作，而且容易出现错误。

布局管理可以自动处理 UI 元素的排列和调整，使得我们的界面在不同的环境下都能保持良好的布局。它还可以提高开发效率，减少维护成本，并且使得界面更加美观和易于使用。

二、Qt 中的布局器类型

Qt 提供了几种不同类型的布局器，每种布局器都有其特定的用途和特点。以下是 Qt 中常见的布局器类型：

1. QHBoxLayout（水平布局）

用途：将 UI 元素水平排列在一行中。当窗口大小发生变化时，布局器会自动调整 UI 元素的宽度，以保持它们在水平方向上的对齐。
示例：假设我们正在开发一个简单的登录界面，其中包含两个输入框（用户名和密码）和一个登录按钮。我们可以使用 QHBoxLayout 将这三个 UI 元素水平排列在一行中，使得它们在界面中更加整齐和美观。

#include <QApplication>
#include <QWidget>
#include <QHBoxLayout>
#include <QLineEdit>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QHBoxLayout *layout = new QHBoxLayout(&window);

    QLineEdit *usernameEdit = new QLineEdit();
    QLineEdit *passwordEdit = new QLineEdit();
    QPushButton *loginButton = new QPushButton("Login");

    layout->addWidget(usernameEdit);
    layout->addWidget(passwordEdit);
    layout->addWidget(loginButton);

    window.show();

    return app.exec();
}

2. QVBoxLayout（垂直布局）

用途：将 UI 元素垂直排列在一列中。与 QHBoxLayout 类似，当窗口大小发生变化时，布局器会自动调整 UI 元素的高度，以保持它们在垂直方向上的对齐。
示例：如果我们要创建一个设置界面，其中包含多个选项卡和一个确定按钮，我们可以使用 QVBoxLayout 将这些 UI 元素垂直排列在一列中。

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QTabWidget>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QTabWidget *tabWidget = new QTabWidget();
    QPushButton *okButton = new QPushButton("OK");

    layout->addWidget(tabWidget);
    layout->addWidget(okButton);

    window.show();

    return app.exec();
}

3. QGridLayout（网格布局）

用途：将 UI 元素排列在一个二维网格中。我们可以指定每个 UI 元素在网格中的位置和大小，使得界面更加整齐和规范。
示例：在一个表格编辑界面中，我们可以使用 QGridLayout 将表格、工具栏和状态栏等 UI 元素排列在一个网格中，以实现更好的布局效果。

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QTableWidget>
#include <QToolBar>
#include <QStatusBar>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QGridLayout *layout = new QGridLayout(&window);

    QTableWidget *tableWidget = new QTableWidget();
    QToolBar *toolBar = new QToolBar();
    QStatusBar *statusBar = new QStatusBar();

    layout->addWidget(tableWidget, 0, 0, 1, 3);
    layout->addWidget(toolBar, 1, 0);
    layout->addWidget(statusBar, 2, 0, 1, 3);

    window.show();

    return app.exec();
}

4. QFormLayout（表单布局）

用途：用于创建表单式的界面布局，通常用于输入和编辑数据。它将标签和对应的输入字段成对地排列在一行中，使得界面更加清晰和易于使用。
示例：在一个用户注册界面中，我们可以使用 QFormLayout 将用户名、密码、电子邮件等输入字段和对应的标签排列在一个表单中。

#include <QApplication>
#include <QWidget>
#include <QFormLayout>
#include <QLabel>
#include <QLineEdit>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QFormLayout *layout = new QFormLayout(&window);

    QLabel *usernameLabel = new QLabel("Username:");
    QLineEdit *usernameEdit = new QLineEdit();
    QLabel *passwordLabel = new QLabel("Password:");
    QLineEdit *passwordEdit = new QLineEdit();
    QLabel *emailLabel = new QLabel("Email:");
    QLineEdit *emailEdit = new QLineEdit();

    layout->addRow(usernameLabel, usernameEdit);
    layout->addRow(passwordLabel, passwordEdit);
    layout->addRow(emailLabel, emailEdit);

    window.show();

    return app.exec();
}

三、如何使用布局器组织 UI 元素

1. 创建布局器对象

首先，我们需要创建一个布局器对象。可以根据需要选择合适的布局器类型，如 QHBoxLayout、QVBoxLayout、QGridLayout 或 QFormLayout。

QHBoxLayout *layout = new QHBoxLayout();

2. 添加 UI 元素到布局器

创建好布局器对象后，我们可以将 UI 元素添加到布局器中。可以使用布局器的addWidget()方法将单个 UI 元素添加到布局器中，也可以使用addLayout()方法将另一个布局器添加到当前布局器中。

QPushButton *button = new QPushButton("Click me");
layout->addWidget(button);

3. 设置布局器到容器窗口

最后，我们需要将布局器设置到一个容器窗口中，以便布局器能够管理容器窗口中的 UI 元素。可以使用容器窗口的setLayout()方法将布局器设置到容器窗口中。

QWidget window;
window.setLayout(layout);

四、布局器的高级用法

1. 嵌套布局器

我们可以使用嵌套布局器来实现更加复杂的界面布局。例如，我们可以在一个垂直布局中嵌套一个水平布局，或者在一个网格布局中嵌套一个表单布局。

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *mainLayout = new QVBoxLayout(&window);

    QHBoxLayout *buttonLayout = new QHBoxLayout();
    QPushButton *button1 = new QPushButton("Button 1");
    QPushButton *button2 = new QPushButton("Button 2");
    buttonLayout->addWidget(button1);
    buttonLayout->addWidget(button2);

    mainLayout->addLayout(buttonLayout);

    window.show();

    return app.exec();
}

2. 布局器的间距和边距

布局器可以设置间距和边距，以控制 UI 元素之间的距离和容器窗口的边缘距离。可以使用布局器的setSpacing()方法设置间距，使用setContentsMargins()方法设置边距。

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QPushButton *button1 = new QPushButton("Button 1");
    QPushButton *button2 = new QPushButton("Button 2");

    layout->addWidget(button1);
    layout->addWidget(button2);

    layout->setSpacing(10);
    layout->setContentsMargins(10, 10, 10, 10);

    window.show();

    return app.exec();
}

3. 布局器的拉伸因子

布局器可以设置拉伸因子，以控制 UI 元素在布局中的拉伸比例。当窗口大小发生变化时，具有较大拉伸因子的 UI 元素将占用更多的空间。

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QPushButton *button1 = new QPushButton("Button 1");
    QPushButton *button2 = new QPushButton("Button 2");

    layout->addWidget(button1);
    layout->addWidget(button2);

    layout->setStretchFactor(button1, 1);
    layout->setStretchFactor(button2, 2);

    window.show();

    return app.exec();
}

五、总结

Qt 布局管理是构建用户界面的重要工具，它可以帮助我们自动调整和排列 UI 元素，确保界面在不同的环境下都能保持良好的布局。通过使用不同类型的布局器，我们可以实现各种复杂的界面布局。在使用布局器时，我们可以根据需要设置间距、边距和拉伸因子等属性，以进一步优化界面的布局效果。希望本文能够帮助你更好地理解和使用 Qt 布局管理。