布局管理(Layouts)-Qt-思维导图-学习笔记

布局管理(Layouts)

在这里插入图片描述

Qt 提供了非常丰富的布局类，主要包括以下基本布局管理类

QBoxLayout

提供了水平和垂直的布局管理，可以将子部件按行或列排列。根据排列方向的不同，QBoxLayout 分为 QHBoxLayout（水平布局）和 QVBoxLayout（垂直布局）

QGridLayout

提供了网格形式的布局管理，可以将子部件按行和列排列，类似于表格的布局方式，适合需要严格对齐的布局场景

QFormLayout

提供了将输入部件和标签成组排列的布局管理，常用于表单界面，标签和输入控件成对出现并对齐

QStackedLayout

提供了一组布局后的部件，可以对它们进行分布显示。它允许在不同的页面或视图之间切换，每次只显示一个部件

继承关系及嵌套使用

继承关系
- 这些布局类都继承自 QLayout，而 QLayout 继承自 QObject，而不是 QWidget。这意味着布局类管理子部件的位置和大小，而不是直接显示内容
嵌套使用
- 可以将这些布局类彼此嵌套，以创建更加复杂的用户界面布局。例如，可以在一个 QVBoxLayout 中嵌入一个 QHBoxLayout，以实现混合排列效果

Layouts 组里面的 4 种布局

（1）Vertiacl Layout:垂直布局

（2）Horizontal Layout:水平布局

QBoxLayout

控件简介
- 继承关系：QBoxLayout 继承自 QLayout
- 排列方式：提供水平或垂直排列子部件的能力
- 空间管理：获取从其父布局或 parentWidget() 中获得的可用空间，并将其分成一列框
- 子部件填充：每个托管小部件填充一个框，从而实现均匀分布
用法示例
- 使用几个按钮，将他们设置为垂直排布和水平排布，以及设置它们的一些属性
- 新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可
- mainwindow.h
  - 1 #ifndef MAINWINDOW_H
    2 #define MAINWINDOW_H
    3
    4 #include
    5 #include
    6 #include
    7 #include
    8
    9 class MainWindow : public QMainWindow
    10 {
    11 Q_OBJECT
    12
    13 public:
    14 MainWindow(QWidget parent = nullptr);
    15 ~MainWindow();
    16
    17 private:
    18 / 声明按钮对象数组 */
    19 QPushButton pushButton[6];
    20
    21 / 定义两个 widget，用于容纳排布按钮 */
    22 QWidget *hWidget;
    23 QWidget vWidget;
    24
    25 / QHBoxLayout 与 QVBoxLayout 对象 */
    26 QHBoxLayout *hLayout;
    27 QVBoxLayout *vLayout;
    28
    29 };
    30 #endif // MAINWINDOW_H
- mainwindow.cpp
  - 1 #include “mainwindow.h”
    2 #include
    3
    4 MainWindow::MainWindow(QWidget parent)
    5 : QMainWindow(parent)
    6{
    7 / 设置主窗口的位置与大小 /
    8 this->setGeometry(0, 0, 800, 480);
    9
    10 / 实例化与设置位置大小 /
    11 hWidget = new QWidget(this);
    12 hWidget->setGeometry(0, 0, 800, 240);
    13
    14 vWidget = new QWidget(this);
    15 vWidget->setGeometry(0, 240, 800, 240);
    16
    17 hLayout = new QHBoxLayout();
    18 vLayout = new QVBoxLayout();
    19
    20 / QList是 Qt 的一种泛型容器类。
    21 * 它以链表方式存储一组值，
    22 * 并能对这组数据进行快速索引
    23 /
    24 QList list;
    25 / 将字符串值插入 list /
    26 list<<“one”<<“two”<<“three”<<“four”<<“five”<<“six”;
    27
    28 / 用一个循环实例化 6 个按钮 /
    29 for(int i = 0; i < 6; i++){
    30 pushButton[i] = new QPushButton();
    31 pushButton[i]->setText(list[i]);
    32 if(i < 3) {
    33 / 将按钮添加至 hLayout 中 /
    34 hLayout->addWidget(pushButton[i]);
    35 } else {
    36 / 将按钮添加至 vLayout 中 /
    37 vLayout->addWidget(pushButton[i]);
    38 }
    39 }
    40 / 设置间隔为 50 /
    41 hLayout->setSpacing(50);
    42
    43 / hWidget 与 vWidget 的布局设置为 hLayout/vLayout */
    44 hWidget->setLayout(hLayout);
    45 vWidget->setLayout(vLayout);
    46 }
    47
    48 MainWindow::~MainWindow()
    49 {
    50 }
- main.cpp
  - 由新建项目时生成，无改动
运行效果
- 在 hWidget 中添加了 3 个水平排布的按钮，在 vWidget
  中添加了 3 个垂直排布的按钮

（3） Grid Layout:网格布局

QGridLayout
- 控件简介
  - 继承关系：QGridLayout 继承自 QLayout
  - 空间管理：获取可用的空间（通过父布局或 parentWidget()），并将该空间划分为行和列
  - 子部件定位：将管理的每个小部件放入正确的单元格中
  - 动态调整：由于网格布局会随着窗口拉伸而变化，需设置组件之间的比例系数
  - 行列比例：与 QBoxLayout 不同，网格布局还需要分别设置行和列的比例系数，以实现更灵活的布局
- 用法示例
  - 使用几个按钮，将他们设置为网格布局，同时设置它们的行、列比例系数（拉伸因子），以及设置它们的一些属性
  - 不要勾选“Generate form”，默认继承 QMainWindow 类即可
  - mainwindow.h
    - 1 #ifndef MAINWINDOW_H
      2 #define MAINWINDOW_H
      3
      4 #include
      5 #include
      6 #include
      7
      8 class MainWindow : public QMainWindow
      9{
      10 Q_OBJECT
      11
      12 public:
      13 MainWindow(QWidget parent = nullptr);
      14 ~MainWindow();
      15 private:
      16
      17 / 声明 widget 窗口部件，用于容纳下面 4 个 pushButton 按钮 */
      18 QWidget gWidget;
      19
      20 / 声明 QGridLayout 对象 */
      21 QGridLayout gridLayout;
      22
      23 / 声明 pushButton 按钮数组 */
      24 QPushButton *pushButton[4];
      25
      26 };
      27 #endif // MAINWINDOW_H
  - mainwindow.cpp
    - 1 #include “mainwindow.h”
      2
      3 MainWindow::MainWindow(QWidget parent)
      4 : QMainWindow(parent)
      5{
      6 / 设置位置与大小 /
      7 this->setGeometry(0, 0, 800, 480);
      8
      9 / 实例化 /
      10 gWidget = new QWidget(this);
      11 / 设置 gWidget 居中央 /
      12 this->setCentralWidget(gWidget);
      13
      14 gridLayout = new QGridLayout();
      15 / QList 链表，字符串类型 /
      16 QList list;
      17 list<<“按钮 1”<<“按钮 2”<<“按钮 3”<<“按钮 4”;
      18 for (int i = 0; i < 4; i++){
      19 pushButton[i] = new QPushButton();
      20 pushButton[i]->setText(list[i]);
      21 / 设置最小宽度与高度 /
      22 pushButton[i]->setMinimumSize(100, 30);
      23 / 自动调整按钮的大小 /
      24 pushButton[i]->setSizePolicy(
      25 QSizePolicy::Expanding,
      26 QSizePolicy::Expanding
      27 );
      28 switch (i) {
      29 case 0:
      30 / 将 pushButton[0]添加至网格的坐标(0,0),下同 /
      31 gridLayout->addWidget(pushButton[i], 0, 0);
      32 break;
      33 case 1:
      34 gridLayout->addWidget(pushButton[i], 0, 1);
      35 break;
      36 case 2:
      37 gridLayout->addWidget(pushButton[i], 1, 0);
      38 break;
      39 case 3:
      40 gridLayout->addWidget(pushButton[i], 1, 1);
      41 break;
      42 default:
      43 break;
      44 }
      45 }
      46 / 设置第 0 行与第 1 行的行比例系数 /
      47 gridLayout->setRowStretch(0, 2);
      48 gridLayout->setRowStretch(1, 3);
      49
      50 / 设置第 0 列与第 1 列的列比例系数 /
      51 gridLayout->setColumnStretch(0, 1);
      52 gridLayout->setColumnStretch(1, 3);
      53
      54 / 将 gridLayout 设置到 gWidget */
      55 gWidget->setLayout(gridLayout);
      56 }
      57
      58 MainWindow::~MainWindow()
      59 {
      60 }
  - main.cpp
    - 由新建项目时生成，无改动
- 运行效果
  - 在 gWidget 中添加了 4 个按钮，因为设置了行、列的系数比（拉伸因子），所以看到的按钮是按系数比的比例显示

（4）Form Layout:表单布局

QFormLayout
- 控件简介
  - 继承关系：QFormLayout 继承自 QLayout
  - 功能：管理输入小部件及其关联标签的表单
  - 布局形式：以两列的形式布局子部件，左列由标签组成，右列由输入小部件（如 QLineEdit(行编辑器)、QSpinBox(旋转框等)）组成
  - 换行策略：通常使用 setRowWrapPolicy(RowWrapPolicy policy) 接口函数设置布局的换行策略，以控制布局效果
- 用法示例
  - 使用 addRow(const QString &labelText,
    QWidget *field)来创建一个带有给定文本的 QLabel 及 QWidget 小部件，并且它们是伙伴关系
  - 不要勾选“Generate form”，默认继承 QMainWindow 类即可
  - mainwindow.h
    - 1 #ifndef MAINWINDOW_H
      2 #define MAINWINDOW_H
      3
      4 #include
      5 #include
      6 #include
      7
      8 class MainWindow : public QMainWindow
      9{
      10 Q_OBJECT
      11
      12 public:
      13 MainWindow(QWidget parent = nullptr);
      14 ~MainWindow();
      15 private:
      16 / widget 对象 */
      17 QWidget fWidget;
      18
      19 / 用于输入用户名 */
      20 QLineEdit userLineEdit;
      21
      22 / 用于输入密码 */
      23 QLineEdit passwordLineEdit;
      24
      25 / 声明 QFormLayout 对象 */
      26 QFormLayout *formLayout;
      27 };
      28 #endif // MAINWINDOW_H
  - mainwindow.cpp
    - 1 #include “mainwindow.h”
      2
      3 MainWindow::MainWindow(QWidget parent)
      4 : QMainWindow(parent)
      5{
      6 / 设置位置与大小 /
      7 this->setGeometry(0, 0, 800, 480);
      8
      9 / 实例化及设置位置与大小，下同 /
      10 fWidget = new QWidget(this);
      11 fWidget->setGeometry(250, 100, 300, 200);
      12
      13 userLineEdit = new QLineEdit();
      14 passwordLineEdit = new QLineEdit();
      15
      16 formLayout = new QFormLayout();
      17
      18 / 添加行 /
      19 formLayout->addRow(“用户名：”, userLineEdit);
      20 formLayout->addRow(“密码：”, passwordLineEdit);
      21
      22 / 设置水平垂直间距 /
      23 formLayout->setSpacing(10);
      24
      25 / 设置布局外框的宽度 /
      26 formLayout->setMargin(20);
      27
      28 / 将 formLayout 布局到 fWidget */
      29 fWidget->setLayout(formLayout);
      30 }
      31
      32 MainWindow::~MainWindow()
      33 {
      34 }
  - main.cpp
    - 由新建项目时生成，无改动
- 运行效果
  - 在 fWidget 中添加了两行，同时设置了它们的间隔，与距边框的宽度。与 QGirdLayout 布局比较，QFomLayout 布局比较适用于行与列比较少的布局格局。如果是多行多列的布局，应该使用 QGirdLayout 布局