QT 布局管理界面 圖文并茂是本文介紹的內(nèi)容，先來看內(nèi)容。今天來實(shí)現(xiàn)一個(gè)溫度轉(zhuǎn)換器的界面。如下圖：

水平布局管理器可以把它所管理的部件以水平的順序依次排開，例如上圖中中間的“Centigrade”和“Fahrenheit”兩段文字，就是水平排列的，這個(gè)時(shí)候就可以用水平布局管理器來實(shí)現(xiàn)。

垂直管理器類似，它可以把它所管理的部件以垂直的順序依次排開，例如上圖中右側(cè)的液晶數(shù)字和地下的表盤，就形成了垂直排列，這個(gè)時(shí)候就可以用垂直管理器來實(shí)現(xiàn)。

Grid布局管理器可以以網(wǎng)格的形式，將它所管理的部件以一定的矩陣形式排列。比如上圖中，所有的部件一起看，其實(shí)就是一種矩陣的形式來排列的。

在QT下做界面設(shè)計(jì)的時(shí)候，其實(shí)無非就是利用上面三種布局管理器來將部件進(jìn)行分類和排列。

就拿上圖為例，總計(jì)有7個(gè)部件（一個(gè)PushButton，三個(gè)Label，一個(gè)Slider，一個(gè)LCDNumber和一個(gè)Dial），首先需要確定七個(gè)部件在對(duì)話框上的排布（上圖就是我希望的排布方式）。然后，有兩種方法用程序來實(shí)現(xiàn)我們期望的這種排布效果：

第一種，充分利用水平、垂直布局管理器：可以將最終布局拆分成以下四部分：

第一部分只有一個(gè)PushButton，先不管它。

第二部分是兩個(gè)水平排列的Label，可以使用水平布局管理器將其放到一起；

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

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

OK，了解了以上幾點(diǎn)，就可以采取這種操作：

先將第三部分和第四部分分別使用布局管理器組合起來，這個(gè)時(shí)候，我們可以將第三部分看做一個(gè)部件，將第四部分也看做一個(gè)“部件”；

將第二部分使用水平布局管理器組合起來，這個(gè)時(shí)候，第二部分也可以看做一個(gè)“部件”；

然后，第三部分和第四部分這兩個(gè)大的“部件”也可以使用水平管理器組合起來，我們暫時(shí)稱之為次三部分，呵呵。此時(shí)，整個(gè)窗體的布局變成下面的形式：

此時(shí)，整個(gè)布局變成了由第一部分、第二部分和第三部分構(gòu)成的三個(gè)大的“部件”，而且，現(xiàn)在這三個(gè)部件恰好是“垂直排列”的，所以，我們可以用垂直布局管理器將三個(gè)大“部件”再次組合~~

OK，利用水平和布局管理器不斷組合的方法，即可順利完成整個(gè)應(yīng)用程序界面的管理。

在這種方法中，我們使用到了3個(gè)水平布局管理器，2個(gè)垂直布局管理器。

這種方法比較直觀，類似于函數(shù)的遞歸調(diào)用，呵呵~將小的部件不斷組合組合在組合~~ 缺點(diǎn)是利用了比較多的布局管理器才達(dá)到最終的效果~所以，我們還有另外一種實(shí)現(xiàn)這種應(yīng)用程序布局的方法：利用Grid布局管理器~~這里就不再介紹，下一篇再續(xù) :-)

接著上次的，還是要實(shí)現(xiàn)這個(gè)溫度轉(zhuǎn)換器的界面。如下圖：

上次使用水平布局管理器和垂直布局管理器聯(lián)合實(shí)現(xiàn)了這個(gè)界面，今天就用柵格布局管理器來實(shí)現(xiàn)。

#p#

柵格布局管理器可以以網(wǎng)格的形式，將它所管理的部件以一定的矩陣形式排列。比如上圖中，所有的部件一起看，其實(shí)就是一種矩陣的形式來排列的。

柵格布局管理器最典型的用法是將部件規(guī)規(guī)矩矩的排列好，每個(gè)柵格的單元格里放一個(gè)部件，如下圖的示例：

類似上圖這種布局比較容易實(shí)現(xiàn)，只需要把各個(gè)部件填入到指定的單元格里即可，示例代碼如下：

m_Layout->addWidget(Label1, 0, 0); // 將Label1填到（0，0）單元格  
m_Layout->addWidget(Label2, 0, 2); // 將Label2填到（0，2）單元格  
…… 

而我們要實(shí)現(xiàn)的這個(gè)溫度轉(zhuǎn)換器的界面，并不是一個(gè)規(guī)則的柵格結(jié)構(gòu)。而是如下這種結(jié)構(gòu)：

上圖中的這6部分，并不是規(guī)規(guī)矩矩的柵格形式。那怎么辦呢？沒關(guān)系，柵格布局管理器提供了很大的靈活性。具體表現(xiàn)在，可以設(shè)定某個(gè)部件是否需要橫跨n個(gè)列，或者是否需要縱越m個(gè)行~~。什么意思呢？先來看一個(gè)簡(jiǎn)單的例子

以上面這種布局來說，三個(gè)部件其中有兩個(gè)部件是比較規(guī)矩的處于兩個(gè)單元格內(nèi)，但是第三個(gè)部件就橫跨了兩列，實(shí)際上，我們可以這樣來看這張布局圖：

這樣就一目了然了。第三個(gè)部件的確是橫跨了兩列（在水平方向上占用了兩個(gè)單元格）。

在使用柵格布局管理器對(duì)三個(gè)部件進(jìn)行管理時(shí)，就可以這樣：

m_Layout->addWidget(m_Widget1, 0, 0); // 第一個(gè)部件在（0，0）  
m_Layout->addWidget(m_Widget2, 0, 1); // 第二個(gè)部件在（0，1）  
m_Layout->addWIdget(m_Widget3, 1, 0, 1,2); // 第三個(gè)部件起始于（1，0），并縱越1行，橫跨2列 

同樣的，再看下圖：

我們可以認(rèn)為右側(cè)的部件縱越了兩行（在垂直方向上占用了兩個(gè)單元格），對(duì)應(yīng)的示例代碼：

m_Layout->addWidget(m_Widget1, 0, 0); // 第一個(gè)部件在（0，0）  
m_Layout->addWidget(m_Widget2, 1, 0); // 第二個(gè)部件在（1，0）  
m_Layout->addWIdget(m_Widget3, 0, 1, 2, 1); // 第三個(gè)部件起始于（0，1），并縱越2行，橫跨1列 

這其實(shí)很類似于HTML里利用Table做網(wǎng)頁(yè)布局時(shí)使用的手段。稍微了解一些HTML的人都會(huì)知道，在Table布局時(shí)，單元格會(huì)有rowSpan和colSpan的參數(shù)，這兩個(gè)參數(shù)的意義其實(shí)就是所謂的“縱越n個(gè)行”和“橫跨m個(gè)列”。這里，柵格布局管理器的布局方式，跟它完全一致。

OK，回頭再看看我們需要實(shí)現(xiàn)的界面。我們現(xiàn)在有了rowSpan和colSpan的概念，那么，我們可以把那張界面布局圖變換一下：

我們把交叉的這些線全部延伸開，可以看到，整個(gè)界面被拆分成了3×4個(gè)單元格，此時(shí)，我們就會(huì)驚呼，哈哈，這不就是規(guī)規(guī)矩矩的柵格了嗎（雖然它的每個(gè)單元格不是一樣大，但是沒關(guān)系，至少行和列都是規(guī)矩的了）。

OK，那就開始我們的界面布局吧。為了方便觀察，我在每個(gè)單元格里標(biāo)注上他們的編號(hào)：

首先看Quit按鈕，它起始于（0，0），橫跨3個(gè)單元格，也就是colSpan=3，所以：

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

然后是“Centigrade”，這個(gè)Label起始于（1，0），橫跨2個(gè)單元格，也就是colSpan=2，所以：

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

然后是“Fahrenheit”，這個(gè)Label起始于（1，2），它剛好占用1個(gè)單元格，所以沒有rowSpan和colSpan（或者說rowSpan和colSpan都是1），所以：

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

再然后是“0”這個(gè)Label，它起始于（2，0），縱越2個(gè)單元格，rowSpan=2，所以：

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

再然后是Slider，它起始于（2，1），縱越2個(gè)單元格，rowSpan=2，所以：

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

再然后是LCDNumber，它起始于（2，2），占用一個(gè)單元格，所以：

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

最后是Dial表盤，它起始于（3，2）占用一個(gè)單元格，所以：

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

OK，至此，我們的整個(gè)界面布局就完成了，鼓掌 :-)

跟使用水平布局管理器和垂直布局管理器的組合方式相比，使用柵格布局管理器只需要消耗一個(gè)布局管理器即可完成整個(gè)界面的布局。但是這種方式的一個(gè)最大的缺點(diǎn)是，需要事先精確設(shè)計(jì)好每個(gè)部件的位置和占用尺寸，在部件數(shù)量比較大的情況下，僅僅使用柵格布局管理器就顯得力不從心了。

所以，在做界面布局的時(shí)候，可以使用柵格布局管理器做整體框架設(shè)計(jì)，然后在其中填充一些水平或垂直布局管理器，或者他們的組合，以便來達(dá)到更好的效果。這就好像，在做網(wǎng)頁(yè)的時(shí)候，可以利用Table里套用Table的方法，來實(shí)現(xiàn)一些比較復(fù)雜的網(wǎng)頁(yè)布局控制。

小結(jié)：關(guān)于詳解 QT 布局管理界面 圖文并茂的內(nèi)容介紹完了，希望本文對(duì)你有所幫助！