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