QT编程系列4--布局管理器

布局管理器

    上篇我们实现了让一个按钮在我们创建的窗体的上显示的程序，本篇我们将完成在一个窗体上显示多个（如9个）按钮的程序。在窗体上安排9个按钮必然涉及到一个问题，我们这9个按钮怎么排放？这里我们假设把9个按钮排放成9宫格的顺序。

    在放9个按钮之前我们可以先考虑如何放2个、3个、4个按钮的问题。放2个，毫无疑问可以是横放或者竖放。3个也是一样，那么4个了？放成田字格样的形式，横两行，竖两列。我们可以在第一行上放两列，然后我们在第二行上放两列，这里的两个行上的两列都是水平的，用个专业的词汇叫做水平布局。如果我们把上下两行分别看成一个大“按钮”（或元素），这两个“按钮”处于垂直的方向上，我们把这样的布局叫做垂直布局。

    通过上面的讲述我们可以体会到两个概念，即所谓的水平布局和垂直布局。有了上面的概念，我们很容易可以依次类推9个按钮如何摆放了。

    写代码大体可以分为三步：第一个步骤为分析！分析程序要实现的功能，分析实现的方法并以文字或流程图的形式记录下来。第二个步骤为用具体的编程语言来实现第一个步骤画出的流程图。第三个步骤是程序的测试与调试，看似轻松的最后一步其实是整个写代码的流程中最为复杂的一步。

    言归正传，我们现在就要开始实现这样一个9宫格在窗体上显示的程序了。上篇实现了一个按钮的显示，这里变成了9个。因此如果我们要在上篇的程序的基础上修改的话，我们首先要写出3个按钮的水平布局管理器，然后将3个水平按钮布局管理器放在一个垂直布局管理器上，那么就大功告成了。代码是这样实现的：

mywindow.h

#ifndef MYWINDOW_H #define MYWINDOW_H #include <qwidget> #include <qpushbutton> #include <qhboxlayout> #include <qapplication> class mywindow:public QWidget { Q_OBJECT private: QPushButton *button_1; QPushButton *button_2; QPushButton *button_3; QPushButton *button_4; QPushButton *button_5; QPushButton *button_6; QPushButton *button_7; QPushButton *button_8; QPushButton *button_9; QHBoxLayout *hlayout_1; QHBoxLayout *hlayout_2; QHBoxLayout *hlayout_3; QVBoxLayout *vlayout; public: mywindow(); }; #endif </qapplication></qhboxlayout></qpushbutton></qwidget> 

mywindow.cpp

#include "mywindow.h" mywindow::mywindow() { //创建组件 button_1 = new QPushButton("1"); button_2 = new QPushButton("2"); button_3 = new QPushButton("3"); button_4 = new QPushButton("4"); button_5 = new QPushButton("5"); button_6 = new QPushButton("6"); button_7 = new QPushButton("7"); button_8 = new QPushButton("8"); button_9 = new QPushButton("9"); //创建布局管理器 hlayout_1 = new QHBoxLayout; hlayout_2 = new QHBoxLayout; hlayout_3 = new QHBoxLayout; vlayout = new QVBoxLayout; //布局，将组件加到布局管理器上 hlayout_1->addWidget(button_1); hlayout_1->addWidget(button_2); hlayout_1->addWidget(button_3); hlayout_2->addWidget(button_4); hlayout_2->addWidget(button_5); hlayout_2->addWidget(button_6); hlayout_3->addWidget(button_7); hlayout_3->addWidget(button_8); hlayout_3->addWidget(button_9); vlayout->addLayout(hlayout_1); vlayout->addLayout(hlayout_2); vlayout->addLayout(hlayout_3); //将布局加到窗体上 setLayout(vlayout); }  

    main.cpp不需要修改，对这三个文件构成的工程进行编译便可以得到我们期望的窗体界面。

By：霜月孤鸟

2014.8