qt-垂直布局初步

QWidget

在学习垂直布局之前，我们需要了解一个对象，就是QWidget。

它的功能就是创建一个窗口。

垂直布局，包括水平布局，都需要对窗口使用才能显示，我们不能直接将垂直布局显示出来。

垂直布局初步

接下来，我们依然是先贴代码，后作分析。

#include <QApplication>
#include <qwidget.h>
#include <qpushbutton.h>
#include <QVBoxLayout>
int main(int argc, char *argv[]){
    QApplication a(argc, argv);

    QWidget* mw=new QWidget();
    QVBoxLayout* box=new QVBoxLayout();
    mw->setLayout(box);

    QPushButton* b1=new QPushButton("one");
    QPushButton* b2=new QPushButton("two");
    QPushButton* b3=new QPushButton("three");
    QPushButton* b4=new QPushButton("four");

    box->addWidget(b1);
    box->addWidget(b2);
    box->addWidget(b3);
    box->addWidget(b4);

    mw->show();

    return a.exec();
}

    QWidget* mw=new QWidget();
    QVBoxLayout* box=new QVBoxLayout();
    mw->setLayout(box);

在这个部分，我们创建了一个窗口和一个垂直布局。并将窗口与垂直布局关联起来。

    QPushButton* b1=new QPushButton("one");

接下来，我们连续创建了四个按钮。

    box->addWidget(b1);
    box->addWidget(b2);
    box->addWidget(b3);
    box->addWidget(b4);

这一步是垂直布局的关键一步。因为添加的顺序将直接影响到哪个按钮在上，哪个按钮在下。我们可以将垂直布局看作一个数组，谁先被加进去，谁就在前面。目前这个垂直布局数组里面放着【b1,b2,b3,b4】。垂直布局默认从头到尾显示该数组内的控件。

    mw->show();

注意，这里不需要一个一个显示按钮了，因为按钮已经被添加到垂直布局中，而垂直布局又和窗口绑定起来了。所以显示窗口会连带着显示按钮。我们可以将窗口看作垂直布局的父亲，垂直布局是按钮的父亲。qt中，只要显示辈份最大的控件，他的所有后代都会被显示。

添加弹簧(其实我并不知道这个叫什么)

弹簧是垂直布局中的一个占位的东西，但是在添加弹簧前，我们需要将窗口变高，不然可能无法看到弹簧的效果。

    mw->resize(114,514);

请将该代码添加进去，就可以将mw窗口的宽设置为114，高设置为514。

接下来，我们将会把弹簧添加到垂直布局中。注意，弹簧是垂直布局中的内容，不是窗口，窗口仅仅是我们用来显示垂直布局的东西，该文的内容学习的是垂直布局中的东西。

    box->addStretch();

这个函数就是用来添加弹簧的。你可以试一试将该代码添加到不同位置，看看有什么效果。比如：

    box->addStretch();
    box->addWidget(b1);
    box->addWidget(b2);
    box->addWidget(b3);
    box->addWidget(b4);

或

    box->addWidget(b1);
    box->addWidget(b2);
    box->addWidget(b3);
    box->addWidget(b4);
    box->addStretch();

我们可以看到按钮分别被顶到了窗口的上面和下面。我们也可以通过弹簧这个东西来做到将按钮紧密排列在中间。注意，如果不通过这个方法，那么按钮之间的间距是比较大的。不过我们有其他更多的方法来实现这一效果，请不要依赖这种方法，否则无法精确控制比例。

比如：

    box->addStretch();
    box->addWidget(b1);
    box->addWidget(b2);
    box->addWidget(b3);
    box->addWidget(b4);
    box->addStretch();

固定间距

我们有时候需要设定垂直布局中不同控件之间的间距。这就是垂直布局的固定间距。代码如下：

    box->setSpacing(100);

这样，不同控件之间的间隔就被设置为100像素。但是注意，控件的最上面和最下面是不算控件之间的间隔的。

增加间距

我们可以人为的在两个控件之间增加一个间距而不应用到所有控件之间。代码如下：

    box->addWidget(b1);
    box->addSpacing(200);
    box->addWidget(b2);

我们人为的在b1和b2间添加了一个200像素大小的间距，但是它不会被应用到所有按钮之间。

‍