Qt 布局

 前言

         布局是Qt UI设计的基础，布局的作用是让多个控件整齐、有规划地排列，能够更好的适应界面的缩放。优秀的布局一定要符合用户的视觉习惯，降低用户的学习成本。文本主要是介绍Qt常用的布局方式。

---

常用的布局类型

布局类型	简述
QHBoxLayout	用于构造水平框布局对象
QVBoxLayout	用于构造垂直框布局对象
QGridLayout	栅格布局，将布局划分为行和列，并将其管理的每个小部件放入正确的单元格中
QFormLayout	表单布局，基于QGridLayout实现的2列栅格布局

---

水平布局 - QHBoxLayout

        将控件水平排列，通常用于需要展示同级数据、同级操作的布局。以下是使用Qt UI设计师对4个按钮进行水平布局：

使用代码设置水平布局：

    QHBoxLayout *hlay = new QHBoxLayout;
    hlay->addWidget( new QPushButton("button 1", this));
    hlay->addWidget( new QPushButton("button 2", this));
    hlay->addWidget( new QPushButton("button 3", this));
    hlay->addWidget( new QPushButton("button 4", this));
    ui->centralwidget->setLayout(hlay);

 运行结果：

---

垂直布局 - QVBoxLayout 

         将控件垂直排列，通常用于需要体现出序列感的排列方式。以下是使用UI设计师对4个按钮进行垂直布局：

  使用代码设置垂直布局：

    QVBoxLayout *vlay = new QVBoxLayout;
    vlay->addWidget( new QPushButton("button 1", this));
    vlay->addWidget( new QPushButton("button 2", this));
    vlay->addWidget( new QPushButton("button 3", this));
    vlay->addWidget( new QPushButton("button 4", this));
    ui->centralwidget->setLayout(vlay);

运行结果：

---

栅格布局 - QGridLayout

         将控件按照N行N列的方式布局，通常用于既需要体现出序列感，又需要在每列中体现出同级信息的排列方式。以下是在UI设计师中使用栅格布局：

 使用代码设置栅格布局：

    QGridLayout *grid = new QGridLayout;

    //将4个按钮按照2行2列进行布局
    grid->addWidget( new QPushButton("button 1", this), 0, 0);
    grid->addWidget( new QPushButton("button 2", this), 0, 1);
    grid->addWidget( new QPushButton("button 3", this), 1, 0);
    grid->addWidget( new QPushButton("button 4", this), 1, 1);
    ui->centralwidget->setLayout(grid);

运行结果：

---

表单布局 - QFormLayout

         表单布局，主要是针对登录、提交数据等场景使用。实际上是基于栅格布局的演变：

常用的布局属性
              

布局属性	描述
layoutLeftMargin	设置左侧控件到布局左边框的距离
layoutTopMargin	设置顶部控件到布局上边框的距离
layoutRightMargin	设置右侧控件到布局右边框的距离
layoutBottomMargin	设置底部控件到布局下边框的距离
layoutSpacing	设置布局内控件之间的间距
layoutHorizontalSpacing	栅格布局属性，水平间距
layoutVerticalSpacing	栅格布局属性，垂直间距
layoutStretch	设置控件拉伸系数
layoutRowStretch	栅格布局属性，设置每行拉伸系数
layoutColumnStretch	栅格布局属性，设置每列拉伸系数

关于stretch属性

        设置QGridLayout每列的拉伸系数，如下代码所示：

    QGridLayout *grid = new QGridLayout;

    //将4个按钮按照2行2列进行布局
    grid->addWidget( new QPushButton("button 1", this), 0, 0);
    grid->addWidget( new QPushButton("button 2", this), 0, 1);
    grid->addWidget( new QPushButton("button 3", this), 1, 0);
    grid->addWidget( new QPushButton("button 4", this), 1, 1);

    //设置2列的拉伸系数
    grid->setColumnStretch(0, 1);
    grid->setColumnStretch(1, 2);
    ui->centralwidget->setLayout(grid);

        将第一列拉伸系数设置为1，第二列拉伸系数设置为2后，第二列控件是第一列的2倍，且保持该比例来填充当前栅格布局：

---

总结

        在Qt Creator的示例中搜索Basic Layouts Example，它会向你展示如何使用布局。要想设计出漂亮的UI，一方面需要掌握布局、样式表的用法；另一方面需要展现个人的审美能力。