目录

布局管理器

QVBoxLayout

QHBoxLayout

QGirdLayout

QFormLayout 

Spacer

---

布局管理器

在以往的界面操作上，都是程序员手动拖动控件来布局，这种方式有一些不足之处，比如不能很好的把握控件之间的距离，以及控件的大小，并且在最终的窗口中，改变窗口大小时，控件的大小不能很好的适应。

于是，引入布局管理器，它是一种控件，可以自动管理其他控件。

常见的布局管理器有垂直布局管理器、水平布局管理器、网格布局、表单布局。

QVBoxLayout

 

布局管理器只用于界面布局，不提供信号。

 

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");// 创建布局管理器, 并且把按钮添加进去// 如果创建的时候指定⽗元素为 this, 则后⾯不需要 setLayout ⽅法了.QVBoxLayout* layout = new QVBoxLayout();layout->addWidget(btn1);layout->addWidget(btn2);layout->addWidget(btn3);// 把布局管理器设置到 widget 中this->setLayout(layout);
}

 

每个Widget只能设置一个布局管理器。

使用Qt Design创建两个布局管理器

 

 

程序运行后，界面可以正常显示。但是，这两个布局管理器并不会适应窗口的大小变化，因为本质上这是两个Widget。

QHBoxLayout

垂直布局中可以嵌套一个水平布局，反过来也可以。

QGirdLayout

网格布局，可以实现M * N的效果。

 

 

 QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");QPushButton* btn4 = new QPushButton("按钮4");QGridLayout* layout = new QGridLayout();layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 1, 1);layout->addWidget(btn3, 2, 2);layout->addWidget(btn4, 3, 3);this->setLayout(layout);

 

 

•  设置水平方向的拉伸系数

 

// 创建 6 个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");QPushButton* btn4 = new QPushButton("按钮4");QPushButton* btn5 = new QPushButton("按钮5");QPushButton* btn6 = new QPushButton("按钮6");// 创建⽹格布局管理器, 并且添加元素QGridLayout* layout = new QGridLayout();layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 0, 2);layout->addWidget(btn4, 1, 0);layout->addWidget(btn5, 1, 1);layout->addWidget(btn6, 1, 2);// 设置拉伸⽐例// 第 0 列拉伸⽐例设为 1;layout->setColumnStretch(0, 1);// 第 1 列拉伸⽐例设为 0, 即为固定⼤⼩, 不参与拉伸layout->setColumnStretch(1, 0);// 第 2 列拉伸⽐例设为 3, 即为第 2 列的宽度是第 0 列的 3 倍layout->setColumnStretch(2, 3);// 设置 layout 到窗⼝中.this->setLayout(layout);

 

• 设置垂直方向的拉伸系数

 

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 6 个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");QPushButton* btn4 = new QPushButton("按钮4");QPushButton* btn5 = new QPushButton("按钮5");QPushButton* btn6 = new QPushButton("按钮6");// 设置按钮的 sizePolicy, 此时按钮的⽔平⽅向和垂直⽅向都会尽量舒展开btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 创建⽹格布局管理器, 并且添加元素QGridLayout* layout = new QGridLayout();layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 1, 0);layout->addWidget(btn4, 1, 1);layout->addWidget(btn5, 2, 0);layout->addWidget(btn6, 2, 1);// 设置拉伸⽐例// 第 0 ⾏拉伸⽐例设为 1;layout->setRowStretch(0, 1);// 第 1 ⾏拉伸⽐例设为 0, 即为固定⼤⼩, 不参与拉伸layout->setRowStretch(1, 0);// 第 2 ⾏拉伸⽐例设为 3, 即为第 2 ⾏的宽度是第 0 ⾏的 3 倍layout->setRowStretch(2, 3);
// 设置 layout 到窗⼝中.this->setLayout(layout);}

 

什么是SizePolicy

在界面中，每个按钮的高度是固定，即使布局管理器按照比例设置了拉伸系数，也是没有效果的，而想让设置生效，就要设置每个按钮的SizePolicy，按钮的尺寸策略有如下几种。

QFormLayout 

表单布局，N行2列，主要用于填表这样的场景。

 

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 layoutQFormLayout* layout = new QFormLayout();this->setLayout(layout);// 创建三个 labelQLabel* label1 = new QLabel("姓名");QLabel* label2 = new QLabel("年龄");QLabel* label3 = new QLabel("电话");// 创建三个 lineEditQLineEdit* lineEdit1 = new QLineEdit();QLineEdit* lineEdit2 = new QLineEdit();QLineEdit* lineEdit3 = new QLineEdit();// 创建⼀个提交按钮QPushButton* btn = new QPushButton("提交");// 把上述元素添加到 layout 中layout->addRow(label1, lineEdit1);layout->addRow(label2, lineEdit2);layout->addRow(label3, lineEdit3);layout->addRow(NULL, btn);
}

 

Spacer

Spacer不属于布局管理器，往往搭配在布局管理器中使用，表示一个空白块，可以用来让两个控件之间的距离变大。

• 属性

 

 

Widget::Widget(QWidget *parent): QWidget(parent)
, ui(new Ui::Widget){ui->setupUi(this);QHBoxLayout* layout = new QHBoxLayout();this->setLayout(layout);QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");// 创建 SpacerQSpacerItem* spacer = new QSpacerItem(200, 20);layout->addWidget(btn1);// 在两个 widget 中间添加空⽩layout->addSpacerItem(spacer);layout->addWidget(btn2);}