布局管理(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 布局