《Qt5开发及实例(第2版)-第3章Qt5布局管理.ppt》由会员分享,可在线阅读,更多相关《Qt5开发及实例(第2版)-第3章Qt5布局管理.ppt(28页珍藏版)》请在金锄头文库上搜索。
1、第3章 Qt 5布局管理3.13.23.3分割窗口分割窗口QSplitter类类停靠窗口停靠窗口QDockWidget类类堆栈窗体堆栈窗体QStackedWidget类类3.43.5基本布局(基本布局(QLayout)【综合实例】:修改用户资料【综合实例】:修改用户资料3.1 分割窗口QSplitter类【例】【例】(简单)一个十分简单的分割窗口功能,整个对话框由三个窗口组成,各个窗口之间的大小可随意拖曳改变,效果如图3.1所示。3.1 分割窗口QSplitter类本实例采用编写代码的方式实现,具体步骤如下。(1)新建QtWidgetsApplication(详见1.3.1节),项目名称为“S
2、plitter”,基类选择“QMainWindow”,取消“创建界面”复选框的选中状态。(2)在上述工程的“main.cpp”文件中添加代码。(3)在“main.cpp”文件的开始部分加入以下头文件:#include#include#include(4)运行程序,显示效果如图3.1所示。3.2 停靠窗口QDockWidget类停靠窗口QDockWidget类也是应用程序中经常用到的,设置停靠窗口的一般流程如下。(1)创建一个QDockWidget对象的停靠窗体。(2)设置此停靠窗体的属性,通常调用setFeatures()及setAllowedAreas()两种方法。(3)新建一个要插入停靠窗
3、体的控件,常用的有QListWidget和QTextEdit。(4)将控件插入停靠窗体,调用QDockWidget的setWidget()方法。(5)使用addDockWidget()方法在MainWindow中加入此停靠窗体。3.2 停靠窗口QDockWidget类【例】【例】(简单)停靠窗口QDockWidget类的使用:窗口1只可在主窗口的左边和右边停靠;窗口2只可在浮动和右部停靠两种状态间切换,并且不可移动;窗口3可实现停靠窗口的各种状态。效果如图3.2所示。实例文件见光盘CH302。3.2 停靠窗口QDockWidget类(1)新建QtWidgetsApplication(详见1.3
4、.1节),项目名称为“DockWindows”,基类选择“QMainWindow”,类名命名为“DockWindows”,取消“创建界面”复选框的选中状态,如图3.3所示。3.2 停靠窗口QDockWidget类(2)DockWindows类中只有一个构造函数的声明。代码如下:classDockWindows:publicQMainWindowQ_OBJECTpublic:DockWindows(QWidget*parent=0);DockWindows();(3)打开“dockwindows.cpp”文件,DockWindows类构造函数实现窗口的初始化及功能实现,具体代码。(4)在“doc
5、kwindows.cpp”文件的开始部分加入以下头文件:#include#include(5)运行程序,显示效果如图3.2所示。3.3 堆栈窗体堆栈窗体QStackedWidget类类【例】【例】(简单)堆栈窗体QStackedWidget类的使用,当选择左侧列表框中不同的选项时,右侧显示所选的不同的窗体。在此使用列表框QListWidget,效果如图3.4所示。3.3 堆栈窗体堆栈窗体QStackedWidget类类(1)新建QtWidgetsApplication(详见1.3.1节),项目名称为“StackedWidget”,基类选择“QDialog”,类名命名为“StackDlg”,取消
6、“创建界面”复选框的选中状态,如图3.5所示。3.3 堆栈窗体堆栈窗体QStackedWidget类类(2)打开“stackdlg.h”文件,添加如下加黑代码:classStackDlg:publicQDialogQ_OBJECTpublic:StackDlg(QWidget*parent=0);StackDlg();private:QListWidget *list;QStackedWidget *stack;QLabel *label1;QLabel *label2;QLabel *label3;在文件开始部分添加以下头文件:#include#include#include3.3 堆栈窗体
7、堆栈窗体QStackedWidget类类(3)打开“stackdlg.cpp”文件,在停靠窗体StackDlg类的构造函数中添加代码。(4)在stackdlg.cpp文件的开始部分加入以下头文件:#include(5)运行程序,显示效果如图3.4所示。3.4 基本布局(QLayout)Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理,分别是水平排列布局、垂直排列布局和网格排列布局。它们之间的继承关系如图3.6所示。3.4 基本布局(QLayout)addWidget()方法用于加入需要布局的控件,方法原型如下:voidaddWidget(Q
8、Widget*widget,/需要插入的控件对象intfromRow,/插入的行intfromColumn,/插入的列introwSpan,/表示占用的行数intcolumnSpan,/表示占用的列数Qt:Alignmentalignment=0/描述各个控件的对齐方式)3.4 基本布局(QLayout)addLayout()方法用于加入子布局,方法原型如下:voidaddLayout(QLayout*layout,/表示需要插入的子布局对象introw,/插入的起始行intcolumn,/插入的起始列introwSpan,/表示占用的行数intcolumnSpan,/表示占用的列数Qt:Al
9、ignmentalignment=0/指定对齐方式)3.4 基本布局(QLayout)【例】【例】(难度一般)通过实现一个“用户基本资料修改”的功能表来介绍如何使用基本布局管理,如QHBoxLayout类、QVBoxLayout类及QGridLayout类,效果如图3.7所示。3.4 基本布局(QLayout)本实例共用到四个布局管理器,分别是LeftLayout、RightLayout、BottomLayout和MainLayout,其布局框架如图3.8所示。3.4 基本布局(QLayout)(1)新建QtWidgetsApplication(详见1.3.1节),项目名称为“UserInfo
10、”,基类选择“QDialog”,取消“创建界面”复选框的选中状态。(2)打开“dialog.h”头文件,在头文件中声明对话框中的各个控件。添加代码。添加如下的头文件:#include#include#include#include#include(3)打开“dialog.cpp”文件,在类Dialog的构造函数中添加代码。3.4 基本布局(QLayout)(4)在“dialog.cpp”文件的开始部分加入以下头文件:#include#include#include#include#include#include#include#include(5)选择“构建”“构建项目UserInfo”命令,
11、为了能够在界面上显示头像图片,请将事先准备好的图片312.png复制到D:QtCH3CH304build-UserInfo-Desktop_Qt_5_4_0_MinGW_32bit-Debug目录下。运行程序,显示效果如图3.7所示。3.5 【综合实例】:修改用户资料通过实现修改用户资料功能这一综合实例,介绍如何使用布局方法实现一个复杂的窗口布局,如何使用分割窗口,以及如何使用堆栈窗体,效果如图3.9所示。(a)“基本信息”页面3.5 【综合实例】:修改用户资料(b)“联系方式”页面3.5 【综合实例】:修改用户资料(c)“详细资料”页面图3.9修改用户资料实例效果3.5 【综合实例】:修改用
12、户资料最外层是一个分割窗体QSplitter,分割窗体的左侧是一个QListWidget,右侧是一个QVBoxLayout布局,此布局包括一个堆栈窗体QStackWidget和一个按钮布局。在此堆栈窗体QStackWidget中包含三个窗体,每个窗体采用基本布局方式进行布局管理,如图3.10所示。3.5 【综合实例】:修改用户资料1导航页实现导航页实现(1)新建QtWidgetsApplication(详见1.3.1节),项目名称为“Example”,基类选择“QDialog”,取消“创建界面”复选框的选中状态。(2)在如图3.10所示的布局框架中,框架左侧的页面(导航页)用Content类实
13、现,类名命名为“Content”。打开“content.h”头文件,修改Content类继承自QFrame类,类声明中包含自定义的三个页面类对象、两个按钮对象及一个堆栈窗体对象,添加代码。(3)打开“Content.cpp”文件,添加代码。3.5 【综合实例】:修改用户资料2“修改用户基本信息修改用户基本信息”设计设计(1)添加该工程的提供主要显示用户基本信息界面的函数所在的文件,在“Example”项目名上单击鼠标右键,在弹出的快捷菜单中选择“添加新文件.”菜单项,在弹出的如图3.11所示的对话框中选择“C+Class”选项,单击“Choose.”按钮。3.5 【综合实例】:修改用户资料(2
14、)弹出如图3.12所示的对话框,在“Baseclass”后面的下拉列表框中选择基类名“QWidget”,在“Classname”后面的文本框中输入类的名称“BaseInfo”。(3)打开“baseinfo.h”头文件,添加代码。(4)打开“baseinfo.cpp”文件,添加代码。3.5 【综合实例】:修改用户资料3“显示用户的联系方式显示用户的联系方式”设计设计(1)添加该工程的提供主要显示用户的联系方式界面的函数所在的文件,在“Example”项目名上单击鼠标右键,在弹出的快捷菜单中选择“添加新文件.”菜单项,在弹出的对话框中选择“C+Class”选项。单击“Choose.”按钮,弹出对话
15、框,在“Baseclass”后面的下拉列表框中选择基类名“QWidget”,在“Classname”后面的文本框中输入类的名称“Contact”。(2)单击“下一步”按钮,单击“完成”按钮,添加“contact.h”头文件和“contact.cpp”源文件。(3)打开“contact.h”头文件,添加代码。(4)打开“contact.cpp”文件,添加代码。3.5 【综合实例】:修改用户资料4“显示用户的详细资料显示用户的详细资料”设计设计 (1)添加主要显示用户的详细资料界面的函数所在的文件,在“Example”项目名上单击鼠标右键,在弹出的快捷菜单中选择“添加新文件.”菜单项,在弹出的对话
16、框中选择“C+Class”选项,单击“Choose.”按钮,弹出对话框,在“Baseclass”后面的下拉列表框中选择基类名“QWidget”,在“Classname”后面的文本框中输入类的名称“Detail”。(2)单击“下一步”按钮,单击“完成”按钮,添加“detail.h”头文件和“detail.cpp”源文件。(3)打开“detail.h”头文件,添加代码。(4)打开“detail.cpp”文件,添加代码。3.5 【综合实例】:修改用户资料下面编写该工程的入口函数(所在的文件为main.cpp)。打开“main.cpp”文件,编写代码。选择“构建”“构建项目Example”菜单项,与上例一样,为了能够在界面上显示头像图片,将事先准备好的图片312.png复制到D:QtCH3CH305build-Example-Desktop_Qt_5_4_0_MinGW_32bit-Debug目录下。编译此程序,最后运行程序,效果如图3.9所示。