聲明：轉載自http://mobile.51cto.com/symbian-273182_all.htm
------------------------------------------------------------------------------------------------------
本文介紹的是QT 佈局管理界面 圖文並茂，在QT下進行界面設計，可以使用水平、垂直和Grid佈局管理器來進行。
QT 佈局管理界面 圖文並茂是本文介紹的內容，先來看內容。今天來實現一個溫度轉換器的界面。如下圖：
水平佈局管理器可以把它所管理的部件以水平的順序依次排開，例如上圖中中間的“Centigrade”和“Fahrenheit”兩段文字，就是水平排列的，這個時候就可以用水平佈局管理器來實現。
垂直管理器類似，它可以把它所管理的部件以垂直的順序依次排開，例如上圖中右側的液晶數字和地下的錶盤，就形成了垂直排列，這個時候就可以用垂直管理器來實現。
Grid佈局管理器可以以網格的形式，將它所管理的部件以一定的矩陣形式排列。比如上圖中，所有的部件一起看，其實就是一種矩陣的形式來排列的。
在QT下做界面設計的時候，其實無非就是利用上面三種佈局管理器來將部件進行分類和排列。
就拿上圖爲例，總計有7個部件（一個PushButton，三個Label，一個Slider，一個LCDNumber和一個Dial），首先需要確定七個部件在對話框上的排布（上圖就是我希望的排布方式）。然後，有兩種方法用程序來實現我們期望的這種排布效果：
第一種，充分利用水平、垂直佈局管理器：可以將最終佈局拆分成以下四部分：
第一部分只有一個PushButton，先不管它。
第二部分是兩個水平排列的Label，可以使用水平佈局管理器將其放到一起；
第三部分是水平排列的Label和Sider，也可以用水平佈局管理器將其放到一起；
第四部分是垂直排列的LCDNumber和Dial，可以使用垂直佈局管理器將其放到一起；
OK，瞭解了以上幾點，就可以採取這種操作：
先將第三部分和第四部分分別使用佈局管理器組合起來，這個時候，我們可以將第三部分看做一個部件，將第四部分也看做一個“部件”；
將第二部分使用水平佈局管理器組合起來，這個時候，第二部分也可以看做一個“部件”；
然後，第三部分和第四部分這兩個大的“部件”也可以使用水平管理器組合起來，我們暫時稱之爲次三部分，呵呵。此時，整個窗體的佈局變成下面的形式：
此時，整個佈局變成了由第一部分、第二部分和第三部分構成的三個大的“部件”，而且，現在這三個部件恰好是“垂直排列”的，所以，我們可以用垂直佈局管理器將三個大“部件”再次組合~~
OK，利用水平和佈局管理器不斷組合的方法，即可順利完成整個應用程序界面的管理。
在這種方法中，我們使用到了3個水平佈局管理器，2個垂直佈局管理器。
這種方法比較直觀，類似於函數的遞歸調用，呵呵~將小的部件不斷組合組合在組合~~ 缺點是利用了比較多的佈局管理器才達到最終的效果~所以，我們還有另外一種實現這種應用程序佈局的方法：利用Grid佈局管理器~~這裏就不再介紹，下一篇再續 :-)
總結：線性佈局關鍵兩點：（1）從裏到外 （2）逐層嵌套
------------------------------------------------------------------------------------------
接着上次的，還是要實現這個溫度轉換器的界面。如下圖：
上次使用水平佈局管理器和垂直佈局管理器聯合實現了這個界面，今天就用柵格佈局管理器來實現。
柵格佈局管理器可以以網格的形式，將它所管理的部件以一定的矩陣形式排列。比如上圖中，所有的部件一起看，其實就是一種矩陣的形式來排列的。
柵格佈局管理器最典型的用法是將部件規規矩矩的排列好，每個柵格的單元格里放一個部件，如下圖的示例：
類似上圖這種佈局比較容易實現，只需要把各個部件填入到指定的單元格里即可，示例代碼如下：
- 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的方法，來實現一些比較複雜的網頁佈局控制。