閱讀(21.3k) 書簽贊(6) 我要糾錯(cuò)

Qt 組件布局

2018-10-04 10:05 更新

組件布局

同 Swing 類似，Qt 也提供了幾種組件定位的技術(shù)。其中就包括絕對(duì)定位和布局定位。

顧名思義，絕對(duì)定位就是使用最原始的定位方法，給出這個(gè)組件的坐標(biāo)和長(zhǎng)寬值。這樣，Qt 就知道該把組件放在哪里，以及怎么設(shè)置組件的大小了。但是這樣做的一個(gè)問(wèn)題是，如果用戶改變了窗口大小，比如點(diǎn)擊了最大化或者拖動(dòng)窗口邊緣，這時(shí)，你就要自己編寫相應(yīng)的函數(shù)來(lái)響應(yīng)這些變化，以避免那些組件還只是靜靜地呆在一個(gè)角落。或者，更簡(jiǎn)單的方法是直接禁止用戶改變大小。

不過(guò)，Qt 提供了另外的一種機(jī)制，就是布局，來(lái)解決這個(gè)問(wèn)題。你只要把組件放入某一種布局之中，當(dāng)需要調(diào)整大小或者位置的時(shí)候，Qt 就知道該怎樣進(jìn)行調(diào)整。這類似于 Swing 的布局管理器，不過(guò) Qt的布局沒(méi)有那么多，只有有限的幾個(gè)。

來(lái)看一下下面的例子：

#include <QtGui/QApplication> 
#include <QtGui/QWidget> 
#include <QtGui/QSpinBox> 
#include <QtGui/QSlider> 
#include <QtGui/QHBoxLayout> 

int main(int argc, char *argv[]) 
{ 
        QApplication app(argc, argv); 
        QWidget *window = new QWidget; 
        window->setWindowTitle("Enter your age"); 

        QSpinBox *spinBox = new QSpinBox; 
        QSlider *slider = new QSlider(Qt::Horizontal); 
        spinBox->setRange(0, 130); 
        slider->setRange(0, 130); 

        QObject::connect(slider, SIGNAL(valueChanged(int)), spinBox, SLOT(setValue(int))); 
        QObject::connect(spinBox, SIGNAL(valueChanged(int)), slider, SLOT(setValue(int))); 
        spinBox->setValue(35); 

        QHBoxLayout *layout = new QHBoxLayout; 
        layout->addWidget(spinBox); 
        layout->addWidget(slider); 
        window->setLayout(layout); 

        window->show(); 

        return app.exec(); 
}

這里使用了兩個(gè)新的組件：QSpinBox 和 QSlider，以及一個(gè)新的頂級(jí)窗口 QWidget。QSpinBox 是一個(gè)有上下箭頭的微調(diào)器，QSlider 是一個(gè)滑動(dòng)桿，只要運(yùn)行一下就會(huì)明白到底是什么東西了。

代碼并不是那么難懂，還是來(lái)簡(jiǎn)單的看一下。首先創(chuàng)建了一個(gè) QWidget 的實(shí)例，調(diào)用 setWindowTitle 函數(shù)來(lái)設(shè)置窗口標(biāo)題。然后創(chuàng)建了一個(gè) QSpinBox 和 QSlider，分別設(shè)置了它們值的范圍，使用的是 setRange 函數(shù)。然后進(jìn)行信號(hào)槽的鏈接。這點(diǎn)后面再詳細(xì)說(shuō)明。然后是一個(gè)QHBoxLayout，就是一個(gè)水平布局，按照從左到右的順序進(jìn)行添加，使用 addWidget 添加好組件后，調(diào)用 QWidget 的 setLayout 把 QWidget 的 layout 設(shè)置為我們定義的這個(gè) Layout，這樣，程序就完成了！

編譯運(yùn)行一下，可以看到效果：

如果最大化的話：

雖然我并沒(méi)有添加任何代碼，但是那個(gè) layout 就已經(jīng)明白該怎樣進(jìn)行布局。

或許你發(fā)現(xiàn)，那兩個(gè)信號(hào)槽的鏈接操作會(huì)不會(huì)產(chǎn)生無(wú)限遞歸？因?yàn)?steValue 就會(huì)引發(fā) valueChanged信號(hào)！答案是不會(huì)。這兩句語(yǔ)句實(shí)現(xiàn)了，當(dāng) spinBox 發(fā)出 valueChanged 信號(hào)的時(shí)候，會(huì)回調(diào)slider 的 setValue，以更新 slider 的值；而 slider 發(fā)出 valueChanged 信號(hào)的時(shí)候，又會(huì)回調(diào) slider 的 setValue。但是，如果新的 value 和舊的 value 是一樣的話，是不會(huì)發(fā)出這個(gè)信號(hào)的，因此避免了無(wú)限遞歸。

迷糊了吧？舉個(gè)例子看。比如下面的 spinBox->setValue(35)執(zhí)行的時(shí)候，首先，spinBox 會(huì)將自己的值設(shè)為35，這樣，它的值與原來(lái)的不一樣了(在沒(méi)有 setValue 之前的時(shí)候，默認(rèn)值是0)，于是它發(fā)出了 valueChanged 信號(hào)。slider 接收到這個(gè)信號(hào)，于是回調(diào)自己的 setValue 函數(shù)，將它的值也設(shè)置成35，它也發(fā)出了 valueChanged 信號(hào)。當(dāng)然，此時(shí) spinBox 又收到了，不過(guò)它發(fā)現(xiàn)，這個(gè)35和它本身的值是一樣的，于是它就不發(fā)出信號(hào)，所以信號(hào)傳遞就停止了。

那么，你會(huì)問(wèn)，它們是怎么知道值的呢？答案很簡(jiǎn)單，因?yàn)槟愕男盘?hào)和槽都接受了一個(gè)int參數(shù)！新的值就是通過(guò)這個(gè)進(jìn)行傳遞的。實(shí)際上，我們利用Qt的信號(hào)槽機(jī)制完成了一個(gè)數(shù)據(jù)綁定，使兩個(gè)組件或者更多組件的狀態(tài)能夠同步變化。

Qt 一共有三種主要的 layout，分別是：

QHBoxLayout- 按照水平方向從左到右布局；

QVBoxLayout- 按照豎直方向從上到下布局；

QGridLayout- 在一個(gè)網(wǎng)格中進(jìn)行布局，類似于 HTML 的 table。

layout 使用 addWidget 添加組件，使用 addLayout 可以添加子布局，因此，這就有了無(wú)窮無(wú)盡的組合方式。

我是在 Windows 上面進(jìn)行編譯的，如果你要是在其他平臺(tái)上面，應(yīng)用程序就會(huì)有不同的樣子：