我的QT Creator学习笔记（八）——布局管理

       参考文献：《Qt Creator 快速入门》第三版 霍亚飞编著

Qt主要提供了QLayout类及其子类作为布局管理器，它们可以实现常用的布局管理功能。一般只需要使用QLayout的几个子类，它们分别是QBoxLayout（基本布局管理器）、QGridLayout（栅格布局管理器）、QFormLayout(窗口布局管理器）、QStackedLayout(栈布局管理器）。

1、基本布局管理器（QBoxLayout)

       基本布局管理器QBoxLayout类可以使子部件在水平方向或者垂直方向排成列，它将所有空间分成一行盒子，然后将每个部件放入一个盒子中。

1.1在设计模式中使用基本布局管理器

在设计模式中向界面拖入一个Font Combo Box和一个Text Edit,然后点击上方“水平布局”按钮，

 

 

点击之后，可以看到ui文件的源码，多了QBoxLayout类，如下图 

 设计模式下也可以看见layout的几个属性如下图

运行效果如下，子部件填满了窗口，并且会随着窗口部件的变化而变化

1.2在代码中使用基本布局管理器 

在界面上右击，选择布局-》打破布局，然后在mywidget.cpp中添加头文件#include<QVBoxLayout>,并在构造函数中增加以下代码，运行效果与前面一致。

    QVBoxLayout* layout=new QVBoxLayout;
    layout->addWidget(ui->fontComboBox);
    layout->addWidget(ui->textEdit);
    layout->setSpacing(7);//设置部件间的距离
    layout->setContentsMargins(11,11,11,11);//设置边距
                                            //分别是左、上、右、下边距
    setLayout(layout);//将这个布局设置为MyWidget类的布局

2、栅格布局管理器 （QGridLayout)

        栅格布局管理器QGridLayout类使部件在网格中进行布局，它将所有的空间分成一些行和列，行和列的交叉形成了单元格，然后将部件放入一个确定的单元格中。

       在设计模式中再拖入一个pushButton,在MyWidget.cpp中添加头文件<QGridLyout>,在mywidget构造函数中，去掉刚才的布局代码，添加以下代码

   

    QGridLayout* layout=new QGridLayout;
    //添加部件从第0行0列开始，占据1行2列
    layout->addWidget(ui->fontComboBox,0,0,1,2);
    //添加部件从第0行2列开始，占据1行1列
    layout->addWidget(ui->pushButton,0,2,1,1);
    //添加部件从第1行0列开始，占据1行3列
    layout->addWidget(ui->textEdit,1,0,1,3);
    setLayout(layout);

运行效果如下

3、窗体布局管理器（QFormLayout) 

        窗体布局管理器QFormLayout类用来管理表单的输入部件以及与它们相关的标签。窗体布局管理器将它们的子部件分为两列，左边是一些标签，右边是一些输入部件。

      将构造函数中自己添加的布局代码注释掉，然后进入设计模式，从部件栏中找到Form Layout拖到界面上，然后双击它，进入“添加表单布局行”对话框中，添加标签“姓名（&N)"使用QLineEdit,如下图。同样的方法添加：性别（&S)使用QComoBox),年龄(&A)使用SpinBox,邮箱（&M)使用QLineEdit,

添加完后，运行效果如下

、

也可以在代码中使用addRow函数来完成表单。 

4、综合使用布局管理器

     项目中真正使用时一般是将几种布局管理器综合起来使用。 从部件栏中拖入一个Horizontal Layout,然后将fontComboBox和pushButton放进去，然后再从部件栏中拖入一个Vertical Spacer垂直分隔符，用来在部件间产生间隔，将它放在窗体布局管理器与垂直布局管理器之间。最后单击主界面并按下Ctrl+L快捷键，让整个界面处于一个垂直布局管理器中。运行程序效果如下。

 

如果要用代码实现，可以使用父布局管理器中的addLayout函数，将窗体布局管理器和水平布局管理器作为子布局添加到父布局管理器中。