Qt-5開(kāi)發(fā)及實(shí)例-第3章--Qt-5布局管理課件

1、第3章 Qt 5布局管理分割窗口QSplitter類分割窗口QSplitter類【例】（簡(jiǎn)單）（CH301）一個(gè)十分簡(jiǎn)單的分割窗口功能，整個(gè)窗口由三個(gè)子窗口組成，各個(gè)子窗口之間的大小可隨意拖曳改變，效果如圖3.1所示。分割窗口QSplitter類本實(shí)例采用編寫(xiě)代碼的方式實(shí)現(xiàn)，具體步驟如下。（1）新建Qt Widgets Application（詳見(jiàn)1.3.1節(jié)），項(xiàng)目名稱為“Splitter”，基類選擇“QMainWindow”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）在上述工程的“main.cpp”文件中添加如下代碼。其中，(a) QSplitter *splitterMain =new Q

2、Splitter(Qt:Horizontal,0)：新建一個(gè)QSplitter類對(duì)象，作為主分割窗口，設(shè)定此分割窗口為水平分割窗口。(b) QTextEdit *textLeft =new QTextEdit(QObject:tr(Left Widget),splitterMain)：新建一個(gè)QTextEdit類對(duì)象，并將其插入主分割窗口中。(c) textLeft-setAlignment(Qt:AlignCenter)：設(shè)定TextEdit中文字的對(duì)齊方式(d)QSplitter *splitterRight =new QSplitter(Qt:Vertical,splitterMain)

3、：新建一個(gè)QSplitter類對(duì)象，作為右分割窗口，設(shè)定此分割窗口為垂直分割窗口，并以主分割窗口為父窗口。(e) splitterRight-setOpaqueResize(false)：調(diào)用setOpaqueResize(bool)方法用于設(shè)定分割窗口的分割條在拖曳時(shí)是否為實(shí)時(shí)更新顯示，若設(shè)為true則實(shí)時(shí)更新顯示，若設(shè)為false則在拖曳時(shí)只顯示一條灰色的粗線條，在拖曳到位并釋放鼠標(biāo)后再顯示分割條。默認(rèn)設(shè)置為true。(f) splitterMain-setStretchFactor(1,1)：調(diào)用setStretchFactor()方法用于設(shè)定可伸縮控件，它的第1個(gè)參數(shù)用于指定設(shè)置的控件

4、序號(hào)，控件序號(hào)按插入的先后次序從0起依次編號(hào)；第2個(gè)參數(shù)為大于0的值，表示此控件為可伸縮控件。分割窗口QSplitter類（3）在“main.cpp”文件的開(kāi)始部分加入以下頭文件：#include#include#include（4）運(yùn)行程序，顯示效果如圖3.1所示。第3章 Qt 5布局管理?？看翱赒DockWidget類?？看翱赒DockWidget類?？看翱赒DockWidget類也是在應(yīng)用程序中經(jīng)常用到的，設(shè)置停靠窗口的一般流程如下。（1）創(chuàng)建一個(gè)QDockWidget對(duì)象的?？看绑w。（2）設(shè)置此?？看绑w的屬性，通常調(diào)用setFeatures()及setAllowedAreas()兩種方

5、法。（3）新建一個(gè)要插入?？看绑w的控件，常用的有QListWidget和QTextEdit。（4）將控件插入?？看绑w，調(diào)用QDockWidget的setWidget()方法。（5）使用addDockWidget()方法在MainWindow中加入此?？看绑w。停靠窗口QDockWidget類【例】（簡(jiǎn)單）（CH302）?？看翱赒DockWidget類的使用：窗口1只可在主窗口的左邊和右邊?？浚淮翱?只可在浮動(dòng)和右部?？?jī)煞N狀態(tài)間切換，并且不可移動(dòng)；窗口3可實(shí)現(xiàn)停靠窗口的各種狀態(tài)。效果如圖3.2所示。?？看翱赒DockWidget類（1）新建Qt Widgets Application （詳見(jiàn)1.

6、3.1節(jié)），項(xiàng)目名稱為“DockWindows”，基類選擇“QMainWindow”，類名命名為“DockWindows”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)，如圖3.3所示。?？看翱赒DockWidget類（2）DockWindows類中只有一個(gè)構(gòu)造函數(shù)的聲明。位于“dockwindows.h”文件中，代碼如下：class DockWindows : public QMainWindow Q_OBJECTpublic: DockWindows(QWidget *parent = 0); DockWindows();（3）打開(kāi)“dockwindows.cpp”文件，DockWindows類構(gòu)造函

7、數(shù)實(shí)現(xiàn)窗口的初始化及功能實(shí)現(xiàn)，具體代碼。其中，(a) setFeatures()方法設(shè)置停靠窗體的特性，原型如下： void setFeatures(DockWidgetFeatures features)參數(shù)QDockWidget:DockWidgetFeatures指定停靠窗體的特性，包括以下幾種參數(shù)。 QDockWidget:DockWidgetClosable：?？看绑w可關(guān)閉。 QDockWidget:DockWidgetMovable：停靠窗體可移動(dòng)。 QDockWidget:DockWidgetFloatable：?？看绑w可浮動(dòng)。 QDockWidget:AllDockWidget

8、Features：此參數(shù)表示擁有停靠窗體的所有特性。 QDockWidget:NoDockWidgetFeatures：不可移動(dòng)、不可關(guān)閉、不可浮動(dòng)。停靠窗口QDockWidget類(b) setAllowedAreas()方法設(shè)置?？看绑w可?？康膮^(qū)域，原型如下：void setAllowedAreas(Qt:DockWidgetAreas areas)參數(shù)Qt:DockWidgetAreas指定?？看绑w可?？康膮^(qū)域，包括以下幾種參數(shù)。 Qt:LeftDockWidgetArea：可在主窗口的左側(cè)?？?。 Qt:RightDockWidgetArea：可在主窗口的右側(cè)?？俊?Qt:TopDock

9、WidgetArea：可在主窗口的頂部?？?。 Qt:BottomDockWidgetArea：可在主窗口的底部?？?。 Qt:AllDockWidgetArea：可在主窗口任意（以上四個(gè)）部位停靠。 Qt:NoDockWidgetArea：只可?？吭诓迦胩?。各區(qū)域設(shè)定也可采用或(|)的方式進(jìn)行。（4）在“dockwindows.cpp”文件的開(kāi)始部分加入以下頭文件：#include#include（5）運(yùn)行程序，顯示效果如圖3.2所示。第3章 Qt 5布局管理堆棧窗體QStackedWidget類堆棧窗體QStackedWidget類【例】（簡(jiǎn)單）（CH303）堆棧窗體QStackedWidge

10、t類的使用，當(dāng)選擇左側(cè)列表框中不同的選項(xiàng)時(shí)，右側(cè)顯示所選的不同的窗體。在此使用列表框QListWidget，效果如圖3.4所示。堆棧窗體QStackedWidget類本實(shí)例是采用編寫(xiě)代碼的方式實(shí)現(xiàn)的，具體步驟如下：（1）新建Qt Widgets Application（詳見(jiàn)1.3.1節(jié)），項(xiàng)目名稱為“StackedWidget”，基類選擇“QDialog”，類名命名為“StackDlg”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)，如圖3.5所示。堆棧窗體QStackedWidget類（2）打開(kāi)“stackdlg.h”文件，添加如下加黑代碼：class StackDlg : public QDialog

11、Q_OBJECTpublic:StackDlg(QWidget *parent = 0);StackDlg();private:QListWidget *list;QStackedWidget *stack;QLabel *label1;QLabel *label2;QLabel *label3;在文件開(kāi)始部分添加以下頭文件：#include #include #include 堆棧窗體QStackedWidget類（3）打開(kāi)“stackdlg.cpp”文件，在?？看绑wStackDlg類的構(gòu)造函數(shù)中添加如下代碼。其中，(a) mainLayout-setStretchFactor(list,1

12、)：設(shè)定可伸縮控件，第1個(gè)參數(shù)用于指定設(shè)置的控件（序號(hào)從0起編號(hào)），第2個(gè)參數(shù)的值大于0則表示此控件為可伸縮控件。(b)connect(list,SIGNAL(currentRowChanged(int),stack,SLOT(setCurrentIndex(int)：將QListWidget的currentRowChanged()信號(hào)與堆棧窗體的setCurrentIndex()槽函數(shù)連接起來(lái)，實(shí)現(xiàn)按選擇顯示窗體。此處的堆棧窗體index按插入的順序從0起依次排序，與QListWidget的條目排序相一致。（4）在stackdlg.cpp文件的開(kāi)始部分加入以下頭文件： #include （5

13、）運(yùn)行程序，顯示效果如圖3.4所示。第3章 Qt 5布局管理基本布局（QLayout）基本布局（QLayout）Qt提供了QHBoxLayout類、QVBoxLayout類及QGridLayout類等的基本布局管理，分別是水平排列布局、垂直排列布局和網(wǎng)格排列布局。各種布局類及繼承關(guān)系如圖3.6所示?；静季郑≦Layout）布局中常用的方法有addWidget()和addLayout()。addWidget()方法用于加入需要布局的控件，方法原型如下：void addWidget(QWidget *widget, /需要插入的控件對(duì)象int fromRow, /插入的行int fromColu

14、mn, /插入的列int rowSpan, /表示占用的行數(shù)int columnSpan, /表示占用的列數(shù)Qt:Alignment alignment=0 /描述各個(gè)控件的對(duì)齊方式)基本布局（QLayout）addLayout()方法用于加入子布局，方法原型如下：void addLayout(QLayout *layout, /表示需要插入的子布局對(duì)象int row, /插入的起始行int column, /插入的起始列int rowSpan, /表示占用的行數(shù)int columnSpan, /表示占用的列數(shù)Qt:Alignment alignment=0 /指定對(duì)齊方式)基本布局（QLay

15、out）【例】（難度一般）（CH304）通過(guò)實(shí)現(xiàn)一個(gè)“用戶基本資料修改”的功能表單來(lái)介紹如何使用基本布局管理，如QHBoxLayout類、QVBoxLayout類及QGridLayout類，效果如圖3.7所示?；静季郑≦Layout）本實(shí)例共用到四個(gè)布局管理器，分別是LeftLayout、RightLayout、BottomLayout和MainLayout，其布局框架如圖3.8所示?；静季郑≦Layout）（1）新建Qt Widgets Application（詳見(jiàn)1.3.1節(jié)），項(xiàng)目名稱為“UserInfo”，基類選擇“QDialog”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）打開(kāi)“d

16、ialog.h”頭文件，在頭文件中聲明對(duì)話框中的各個(gè)控件。添加如下代碼。添加如下頭文件：#include #include #include #include #include （3）打開(kāi)“dialog.cpp”文件，在類Dialog的構(gòu)造函數(shù)中添加如下代碼。基本布局（QLayout）其中，(a) OtherLabel-setFrameStyle(QFrame:Panel|QFrame:Sunken)：設(shè)置控件的風(fēng)格。setFrameStyle()是QFrame的方法，參數(shù)以或(|)的方式設(shè)定控件的面板風(fēng)格，由形狀(QFrame:Shape)和陰影(QFrame:shadow)兩項(xiàng)配合設(shè)定。其

17、中，形狀包括六種，分別是NoFrame、Panel、Box、HLine、VLine及WinPanel；陰影包括三種，分別是Plain、Raised和Sunken。(b) LeftLayout =new QGridLayout()：左部布局，由于此布局管理器不是主布局管理器，所以不用指定父窗口。(c) LeftLayout-setColumnStretch(0,1)、LeftLayout-setColumnStretch(1,3)：設(shè)定兩列分別占用空間的比例，本例設(shè)定為1:3。即使對(duì)話框框架大小改變了，兩列之間的寬度比依然保持不變。(d) ButtomLayout-addStretch()：在按

18、鈕之前插入一個(gè)占位符，使兩個(gè)按鈕能夠靠右對(duì)齊，并且在整個(gè)對(duì)話框的大小發(fā)生改變時(shí)，保證按鈕的大小不發(fā)生變化。(e) QGridLayout *mainLayout =new QGridLayout(this)：實(shí)現(xiàn)主布局，指定父窗口this，也可調(diào)用this-setLayout(mainLayout)實(shí)現(xiàn)。(f) mainLayout-setSizeConstraint(QLayout:SetFixedSize)：設(shè)定最優(yōu)化顯示，并且使用戶無(wú)法改變對(duì)話框的大小。所謂最優(yōu)化顯示，即控件都按其sizeHint()的大小顯示?；静季郑≦Layout）（4）在“dialog.cpp”文件的開(kāi)始部分加入

19、以下頭文件：#include#include#include#include#include#include#include#include（5）選擇“構(gòu)建”“構(gòu)建項(xiàng)目UserInfo”命令，為了能夠在界面上顯示頭像圖片，請(qǐng)將事先準(zhǔn)備好的圖片312.png復(fù)制到D:QtCH3CH304build-UserInfo-Desktop_Qt_5_11_1_MinGW_32bit-Debug目錄下，再重新構(gòu)建項(xiàng)目。運(yùn)行程序，顯示效果如圖3.7所示。第3章 Qt 5布局管理【綜合實(shí)例】（CH305）：修改用戶資料【綜合實(shí)例】（CH305）：修改用戶資料通過(guò)實(shí)現(xiàn)修改用戶資料功能這一綜合實(shí)例，介紹如何使用布

20、局方法實(shí)現(xiàn)一個(gè)復(fù)雜的窗口布局，如何使用分割窗口，以及如何使用堆棧窗體。實(shí)例效果如圖3.9所示。（a）“基本信息”頁(yè)面【綜合實(shí)例】（CH305）：修改用戶資料（b）“聯(lián)系方式”頁(yè)面【綜合實(shí)例】（CH305）：修改用戶資料（c）“詳細(xì)資料”頁(yè)面【綜合實(shí)例】（CH305）：修改用戶資料最外層是一個(gè)分割窗體QSplitter，分割窗體的左側(cè)是一個(gè)QListWidget，右側(cè)是一個(gè)QVBoxLayout布局，此布局包括一個(gè)堆棧窗體QStackWidget和一個(gè)按鈕布局。在此堆棧窗體QStackWidget中包含三個(gè)頁(yè)面，每個(gè)頁(yè)面采用基本布局方式進(jìn)行布局管理，如圖3.10所示。 1導(dǎo)航頁(yè)實(shí)現(xiàn)（1）新建Qt

21、 Widgets Application（詳見(jiàn)1.3.1節(jié)），項(xiàng)目名稱為“Example”，基類選擇“QDialog”，類名命名為“Content”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）在如圖3.10所示的布局框架中，框架左側(cè)的頁(yè)面（導(dǎo)航頁(yè)）就用Content類來(lái)實(shí)現(xiàn)。打開(kāi)“content.h”頭文件，修改Content類繼承自QFrame類，類聲明中包含自定義的三個(gè)頁(yè)面類對(duì)象、兩個(gè)按鈕對(duì)象及一個(gè)堆棧窗體對(duì)象，添加如下代碼：/添加的頭文件#include #include #include baseinfo.h#include contact.h#include detail.hclass

22、 Content : public QFrameQ_OBJECTpublic:Content(QWidget *parent=0);Content();QStackedWidget *stack;QPushButton *AmendBtn;QPushButton *CloseBtn;BaseInfo *baseInfo;Contact *contact;Detail *detail;1導(dǎo)航頁(yè)實(shí)現(xiàn)（3）打開(kāi)“Content.cpp”文件，添加如下代碼：Content:Content(QWidget *parent) : QFrame(parent) stack =new QStackedWidg

23、et(this);/創(chuàng)建一個(gè)QStackedWiget對(duì)象/對(duì)堆棧窗口的顯示風(fēng)格進(jìn)行設(shè)置 stack-setFrameStyle(QFrame:Panel|QFrame:Raised);/* 插入三個(gè)頁(yè)面 */(a) baseInfo =new BaseInfo(); contact =new Contact(); detail =new Detail(); stack-addWidget(baseInfo); stack-addWidget(contact); stack-addWidget(detail);/* 創(chuàng)建兩個(gè)按鈕 */(b) AmendBtn =new QPushButton(

24、tr(修改); CloseBtn =new QPushButton(tr(關(guān)閉); QHBoxLayout *BtnLayout =new QHBoxLayout; BtnLayout-addStretch(1); BtnLayout-addWidget(AmendBtn); BtnLayout-addWidget(CloseBtn);/* 進(jìn)行整體布局 */ QVBoxLayout *RightLayout =new QVBoxLayout(this); RightLayout-setMargin(10); RightLayout-setSpacing(6); RightLayout-add

25、Widget(stack); RightLayout-addLayout(BtnLayout);1導(dǎo)航頁(yè)實(shí)現(xiàn)其中，(a) baseInfo =new BaseInfo()至stack-addWidget(detail)：這段代碼是在堆棧窗口中順序插入“基本信息”“聯(lián)系方式”“詳細(xì)資料”三個(gè)頁(yè)面。其中，BaseInfo類的具體完成代碼參照3.4節(jié)，后兩個(gè)與此類似。(b) AmendBtn =new QPushButton(tr(修改)至BtnLayout-addWidget(CloseBtn)：這段代碼用于創(chuàng)建兩個(gè)按鈕，并利用QHBoxLayout對(duì)其進(jìn)行布局。2“修改用戶基本信息”設(shè)計(jì)（1）添

26、加該工程的提供主要顯示用戶基本信息界面的函數(shù)所在的文件，在“Example”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”選項(xiàng)，在彈出的如圖3.11所示的對(duì)話框中選擇“C+ Class”選項(xiàng)，單擊“Choose.”按鈕。2“修改用戶基本信息”設(shè)計(jì)（2）彈出如圖3.12所示的對(duì)話框，在“Base class”下拉列表框中選擇基類名為“QWidget”，在“Class name”的文本框中輸入類的名稱“BaseInfo”。單擊“下一步”按鈕，單擊“完成”按鈕，添加“baseinfo.h”頭文件和“baseinfo.cpp”源文件。（3）打開(kāi)“baseinfo.h”頭文件，添加的代碼（

27、具體解釋請(qǐng)參照3.4節(jié)）。（4）打開(kāi)“baseinfo.cpp”文件，添加如下代碼（具體解釋請(qǐng)參照3.4節(jié)）。3“顯示用戶的聯(lián)系方式”設(shè)計(jì)（1）添加該工程的提供主要顯示用戶的聯(lián)系方式界面的函數(shù)所在的文件，在“Example”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”選項(xiàng)，在彈出的對(duì)話框中選擇“C+ Class”選項(xiàng)。單擊“Choose.”按鈕，在彈出的對(duì)話框的“Base class”的下拉列表框中選擇基類名為“QWidget”，在“Class name”文本框中輸入類的名稱“Contact”。（2）單擊“下一步”按鈕，單擊“完成”按鈕，添加“contact.h”頭文件和“contact.cpp”源文件。（3）打開(kāi)“contact.