第6講 Qt布局管理

《QtCreator快速入門(mén)》第2版第4章布局管理1對(duì)于一個(gè)完善的軟件，布局管理卻是必不可少的。無(wú)論是想要界面中部件有一個(gè)很整齊的排列，還是想要界面能適應(yīng)窗口的大小變化，都要進(jìn)行布局管理。Qt中主要提供了QLayout類(lèi)及其子類(lèi)來(lái)作為布局管理器，它們可以實(shí)現(xiàn)常用的布局管理功能2主要內(nèi)容4.1布局管理系統(tǒng)4.2設(shè)置伙伴4.3設(shè)置Tab鍵順序4.4小結(jié)34.1布局管理系統(tǒng)

Qt的布局管理系統(tǒng)提供了簡(jiǎn)單而強(qiáng)大的機(jī)制來(lái)自動(dòng)排列一個(gè)窗口中的部件，確保它們有效的使用空間。Qt包含了一組布局管理類(lèi)來(lái)描述怎樣在應(yīng)用程序的用戶(hù)界面中對(duì)部件進(jìn)行布局，比如QLayout的幾個(gè)子類(lèi)，我們這里將它們稱(chēng)作布局管理器。QWidget::setLayout()函數(shù)可以在一個(gè)部件上應(yīng)用布局管理器。布局管理器會(huì)完成以下幾種任務(wù)：定位子部件；感知窗口默認(rèn)大??；感知窗口最小大?。桓淖兇笮√幚?；當(dāng)內(nèi)容改變時(shí)自動(dòng)更新：字體大小，文本或子部件的其他內(nèi)容隨之改變；隱藏或顯示子部件；移除一個(gè)子部件。4布局管理器QLayout類(lèi)是布局管理器的基類(lèi)，它是一個(gè)抽象基類(lèi)。該類(lèi)繼承自QObject和QLayoutItem類(lèi)，而QLayoutItem類(lèi)提供了一個(gè)供QLayout操作的抽象項(xiàng)目。QLayout和QLayoutItem都是在設(shè)計(jì)自己的布局管理器時(shí)才使用的，一般只需要使用QLayout的幾個(gè)子類(lèi)就可以了，它們分別是：QBoxLayout（基本布局管理器）QGridLayout（柵格布局管理器）QFormLayout（表單布局管理器）QStackedLayout（棧布局管理器）5部件隨窗口變化大小在設(shè)計(jì)模式中向界面上拖入一個(gè)字體選擇框FontComboBox和一個(gè)文本編輯器TextEdit部件。然后點(diǎn)擊主界面，并按下Ctrl+L快捷鍵，這樣便設(shè)置了頂層布局管理器，可以看到兩個(gè)部件已經(jīng)填滿(mǎn)了整個(gè)界面。這時(shí)運(yùn)行程序，然后拉伸窗口，兩個(gè)部件會(huì)隨著窗口的大小變化而變化，這就是布局管理器在起作用。6基本布局管理器（QBoxLayout）

基本布局管理器QBoxLayout類(lèi)可以使子部件在水平方向或者垂直方向排成一列，它將所有的空間分成一行盒子，然后將每個(gè)部件放入一個(gè)盒子中。它有兩個(gè)子類(lèi)QHBoxLayout水平布局管理器和QVBoxLayout垂直布局管理器。布局管理器的幾個(gè)屬性如下表所示。7使用代碼實(shí)現(xiàn)水平布局

QHBoxLayout*layout=newQHBoxLayout;//新建水平布局管理器layout->addWidget(ui->fontComboBox);//向布局管理器中添加部件layout->addWidget(ui->textEdit);layout->setSpacing(50);//設(shè)置部件間的間隔layout->setContentsMargins(0,0,50,100);//設(shè)置布局管理器到邊界的距離，//四個(gè)參數(shù)順序是左，上，右，下setLayout(layout);8柵格布局管理器（QGridLayout）

柵格布局管理器QGridLayout類(lèi)使得部件在網(wǎng)格中進(jìn)行布局，它將所有的空間分隔成一些行和列，行和列的交叉處就形成了單元格，然后將部件放入一個(gè)確定的單元格中。例如：QGridLayout*layout=newQGridLayout;//添加部件，從第0行0列開(kāi)始，占據(jù)1行2列l(wèi)ayout->addWidget(ui->fontComboBox,0,0,1,2);//添加部件，從第0行2列開(kāi)始，占據(jù)1行1列l(wèi)ayout->addWidget(ui->pushButton,0,2,1,1);//添加部件，從第1行0列開(kāi)始，占據(jù)1行3列l(wèi)ayout->addWidget(ui->textEdit,1,0,1,3);setLayout(layout);

說(shuō)明：當(dāng)部件加入到一個(gè)布局管理器中，然后這個(gè)布局管理器再放到一個(gè)窗口部件上時(shí)，這個(gè)布局管理器以及它包含的所有部件都會(huì)自動(dòng)重新定義自己的父對(duì)象（parent）為這個(gè)窗口部件，所以在創(chuàng)建布局管理器和其中的部件時(shí)并不用指定父部件。9表單布局管理器（QFormLayout）

表單布局管理器QFormLayout類(lèi)用來(lái)管理表格的輸入部件和與它們相關(guān)的標(biāo)簽。表單布局管理器將它的子部件分為兩列，左邊是一些標(biāo)簽，右邊是一些輸入部件，比如行編輯器或者數(shù)字選擇框等。例如：

在設(shè)計(jì)模式，從部件欄中找到FormLayout，將其拖入到界面上，然后雙擊它，或者在它上面點(diǎn)擊鼠標(biāo)右鍵，選擇“添加窗體布局行”菜單。然后在彈出的“添加表單布局行”對(duì)話(huà)框中填入標(biāo)簽文字“姓名(&N)：”，這樣下面便自動(dòng)填寫(xiě)了“標(biāo)簽名稱(chēng)”、“字段類(lèi)型”和“字段名稱(chēng)”等，并且設(shè)置了伙伴關(guān)系。

10這里填寫(xiě)的標(biāo)簽文字中（&N），要注意括號(hào)必須是英語(yǔ)半角的，表明它的快捷鍵是Alt+N，設(shè)置伙伴關(guān)系表示當(dāng)按下Alt+N時(shí)，光標(biāo)會(huì)自動(dòng)跳轉(zhuǎn)到標(biāo)簽后面對(duì)應(yīng)的行編輯器中。按下確定鍵，便會(huì)在布局管理器中添加一個(gè)標(biāo)簽和一個(gè)行編輯器。按照這種方法，再添加三行：性別(&S)，使用QComoBox；年齡(&A)，使用QSpinBox；郵箱(&M)，使用QLineEdit。

可以按下快捷鍵Alt+N，這樣光標(biāo)就可以定位到“姓名”標(biāo)簽后的行編輯器中。11綜合使用布局管理器

將前面的界面再進(jìn)行設(shè)計(jì)：按下Ctrl鍵同時(shí)選中界面上的字體選擇框fontComboBox和按鈕pushButton，然后按下Ctrl+H快捷鍵將它們放入一個(gè)水平布局管理器中。然后再?gòu)牟考谥型先胍粋€(gè)VerticalSpacer垂直分隔符，它們是用來(lái)在部件間產(chǎn)生間隔的，將它放在表單布局管理器與水平布局管理器之間。最后點(diǎn)擊主界面，然后按下Ctrl+L快捷鍵，讓整個(gè)界面處于一個(gè)垂直布局管理器中。這時(shí)我們可以在右上角的對(duì)象列表中選擇分隔符Spacer，然后在屬性欄中設(shè)置它的高度為100。12設(shè)置部件大小凡是繼承自QWidget的類(lèi)都有這兩個(gè)屬性：大小提示（sizeHint）和最小大小提示（minimumSizeHint）。sizeHint屬性保存了部件的建議大小，對(duì)于不同的部件，默認(rèn)擁有不同的sizeHint，程序中使用sizeHint()函數(shù)來(lái)獲取sizeHint的值；minimumSizeHint保存了一個(gè)建議的最小大小。程序中可以使用minimumSizeHint()函數(shù)來(lái)獲取minimumSizeHint的值。 需要說(shuō)明的是，如果使用minimumSize()函數(shù)設(shè)置了部件的最小大小，那么最小大小提示將會(huì)被忽略。

13大小策略（sizePolicy）屬性

sizePolicy屬性的所有取值如下表所示：14伸縮因子（stretchfactor）

它是用來(lái)設(shè)置部件間的比例的。

例如，界面上的字體選擇框和一個(gè)按鈕處于一個(gè)水平布局管理器中，現(xiàn)在想讓它們的寬度比例為2:1，可以點(diǎn)擊對(duì)象欄中的horizontalLayout水平布局管理器對(duì)象，然后在它的屬性欄中將layoutStretch屬性設(shè)置為“2,1”。 如果要在代碼中進(jìn)行設(shè)置，可以在使用布局管理器的addWidget()函數(shù)添加部件的同時(shí)，在第二個(gè)參數(shù)中指定伸縮因子。mainLayout->setStretchFactor(1,1);或者mainLayout->setStretchFactor(button,1);mainLayout->setStretchFactor(Commo,3);15QWidget部件大小相關(guān)屬性高度與寬度屬性，是現(xiàn)在界面的大小；sizePolicy屬性可以設(shè)置大小策略以及伸縮因子；minimumSize屬性用來(lái)設(shè)置最小大?。籱aximumSize屬性設(shè)置最大大??；sizeIncrement屬性和baseSize屬性是設(shè)置窗口改變大小的，一般不用設(shè)置。16可擴(kuò)展窗口

對(duì)于一個(gè)窗口，可能有很多選項(xiàng)是擴(kuò)充的，只有在必要的時(shí)候才顯示出來(lái)，這時(shí)就可以使用一個(gè)按鈕，用來(lái)隱藏或者顯示多余的內(nèi)容，就是所謂的可擴(kuò)展窗口。要實(shí)現(xiàn)可擴(kuò)展窗口，就要借助于布局管理器的特性，那就是當(dāng)子部件隱藏時(shí)，布局管理器自動(dòng)縮小，當(dāng)子部件重新顯示時(shí)，布局管理器再次放大。例如：首先在界面上的那個(gè)pushButton的顯示文本更改為“顯示可擴(kuò)展窗口”，然后在其屬性欄中選中checkable選項(xiàng)。然后轉(zhuǎn)到它的toggled(bool)信號(hào)的槽，更改如下：voidMyWidget::on_pushButton_toggled(boolchecked)//顯隱窗口按鈕{ui->textEdit->setVisible(checked);//設(shè)置文本編輯器的顯示和隱藏if(checked)ui->pushButton->setText(tr("隱藏可擴(kuò)展窗口"));elseui->pushButton->setText(tr("顯示可擴(kuò)展窗口"));}17使用按鈕的按下與否兩種狀態(tài)來(lái)設(shè)置文本編輯器是否顯示，并且相應(yīng)的更改按鈕的文本。為了讓文本編輯器在一開(kāi)始是隱藏的，還要在MyWidget類(lèi)的構(gòu)造函數(shù)中添加一行代碼：ui->textEdit->hide();//讓文本編輯器隱藏，也可以使用setVisible(false)函數(shù)184.2設(shè)置伙伴伙伴（buddy）是在QLabel類(lèi)中提出的一個(gè)概念。因?yàn)橐粋€(gè)標(biāo)簽經(jīng)常用作一個(gè)交互式部件的說(shuō)明，就像表單布局管理器時(shí)看到的那樣，一個(gè)lineEdit部件前面有一個(gè)標(biāo)簽說(shuō)明這個(gè)lineEdit的作用。為了方便定位，QLabel提供了一個(gè)有用的機(jī)制，那就是提供了助記符來(lái)設(shè)置鍵盤(pán)焦點(diǎn)到對(duì)應(yīng)的部件上，而這個(gè)部件就叫做這個(gè)QLabel的伙伴。其中助記符就是我們所說(shuō)的加速鍵。在使用英文標(biāo)簽時(shí)，在字符串的一個(gè)字母前面添加“&”符號(hào)，那么就可以指定這個(gè)標(biāo)簽的加速鍵是Alt加上這個(gè)字母，而對(duì)于中文，需要在小括號(hào)中指定加速鍵字母。19在設(shè)計(jì)器中設(shè)置伙伴 按下設(shè)計(jì)器頂部欄中的編輯伙伴圖標(biāo)，進(jìn)入伙伴設(shè)計(jì)模式，分別將各個(gè)標(biāo)簽與它們后面的部件連起來(lái)。204.3設(shè)置Tab鍵順序 對(duì)于一個(gè)應(yīng)用程序，我們有時(shí)總希望使用Tab鍵來(lái)將焦點(diǎn)從一個(gè)部件移動(dòng)到下一個(gè)部件。在設(shè)計(jì)模式，設(shè)計(jì)器提供了Tab鍵的設(shè)置功能。在上面程序的設(shè)計(jì)模式中，按下上邊欄的編輯Tab順序按鈕進(jìn)入編輯Tab鍵順序模式，這時(shí)已經(jīng)顯示出了各個(gè)部件的Tab鍵順序，只需要用鼠標(biāo)點(diǎn)擊這些數(shù)字，就可以更改它們。21使用代碼進(jìn)行設(shè)置 當(dāng)程序啟動(dòng)時(shí)，焦點(diǎn)會(huì)在Tab鍵順序?yàn)?的部件上。這里進(jìn)行的設(shè)置等價(jià)于在構(gòu)造函數(shù)中使用如下代碼：setTabOrder(ui->lineEdit,ui->spinBox);//lineEdit在spinBox前面setTabOrder(ui->spinBox,ui->pushButton);//spinBox在pushButton前面setTabOrder(ui->pushButton,ui->checkBox);//pushButton在checkBox前面22