Qt开发及实例第版Qt布局管理课件.ppt

3.1,分割窗口,QSplitter,类,【例】,（简单）,一个十分简单的分割窗口功能，整个对话框由三个窗口组成，,各个窗口之间的大小可随意拖曳改变，效果如图,3.1,所示。,3.1,分割窗口,QSplitter,类,本实例采用编写代码的方式实现，具体步骤如下。,（,1,）新建,Qt Widgets Application,（详见,1.3.1,节），项目名称为“,Splitter,”，,基类选择“,QMainWindow,”，取消“创建界面”复选框的选中状态。,（,2,）在上述,工程的“,main.cpp,”文件中添加代码。,（,3,）在“,main.cpp,”文件的开始部分加入以下头文件：,#include,#include,#include,（,4,）运行程序，显示效果如图,3.1,所示。,3.2,停靠窗口,QDockWidget,类,停靠窗口,QDockWidget,类也是应用程序中经常用到的，设置停靠窗口的一般,流程如下。,（,1,）创建一个,QDockWidget,对象的停靠窗体。,（,2,）设置此停靠窗体的属性，通常调用,setFeatures(),及,setAllowedAreas(),两,种方法。,（,3,）新建一个要插入停靠窗体的控件，常用的有,QListWidget,和,QTextEdit,。,（,4,）将控件插入停靠窗体，调用,QDockWidget,的,setWidget(),方法。,（,5,）使用,addDockWidget(),方法在,MainWindow,中加入此停靠窗体。,3.2,停靠窗口,QDockWidget,类,【例】,（简单）,停靠窗口,QDockWidget,类的使用：窗口,1,只可在主窗口的左边,和右边停靠；窗口,2,只可在浮动和右部停靠两种状态间切换，并且不可移动；窗口,3,可实现停靠窗口的各种状态。效果如图,3.2,所示。实例文件见光盘,CH302,。,3.2,停靠窗口,QDockWidget,类,（,1,）新建,Qt Widgets Application,（详见,1.3.1,节），项目名称为,“,DockWindows,”，基类选择“,QMainWindow,”，类名命名为,“,DockWindows,”，取消“创建界面”复选框的选中状态，如图,3.3,所示。,3.2,停靠窗口,QDockWidget,类,（,2,）,DockWindows,类中只有一个构造函数的声明。代码如下：,class DockWindows,:public QMainWindow,Q_OBJECT,public:,DockWindows(QWidget,*parent=0);,DockWindows();,;,（,3,）打开“,dockwindows.cpp,”文件，,DockWindows,类构造函数实现窗口,的,初始化及功能实现，具体代码。,（,4,）在“,dockwindows.cpp,”文件的开始部分加入以下头文件：,#include,#include,（,5,）运行程序，显示效果如图,3.2,所示。,3.3,堆栈窗体,QStackedWidget,类,【例】,（简单）,堆栈窗体,QStackedWidget,类的使用，当选择左侧列表框中不,同的选项时，右侧显示所选的不同的窗体。在此使用列表框,QListWidget,，效果如,图,3.4,所示。,3.3,堆栈窗体,QStackedWidget,类,（,1,）新建,Qt Widgets Application,（详见,1.3.1,节），项目名称为,“,StackedWidget,”，基类选择“,QDialog,”，类名命名为“,StackDlg,”，取消,“创建界面”复选框的选中状态，如图,3.5,所示。,3.3,堆栈窗体,QStackedWidget,类,（,2,）打开“,stackdlg.h,”文件，添加如下加黑代码：,class StackDlg,:public QDialog,Q_OBJECT,public:,StackDlg(QWidget,*parent=0);,StackDlg();,private:,QListWidget,*list;,QStackedWidget,*stack;,QLabel,*label1;,QLabel,*label2;,QLabel,*label3;,;,在文件开始部分添加以下头文件：,#include,#include,#include,3.3,堆栈窗体,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(),方法用于加入需要布局的控件，方法原型如下：,void addWidget,(,QWidget*widget,int fromRow,int fromColumn,int rowSpan,int columnSpan,Qt:Alignment alignment=0,),/,需要插入的控件对象,/,插入的行,/,插入的列,/,表示占用的行数,/,表示占用的列数,/,描述各个控件的对齐方式,3.4,基本布局,（,QLayout,）,addLayout(),方法用于加入子布局，方法原型如下：,void addLayout,(,QLayout*layout,int row,int column,int rowSpan,int columnSpan,Qt:Alignment alignment=0,),/,表示需要插入的子布局对象,/,插入的起始行,/,插入的起始列,/,表示占用的行数,/,表示占用的列数,/,指定对齐方式,3.4,基本布局,（,QLayout,）,【例】,（难度一般）,通过实现一个“用户基本资料修改”的功能表来介绍如,何使用基本布局管理，如,QHBoxLayout,类、,QVBoxLayout,类及,QGridLayout,类，效,果如图,3.7,所示。,3.4,基本布局,（,QLayout,）,本实例共用到四个布局管理器，分别是,LeftLayout,、,RightLayout,、,BottomLayout,和,MainLayout,，其布局框架如图,3.8,所示。,3.4,基本布局,（,QLayout,）,（,1,）新建,Qt Widgets Application,（详见,1.3.1,节），项目名称为,“,UserInfo,”，基类选择“,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,”命令，为了能够在界面上显示,头像图片，请将事先准备好的图片,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,【综合实例】：修改用户资料,最外层是一个分割窗体,QSplitter,，分割窗体的左侧是一个,QListWidget,，右侧,是一个,QVBoxLayout,布局，此布局包括一个堆栈窗体,QStackWidget,和一个按钮布,局。在此堆栈窗体,QStackWidget,中包含三个窗体，每个窗体采用基本布局方式进,行布局管理，如图,3.10,所示。,3.5,【综合实例】：修改用户资料,1,导航页实现,（,1,）新建,Qt Widgets Application,（详见,1.3.1,节），项目名称为“,Example,”，,基类选择“,QDialog,”，取消“创建界面”复选框的选中状态。,（,2,）在如图,3.10,所示的布局框架中，框架左侧的页面（导航页）用,Content,类实现，类名命名为“,Content,”。,打开“,content.h,”头文件，修改,Content,类继承自,QFrame,类，类声明中包含,自定义的三个页面类对象、两,个按钮对象及一个堆栈窗体对象，添加代码。,（,3,）,打开“,Content.cpp,”文件，添加代码。,3.5,【综合实例】：修改用户资料,2,“修改用户基本信息”设计,（,1,）添加该工程的提供主要显示用户基本信息界面的函数所在的文件，在,“,Example,”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件,.,”,菜单项，在弹出的如图,3.11,所示的对话框中选择“,C+Class,”选项，单击,“,Choose.,”按钮。,3.5,【综合实例】：修改用户资料,（,2,）弹出如图,3.12,所示的对话框，在“,Base class,”后面的下拉列表框中选择,基类名“,QWidget,”，在“,Class name,”后面的文本框中输入类的名称,“,BaseInfo,”。,（,3,）,打开“,baseinfo.h,”头文件，添加代码。,（,4,）,打开“,baseinfo.cpp,”文件，添加代码。,3.5,【综合实例】：修改用户资料,3,“显示用户的联系方式”设计,（,1,）添加该工程的提供主要显示用户的联系方式界面的函数所在的文件，,在“,Example,”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件,.,”,菜单项，在弹出的对话框中选择“,C+Class,”选项。单击“,Choose.,”按钮，弹,出对话框，在“,Base class,”后面的下拉列表框中选择基类名“,QWidget,”，在,“,Class name,”后面的文本框中输入类的名称“,Contact,”。,（,2,）单击“下一步”按钮，单击“完成”按钮，添加“,contact.h,”头文件和,“,contact.cpp,”源文件。,（,3,）,打开“,contact.h,”头文件，添加代码。,（,4,）,打开“,contact.cpp,”文件，添加代码。,3.5,【综合实例】：修改用户资料,4,“显示用户的详细资料”设计,（,1,）添加主要显示用户的详细资料界面的函数所在的文件，在“,Example,”,项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件,.,”菜单项，在,弹出的对话框中选择“,C+Class,”选项，单击“,Choose.,”按钮，弹出对话框，,在“,Base class,”后面的下拉列表框中选择基类名“,QWidget,”，在“,Class name,”,后面的文本框中输入类的名称“,Detail,”。,（,2,）单击“下一步”按钮，单击“完成”按钮，添加“,detail.h,”头文件和,“,detail.cpp,”源文件。,（,3,）,打开“,detail.h,”头文件，添加代码。,（,4,）,打开“,detail.cpp,”文件，添加代码。,3.5,【综合实例】：修改用户资料,下面编写该工程的入口函数（所在的文件为,main.cpp,）。,打开“,main.cpp,”,文件，编写代码。,选择“构建”,“构建项目,Example,”菜单项，与上例一样，为了能够在,界面上显示头像图片，将事先准备好的图片,312.png,复制到,D:QtCH3CH305,build-Example-Desktop_Qt_5_4_0_MinGW_32bit-Debug,目录下。,编译此程序，最后运行程序，效果如图,3.9,所示。,