詳解QT布局管理界面

1、 詳解 QT 布局管理界面柵格布局管理器可以以網(wǎng)格的形式，將它所管理的部件以一定的矩陣形式排列。比如上圖中，所有的部件一起看，其實就是一種矩陣的形式來排列的。柵格布局管理器最典型的用法是將部件規(guī)規(guī)矩矩的排列好，每個柵格的單元格里放一個部件，如下圖的示例：類似上圖這種布局比較容易實現(xiàn)，只需要把各個部件填入到指定的單元格里即可，示例代碼如下：1 m_Layout->addWidget(Label1, 0, 0); / 將Label1填到（0，0）單元格 2 m_Layout->addWidget(Label2, 0, 2); / 將Label2填到（0，2）單元格 3 而我們要實現(xiàn)的這

2、個溫度轉(zhuǎn)換器的界面，并不是一個規(guī)則的柵格結(jié)構(gòu)。而是如下這種結(jié)構(gòu)：上圖中的這6部分，并不是規(guī)規(guī)矩矩的柵格形式。那怎么辦呢？沒關(guān)系，柵格布局管理器提供了很大的靈活性。具體表現(xiàn)在，可以設(shè)定某個部件是否需要橫跨n個列，或者是否需要縱越m個行。什么意思呢？先來看一個簡單的例子以上面這種布局來說，三個部件其中有兩個部件是比較規(guī)矩的處于兩個單元格內(nèi)，但是第三個部件就橫跨了兩列，實際上，我們可以這樣來看這張布局圖：這樣就一目了然了。第三個部件的確是橫跨了兩列（在水平方向上占用了兩個單元格）。在使用柵格布局管理器對三個部件進(jìn)行管理時，就可以這樣：4 m_Layout->addWidget(m_Widget

3、1, 0, 0); / 第一個部件在（0，0） 5 m_Layout->addWidget(m_Widget2, 0, 1); / 第二個部件在（0，1） 6 m_Layout->addWIdget(m_Widget3, 1, 0, 1,2); / 第三個部件起始于（1，0），并縱越1行，橫跨2列 同樣的，再看下圖：我們可以認(rèn)為右側(cè)的部件縱越了兩行（在垂直方向上占用了兩個單元格），對應(yīng)的示例代碼：7 m_Layout->addWidget(m_Widget1, 0, 0); / 第一個部件在（0，0） 8 m_Layout->addWidget(m_Widget2, 1

4、, 0); / 第二個部件在（1，0） 9 m_Layout->addWIdget(m_Widget3, 0, 1, 2, 1); / 第三個部件起始于（0，1），并縱越2行，橫跨1列 這其實很類似于HTML里利用Table做網(wǎng)頁布局時使用的手段。稍微了解一些HTML的人都會知道，在Table布局時，單元格會有rowSpan和colSpan的參數(shù)，這兩個參數(shù)的意義其實就是所謂的“縱越n個行”和“橫跨m個列”。這里，柵格布局管理器的布局方式，跟它完全一致。OK，回頭再看看我們需要實現(xiàn)的界面。我們現(xiàn)在有了rowSpan和colSpan的概念，那么，我們可以把那張界面布局圖變換一下：我們把交叉

5、的這些線全部延伸開，可以看到，整個界面被拆分成了3×4個單元格，此時，我們就會驚呼，哈哈，這不就是規(guī)規(guī)矩矩的柵格了嗎（雖然它的每個單元格不是一樣大，但是沒關(guān)系，至少行和列都是規(guī)矩的了）。OK，那就開始我們的界面布局吧。為了方便觀察，我在每個單元格里標(biāo)注上他們的編號：首先看Quit按鈕，它起始于（0，0），橫跨3個單元格，也就是colSpan=3，所以：10 m_Layout->addWidget(m_QuitButton, 0, 0, 1, 3); 然后是“Centigrade”，這個Label起始于（1，0），橫跨2個單元格，也就是colSpan=2，所以：11 m_Layo

6、ut->addWidget(m_CenLabel, 1, 0, 1, 2); 然后是“Fahrenheit”，這個Label起始于（1，2），它剛好占用1個單元格，所以沒有rowSpan和colSpan（或者說rowSpan和colSpan都是1），所以：12 m_Layout->addWidget(m_FahLabel, 1, 2); 再然后是“0”這個Label，它起始于（2，0），縱越2個單元格，rowSpan=2，所以：13 m_Layout->addWidget(m_Label, 2, 0, 2, 1); 再然后是Slider，它起始于（2，1），縱越2個單元格，r

7、owSpan=2，所以：14 m_Layout->addWidget(m_Slider, 2, 1, 2, 1); 再然后是LCDNumber，它起始于（2，2），占用一個單元格，所以：15 m_Layout->addWidget(m_LCDNumber, 2, 2); 最后是Dial表盤，它起始于（3，2）占用一個單元格，所以：16 m_Layout->addWidget(m_LCDNumber, 3, 2); OK，至此，我們的整個界面布局就完成了，鼓掌 :-)跟使用水平布局管理器和垂直布局管理器的組合方式相比，使用柵格布局管理器只需要消耗一個布局管理器即可完成整個界面的布局。但是這種方式的一個最大的缺點是，需要事先精確設(shè)計好每個部件的位置和占用尺寸，在部件數(shù)量比較大的情況下，僅僅使用柵格布局管理器就顯得力不從心了。所以，在做界面布