详解 QT 布局管理界面 图文并茂(1)
字号： T | T
本文介绍的是QT 布局管理界面 图文并茂，在QT下进行界面设计，可以使用水平、垂直和Grid布局管理器来进行。先来看内容。
AD：51CTO首届中国APP创新评选大赛正在招募>>
QT 布局管理界面 图文并茂是本文介绍的内容，先来看内容。今天来实现一个温度转换器的界面。如下图：
布局管理器可以把它所管理的部件以水平的顺序依次排开，例如上图中中间的“Centigrade”和“Fahrenheit”两段文字，就是水平排列的，这个时候就可以用水平布局管理器来实现。
垂直管理器类似，它可以把它所管理的部件以垂直的顺序依次排开，例如上图中右侧的液晶数字和地下的表盘，就形成了垂直排列，这个时候就可以用垂直管理器来实现。
布局管理器可以以网格的形式，将它所管理的部件以一定的矩阵形式排列。比如上图中，所有的部件一起看，其实就是一种矩阵的形式来排列的。
QT下做界面设计的时候，其实无非就是利用上面三种布局管理器来将部件进行分类和排列。
就拿上图为例，总计有7个部件（一个PushButton，三个Label，一个Slider，一个LCDNumber和一个Dial），首先需要确定七个部件在对话框上的排布（上图就是我希望的排布方式）。然后，有两种方法用程序来实现我们期望的这种排布效果：
第一种，充分利用水平、垂直布局管理器：可以将最终布局拆分成以下四部分：
第一部分只有一个PushButton，先不管它。
第二部分是两个水平排列的Label，可以使用水平布局管理器将其放到一起；
第三部分是水平排列的Label和Sider，也可以用水平布局管理器将其放到一起；
第四部分是垂直排列的LCDNumber和Dial，可以使用垂直布局管理器将其放到一起；
OK，了解了以上几点，就可以采取这种操作：
先将第三部分和第四部分分别使用布局管理器组合起来，这个时候，我们可以将第三部分看做一个部件，将第四部分也看做一个“部件”；
将第二部分使用水平布局管理器组合起来，这个时候，第二部分也可以看做一个“部件”；
然后，第三部分和第四部分这两个大的“部件”也可以使用水平管理器组合起来，我们暂时称之为次三部分，呵呵。此时，整个窗体的布局变成下面的形式：
此时，整个布局变成了由第一部分、第二部分和第三部分构成的三个大的“部件”，而且，现在这三个部件恰好是“垂直排列”的，所以，我们可以用垂直布局管理器将三个大“部件”再次组合~~
OK，利用水平和布局管理器不断组合的方法，即可顺利完成整个应用程序界面的管理。
在这种方法中，我们使用到了3个水平布局管理器，2个垂直布局管理器。
这种方法比较直观，类似于函数的递归调用，呵呵~将小的部件不断组合组合在组合~~ 缺点是利用了比较多的布局管理器才达到最终的效果~所以，我们还有另外一种实现这种应用程序布局的方法：利用Grid布局管理器~~这里就不再介绍，下一篇再续 :-)
接着上次的，还是要实现这个温度转换器的界面。如下图：
上次使用水平布局管理器和垂直布局管理器联合实现了这个界面，今天就用栅格布局管理器来实现。
详解 QT 布局管理界面 图文并茂(2)
字号： T | T
本文介绍的是QT 布局管理界面 图文并茂，在QT下进行界面设计，可以使用水平、垂直和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的方法，来实现一些比较复杂的网页布局控制。
QT 布局管理界面
【编辑推荐】
- Qt实现启动界面实例
- 深度解析 QT 介绍 跨平台界面库
- 浅谈 QT 显示 UI设计界面
- Qt Designer 布局 （1） PyQt学习基础
- 浅谈 Qt 布局那些事
- 浅谈 Qt 布局管理器 基础学习
