Qt5開發(fā)及實(shí)例(第2版)第3章Qt5布局管理

1、第3章 qt 5布局管理3.13.23.3分割窗口分割窗口qsplitter類類?？看翱谕？看翱趒dockwidget類類堆棧窗體堆棧窗體qstackedwidget類類3.43.5基本布局（基本布局（qlayout）【綜合實(shí)例】：修改用戶資料【綜合實(shí)例】：修改用戶資料3.1 分割窗口qsplitter類【例】【例】（簡(jiǎn)單） 一個(gè)十分簡(jiǎn)單的分割窗口功能，整個(gè)對(duì)話框由三個(gè)窗口組成，各個(gè)窗口之間的大小可隨意拖曳改變，效果如圖3.1所示。3.1 分割窗口qsplitter類本實(shí)例采用編寫代碼的方式實(shí)現(xiàn)，具體步驟如下。（1）新建qt widgets application（詳見1.3.1節(jié)），項(xiàng)目名稱

2、為“splitter”，基類選擇“qmainwindow”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）在上述工程的“main.cpp”文件中添加代碼。（3）在“main.cpp”文件的開始部分加入以下頭文件：#include#include#include （4）運(yùn)行程序，顯示效果如圖3.1所示。3.2 ?？看翱趒dockwidget類?？看翱趒dockwidget類也是應(yīng)用程序中經(jīng)常用到的，設(shè)置?？看翱诘囊话懔鞒倘缦隆＃?）創(chuàng)建一個(gè)qdockwidget對(duì)象的?？看绑w。（2）設(shè)置此停靠窗體的屬性，通常調(diào)用setfeatures()及setallowedareas()兩種方法。（3）新建一個(gè)要插

3、入?？看绑w的控件，常用的有qlistwidget和qtextedit。（4）將控件插入停靠窗體，調(diào)用qdockwidget的setwidget()方法。（5）使用adddockwidget()方法在mainwindow中加入此停靠窗體。3.2 ?？看翱趒dockwidget類【例】【例】（簡(jiǎn)單） ?？看翱趒dockwidget類的使用：窗口1只可在主窗口的左邊和右邊?？?；窗口2只可在浮動(dòng)和右部?？?jī)煞N狀態(tài)間切換，并且不可移動(dòng)；窗口3可實(shí)現(xiàn)?？看翱诘母鞣N狀態(tài)。效果如圖3.2所示。實(shí)例文件見光盤ch302。3.2 停靠窗口qdockwidget類（1）新建qt widgets applicatio

4、n （詳見1.3.1節(jié)），項(xiàng)目名稱為“dockwindows”，基類選擇“qmainwindow”，類名命名為“dockwindows”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)，如圖3.3所示。3.2 ?？看翱趒dockwidget類（2）dockwindows類中只有一個(gè)構(gòu)造函數(shù)的聲明。代碼如下：class dockwindows : public qmainwindow q_objectpublic: dockwindows(qwidget *parent = 0); dockwindows(); （3）打開“dockwindows.cpp”文件，dockwindows類構(gòu)造函數(shù)實(shí)現(xiàn)窗口的初始化

5、及功能實(shí)現(xiàn)，具體代碼。（4）在“dockwindows.cpp”文件的開始部分加入以下頭文件： #include#include（5）運(yùn)行程序，顯示效果如圖3.2所示。3.3 堆棧窗體堆棧窗體qstackedwidget類類【例】【例】（簡(jiǎn)單） 堆棧窗體qstackedwidget類的使用，當(dāng)選擇左側(cè)列表框中不同的選項(xiàng)時(shí)，右側(cè)顯示所選的不同的窗體。在此使用列表框qlistwidget，效果如圖3.4所示。3.3 堆棧窗體堆棧窗體qstackedwidget類類（1）新建qt widgets application（詳見1.3.1節(jié)），項(xiàng)目名稱為“stackedwidget”，基類選擇“qdia

6、log”，類名命名為“stackdlg”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)，如圖3.5所示。3.3 堆棧窗體堆棧窗體qstackedwidget類類（2）打開“stackdlg.h”文件，添加如下加黑代碼： class stackdlg : public qdialogq_objectpublic:stackdlg(qwidget *parent = 0);stackdlg();private:qlistwidget *list;qstackedwidget *stack;qlabel *label1;qlabel *label2;qlabel *label3; 在文件開始部分添加以下頭文件：

7、 #include #include #include 3.3 堆棧窗體堆棧窗體qstackedwidget類類（3）打開“stackdlg.cpp”文件，在?？看绑wstackdlg類的構(gòu)造函數(shù)中添加代碼。（4）在stackdlg.cpp文件的開始部分加入以下頭文件： #include （5）運(yùn)行程序，顯示效果如圖3.4所示。3.4 基本布局（qlayout）qt提供了qhboxlayout類、qvboxlayout類及qgridlayout類等的基本布局管理，分別是水平排列布局、垂直排列布局和網(wǎng)格排列布局。它們之間的繼承關(guān)系如圖3.6所示。3.4 基本布局（qlayout）addwidget

8、()方法用于加入需要布局的控件，方法原型如下： void addwidget(qwidget *widget, /需要插入的控件對(duì)象int fromrow, /插入的行int fromcolumn, /插入的列int rowspan, /表示占用的行數(shù)int columnspan, /表示占用的列數(shù)qt:alignment alignment=0 /描述各個(gè)控件的對(duì)齊方式)3.4 基本布局（qlayout）addlayout ()方法用于加入子布局，方法原型如下： void addlayout(qlayout *layout, /表示需要插入的子布局對(duì)象int row, /插入的起始行int

9、column, /插入的起始列int rowspan, /表示占用的行數(shù)int columnspan, /表示占用的列數(shù)qt:alignment alignment=0 /指定對(duì)齊方式)3.4 基本布局（qlayout）【例】【例】（難度一般） 通過(guò)實(shí)現(xiàn)一個(gè)“用戶基本資料修改”的功能表來(lái)介紹如何使用基本布局管理，如qhboxlayout類、qvboxlayout類及qgridlayout類，效果如圖3.7所示。3.4 基本布局（qlayout）本實(shí)例共用到四個(gè)布局管理器，分別是leftlayout、rightlayout、bottomlayout和mainlayout，其布局框架如圖3.8所示

10、。3.4 基本布局（qlayout）（1）新建qt widgets application（詳見1.3.1節(jié)），項(xiàng)目名稱為“userinfo”，基類選擇“qdialog”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）打開“dialog.h”頭文件，在頭文件中聲明對(duì)話框中的各個(gè)控件。添加代碼。添加如下的頭文件：#include #include #include #include #include （3）打開“dialog.cpp”文件，在類dialog的構(gòu)造函數(shù)中添加代碼。 3.4 基本布局（qlayout）（4）在“dialog.cpp”文件的開始部分加入以下頭文件：#include#inclu

11、de#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_4_0_mingw_32bit-debug目錄下。運(yùn)行程序，顯示效果如圖3.7所示。3.5 【綜合實(shí)例】：修改用戶資料通過(guò)實(shí)現(xiàn)修改用戶資料功能這一綜合實(shí)例，介紹如何使用布局方法實(shí)現(xiàn)一個(gè)復(fù)雜的窗口布局，如何使用分割窗口，以及如何使用堆棧窗體，效果如圖3.9所示。（a）“基本信息”頁(yè)面3.5 【綜合

12、實(shí)例】：修改用戶資料（b）“聯(lián)系方式”頁(yè)面3.5 【綜合實(shí)例】：修改用戶資料（c）“詳細(xì)資料”頁(yè)面圖3.9 修改用戶資料實(shí)例效果3.5 【綜合實(shí)例】：修改用戶資料最外層是一個(gè)分割窗體qsplitter，分割窗體的左側(cè)是一個(gè)qlistwidget，右側(cè)是一個(gè)qvboxlayout布局，此布局包括一個(gè)堆棧窗體qstackwidget和一個(gè)按鈕布局。在此堆棧窗體qstackwidget中包含三個(gè)窗體，每個(gè)窗體采用基本布局方式進(jìn)行布局管理，如圖3.10所示。 3.5 【綜合實(shí)例】：修改用戶資料1導(dǎo)航頁(yè)實(shí)現(xiàn)導(dǎo)航頁(yè)實(shí)現(xiàn)（1）新建qt widgets application（詳見1.3.1節(jié)），項(xiàng)目名稱為“

13、example”，基類選擇“qdialog”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。（2）在如圖3.10所示的布局框架中，框架左側(cè)的頁(yè)面（導(dǎo)航頁(yè)）用content類實(shí)現(xiàn)，類名命名為“content”。打開“content.h”頭文件，修改content類繼承自qframe類，類聲明中包含自定義的三個(gè)頁(yè)面類對(duì)象、兩個(gè)按鈕對(duì)象及一個(gè)堆棧窗體對(duì)象，添加代碼。（3）打開“content.cpp”文件，添加代碼。3.5 【綜合實(shí)例】：修改用戶資料2“修改用戶基本信息修改用戶基本信息”設(shè)計(jì)設(shè)計(jì)（1）添加該工程的提供主要顯示用戶基本信息界面的函數(shù)所在的文件，在“example”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷

14、菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的如圖3.11所示的對(duì)話框中選擇“c+ class”選項(xiàng)，單擊“choose.”按鈕。3.5 【綜合實(shí)例】：修改用戶資料（2）彈出如圖3.12所示的對(duì)話框，在“base class”后面的下拉列表框中選擇基類名“qwidget”，在“class name”后面的文本框中輸入類的名稱“baseinfo”。（3）打開“baseinfo.h”頭文件，添加代碼。（4）打開“baseinfo.cpp”文件，添加代碼。3.5 【綜合實(shí)例】：修改用戶資料3“顯示用戶的聯(lián)系方式顯示用戶的聯(lián)系方式”設(shè)計(jì)設(shè)計(jì)（1）添加該工程的提供主要顯示用戶的聯(lián)系方式界面的函數(shù)所在的文件，

15、在“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）打開“contact.h”頭文件，添加代碼。（4）打開“contact.cpp”文件，添加代碼。3.5 【綜合實(shí)例】：修改用戶資料4“顯示用戶的詳細(xì)資料顯示用戶的詳細(xì)資料”設(shè)計(jì)設(shè)計(jì) （1）添加主要顯示用戶的詳細(xì)資料界面的函數(shù)所在的文件，在“example”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的對(duì)話框中選擇“c+ class”選項(xiàng)，單擊“choose.”按鈕，彈出對(duì)話框，在“base class”后面的下拉列表框中選擇基類名“qwidget”，在“class name”后面的文本框中輸入類的名稱“detail”。（2）單擊“下一步”按鈕，單擊“完成”按鈕，添加“detail.h”頭文件和“detail.cpp”源文件。（3）打開“detail.h”頭文