QT 布局（转）

狭义的说，QT的布局管理框架指的是以QLayoutItem/QLayout为基类的布局管理体系（应该说，对于QGraphicsSystem， 还有以QGraphicsLayoutItem/QGraphicsLayout为基类的一系列相关子类）

但是如果广义的说，布局就是管理控件的位置和尺寸的话，在QT中一共有三种方式

绝对定位：在代码中调用QWidget::setGeometry()函数，对控件进行绝对定位手工定位：在resizeEvent等函数中，根据参数变化，撰写代码对控件进行定位

使用布局管理器定位：使用QLayout类管理控件

布局 VS 控件

在GTK中，Layout和Widget并没有截然分开，不存在单独的Layout类，每个控件都要自己负责管理自己的子控件的布局，只不过有些控件管理的多些，或者基本上专门用来管理布局，而有些则管理的少一些。

而在QT中，Layout和Widget是相对独立的类，但是Layout本身单独存在并没有意义，需要和Widget配合使用。而Widget本身不负责子控件的布局管理。你可以认为，Layout类其实只是一组预先撰写好的代码，在父控件尺寸变化时，根据预设参数和子控件的各种Geometry hint，管理控件的位置和尺寸。

不过，也有一些例外，比如QMainWindow类，就自己管理预设的子控件的布局。

一点内部逻辑

**Layout如何管理Widget,层次关系**

首先是要通过QWidget::setLayout函数，将一个QLayout类设置为控件的布局管理器。这一步实际也将这个控件设置为QLayout类的父控件。而后，通常通过QLayout::addWidget()等函数，将widget添加到Layout类的布局管理体系中

但是，Layout本身并不是Widget的父控件，因为QWidget类的父控件只能是QWidget类，所以Layout将其管理的子控件的父控件重定向为自己的父控件。

另外，因为QWidget类本身并不是一个QLayoutItem，而Qlayout的管理又是以QLayoutItem为单位。所以，在addWidget的操作中，QLayout还会创建一个QLayoutItem的子类QWidgetItem类来对应的包装代理添加进来的子控件。QWidgetItem对象最终会将QLayout布局管理体系中的布局参数信息装换、设置到它所代理的QWidget对象上

分组式（堆栈式）布局

QStackedLayout个人觉得叫分组布局有些歧义，还是直译堆栈布局比较合适。这个Layout类管理子控件的方式和其它QBoxLayout，QGridLayout等不太一样，比较特殊。QStackedLayout不侧重于子控件的位置管理，它所管理的子控件是叠加在一起的，主要控制哪个子控件位于最上层

可以通过设置参数，决定只有当前顶层控件可见（默认行为），还是所有子控件都可见（这样可以实现一些比如叠加显示的效果，当然，要最上层的控件有透明的区域）。

另外，不管堆叠参数如何设置，QStackedLayout的父控件的内容都是可见的，只要当前显示的子控件有透明区域。

__________

 

先讲得是QVBoxLayout 和QHBoxLayout

 

今天来实现一个温度转换器的界面。如下图：

（嘿嘿，这个图就是用之前写的那个linux下利用fb截图的程序截的，嘻嘻<自恋的窃笑中。。。>）

在QT下进行界面设计，可以使用水平、垂直和Grid布局管理器来进行。

水平布局管理器可以把它所管理的部件以水平的顺序依次排开，例如上图中中间的“Centigrade”和“Fahrenheit”两段文字，就是水平排列的，这个时候就可以用水平布局管理器来实现。

垂直管理器类似，它可以把它所管理的部件以垂直的顺序依次排开，例如上图中右侧的液晶数字和地下的表盘，就形成了垂直排列，这个时候就可以用垂直管理器来实现。

Grid布局管理器可以以网格的形式，将它所管理的部件以一定的矩阵形式排列。比如上图中，所有的部件一起看，其实就是一种矩阵的形式来排列的。

 

在QT下做界面设计的时候，其实无非就是利用上面三种布局管理器来将部件进行分类和排列。

就拿上图为例，总计有7个部件（一个PushButton，三个Label，一个Slider，一个LCDNumber和一个Dial），首先需要确定七个部件在对话框上的排布（上图就是我希望的排布方式）。然后，有两种方法用程序来实现我们期望的这种排布效果：

第一种，充分利用水平、垂直布局管理器：

可以将最终布局拆分成以下四部分：

第一部分只有一个PushButton，先不管它。

第二部分是两个水平排列的Label，可以使用水平布局管理器将其放到一起；

第三部分是水平排列的Label和Sider，也可以用水平布局管理器将其放到一起；

第四部分是垂直排列的LCDNumber和Dial，可以使用垂直布局管理器将其放到一起；

OK，了解了以上几点，就可以采取这种操作：

先将第三部分和第四部分分别使用布局管理器组合起来，这个时候，我们可以将第三部分看做一个部件，将第四部分也看做一个“部件”；

将第二部分使用水平布局管理器组合起来，这个时候，第二部分也可以看做一个“部件”；

然后，第三部分和第四部分这两个大的“部件”也可以使用水平管理器组合起来，我们暂时称之为次三部分，呵呵。此时，整个窗体的布局变成下面的形式：

此时，整个布局变成了由第一部分、第二部分和第三部分构成的三个大的“部件”，而且，现在这三个部件恰好是“垂直排列”的，所以，我们可以用垂直布局管理器将三个大“部件”再次组合~~

OK，利用水平和布局管理器不断组合的方法，即可顺利完成整个应用程序界面的管理。

在这种方法中，我们使用到了3个水平布局管理器，2个垂直布局管理器。

这种方法比较直观，类似于函数的递归调用，呵呵~将小的部件不断组合组合在组合~~ 缺点是利用了比较多的布局管理器才达到最终的效果~~

所以，我们还有另外一种实现这种应用程序布局的方法：利用Grid布局管理器~~这里就不再介绍，下一篇再续 :-)

下面是Grid布局管理器

 

接着上次的，还是要实现这个温度转换器的界面。如下图：

上次使用水平布局管理器和垂直布局管理器联合实现了这个界面，今天就用栅格布局管理器来实现。

栅格布局管理器可以以网格的形式，将它所管理的部件以一定的矩阵形式排列。比如上图中，所有的部件一起看，其实就是一种矩阵的形式来排列的。

栅格布局管理器最典型的用法是将部件规规矩矩的排列好，每个栅格的单元格里放一个部件，如下图的示例：

类似上图这种布局比较容易实现，只需要把各个部件填入到指定的单元格里即可，示例代码如下：

m_Layout->addWidget(Label1, 0, 0); // 将Label1填到（0，0）单元格

m_Layout->addWidget(Label2, 0, 2); // 将Label2填到（0，2）单元格

……

而我们要实现的这个温度转换器的界面，并不是一个规则的栅格结构。而是如下这种结构：

上图中的这6部分，并不是规规矩矩的栅格形式。那怎么办呢？没关系，栅格布局管理器提供了很大的灵活性。具体表现在，可以设定某个部件是否需要横跨n个列，或者是否需要纵越m个行~~。什么意思呢？先来看一个简单的例子：

以上面这种布局来说，三个部件其中有两个部件是比较规矩的处于两个单元格内，但是第三个部件就横跨了两列，实际上，我们可以这样来看这张布局图：

这样就一目了然了。第三个部件的确是横跨了两列（在水平方向上占用了两个单元格）。

在使用栅格布局管理器对三个部件进行管理时，就可以这样：

m_Layout->addWidget(m_Widget1, 0, 0); // 第一个部件在（0，0）

m_Layout->addWidget(m_Widget2, 0, 1); // 第二个部件在（0，1）

m_Layout->addWIdget(m_Widget3, 1, 0, 1,2); // 第三个部件起始于（1，0），并纵越1行，横跨2列

同样的，再看下图：

我们可以认为右侧的部件纵越了两行（在垂直方向上占用了两个单元格），对应的示例代码：

m_Layout->addWidget(m_Widget1, 0, 0); // 第一个部件在（0，0）

m_Layout->addWidget(m_Widget2, 1, 0); // 第二个部件在（1，0）

m_Layout->addWIdget(m_Widget3, 0, 1, 2, 1); // 第三个部件起始于（0，1），并纵越2行，横跨1列

这 其实很类似于HTML里利用Table做网页布局时使用的手段。稍微了解一些HTML的人都会知道，在Table布局时，单元格会有rowSpan和 colSpan的参数，这两个参数的意义其实就是所谓的“纵越n个行”和“横跨m个列”。这里，栅格布局管理器的布局方式，跟它完全一致。

OK，回头再看看我们需要实现的界面。我们现在有了rowSpan和colSpan的概念，那么，我们可以把那张界面布局图变换一下：

我们把交叉的这些线全部延伸开，可以看到，整个界面被拆分成了3×4个单元格，此时，我们就会惊呼，哈哈，这不就是规规矩矩的栅格了吗（虽然它的每个单元格不是一样大，但是没关系，至少行和列都是规矩的了）。

OK，那就开始我们的界面布局吧。为了方便观察，我在每个单元格里标注上他们的编号：

首先看Quit按钮，它起始于（0，0），横跨3个单元格，也就是colSpan=3，所以：

m_Layout->addWidget(m_QuitButton, 0, 0, 1, 3);

然后是“Centigrade”，这个Label起始于（1，0），横跨2个单元格，也就是colSpan=2，所以：

m_Layout->addWidget(m_CenLabel, 1, 0, 1, 2);

然后是“Fahrenheit”，这个Label起始于（1，2），它刚好占用1个单元格，所以没有rowSpan和colSpan（或者说rowSpan和colSpan都是1），所以：

m_Layout->addWidget(m_FahLabel, 1, 2);

再然后是“0”这个Label，它起始于（2，0），纵越2个单元格，rowSpan=2，所以：

m_Layout->addWidget(m_Label, 2, 0, 2, 1);

再然后是Slider，它起始于（2，1），纵越2个单元格，rowSpan=2，所以：

m_Layout->addWidget(m_Slider, 2, 1, 2, 1);

再然后是LCDNumber，它起始于（2，2），占用一个单元格，所以：

m_Layout->addWidget(m_LCDNumber, 2, 2);

最后是Dial表盘，它起始于（3，2）占用一个单元格，所以：

m_Layout->addWidget(m_LCDNumber, 3, 2);

OK，至此，我们的整个界面布局就完成了，鼓掌 :-)

跟 使用水平布局管理器和垂直布局管理器的组合方式相比，使用栅格布局管理器只需要消耗一个布局管理器即可完成整个界面的布局。但是这种方式的一个最大的缺点 是，需要事先精确设计好每个部件的位置和占用尺寸，在部件数量比较大的情况下，仅仅使用栅格布局管理器就显得力不从心了。

所以，在做界面布局的时候，可以使用栅格布局管理器做整体框架设计，然后在其中填充一些水平或垂直布局管理器，或者他们的组合，以便来达到更好的效果。这就好像，在做网页的时候，可以利用Table里套用Table的方法，来实现一些比较复杂的网页布局控制 :-)

原文地址：http://www.mculee.cn/post/15.html

 

另外还搜到一段代码，特出来参考：

QGrid 版面配置的配置方式是比較簡單的，Widget的加入順序是由左而右、由上而下，然而有時候我們希望可以自行指定配置的位置，這時我們可以使用 QGridLayout來進行版面配置，它除了可以像QGrid的格子狀配置方式之外，還比QGrid多了額外的許多功能。 

我們直接使用一個例子來作示範，QGridLayout是繼承自QLayout類別，所以我們必須先include進qlayout.h這個標頭檔，程式如下所示：#include <qapplication.h>
#include <qlayout.h>
#include <qlabel.h>

int main(int argc, char **argv) {
QApplication app(argc, argv);

QWidget *wm = new QWidget;
QLabel *label;
QGridLayout *grid = new QGridLayout(wm, 3, 3);

grid->addColSpacing(0, 200);
grid->addColSpacing(1, 100);

label = new QLabel("one", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 0, 0);

grid->addWidget(new QLabel("two", wm), 1, 0);

label = new QLabel("three", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 2, 0);

grid->addWidget(new QLabel("four", wm), 1, 1);

label = new QLabel("five", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 2, 2);

app.setMainWidget(wm);
wm->show();

return app.exec();
}
我們所使用的QGridLayout共有3 * 3 = 9個格子，以下我們說明其中的幾個使用到的方法。首先設定指定行的寬度，行列的索引都是由0開始，與二維陣列的指定方式相同，所以這兩行指定第0行與第1行的格子寬度：

grid->addColSpacing(0, 200); 
grid->addColSpacing(1, 100);

接下來將QLabel物件加入指定的位置，在這邊是第0行第0列的格子：

grid->addWidget(label, 0, 0);

程式的執行結果如下所示： 


QGridLayout除了可以用於加入Widget之外，還可以使用addLayout()方法加入其它的版面配置元件，下面這個程式是再加入一個QGridLayout的範例： 
#include <qapplication.h>
#include <qlayout.h>
#include <qlabel.h>
#include <qvbox.h>
#include <qpushbutton.h>
#include <qlcdnumber.h>
#include <qslider.h>

int main(int argc, char **argv) {
QApplication app(argc, argv);

QWidget *wm = new QWidget;
QLabel *label;
QGridLayout *grid = new QGridLayout(wm, 3, 3);
QGridLayout *grid2 = new QGridLayout(wm, 2, 0);

// grid here
grid->addColSpacing(0, 200);
grid->addColSpacing(1, 100);

label = new QLabel("one", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 0, 0);

grid->addWidget(new QLabel("two", wm), 1, 0);

label = new QLabel("three", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 2, 0);

grid->addWidget(new QLabel("four", wm), 1, 1);

label = new QLabel("five", wm);
label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
grid->addWidget(label, 2, 2);

// grid2 here
QPushButton quit("Quit", wm);
QLCDNumber lcd(2, wm);
QSlider slider(Qt::Horizontal, wm);
slider.setRange(0, 99);
slider.setValue(0);
grid2->addWidget(&quit, 0, 0);
grid2->addWidget(&lcd, 0, 1);
grid2->addWidget(&slider, 0, 2);

grid->addLayout(grid2, 1, 2);

app.setMainWidget(wm);
wm->show();

return app.exec();
}