Qt-5开发及实例-第3章-Qt-5布局管理课件.pptx

1、第第3章章 Qt 5布局管理布局管理分割窗口分割窗口QSplitter类类分割窗口分割窗口QSplitter类类【例】【例】（简单）（CH301）一个十分简单的分割窗口功能，整个窗口由三个子窗口组成，各个子窗口之间的大小可随意拖曳改变，效果如图3.1所示。分割窗口分割窗口QSplitter类类本实例采用编写代码的方式实现，具体步骤如下。（1）新建Qt Widgets Application（详见1.3.1节），项目名称为“Splitter”，基类选择“QMainWindow”，取消取消“创建界面”复选框的选中状态。（2）在上述工程的“main.cpp”文件中添加如下代码。其中，其中，(a)QS

2、plitter*splitterMain=new QSplitter(Qt:Horizontal,0)：新建一个QSplitter类对象，作为主分割窗口，设定此分割窗口为水平分割窗口。(b)QTextEdit*textLeft=new QTextEdit(QObject:tr(Left Widget),splitterMain)：新建一个QTextEdit类对象，并将其插入主分割窗口中。(c)textLeft-setAlignment(Qt:AlignCenter)：设定TextEdit中文字的对齐方式(d)QSplitter*splitterRight=new QSplitter(Qt:Ve

3、rtical,splitterMain)：新建一个QSplitter类对象，作为右分割窗口，设定此分割窗口为垂直分割窗口，并以主分割窗口为父窗口。(e)splitterRight-setOpaqueResize(false)：调用setOpaqueResize(bool)方法用于设定分割窗口的分割条在拖曳时是否为实时更新显示，若设为true则实时更新显示，若设为false则在拖曳时只显示一条灰色的粗线条，在拖曳到位并释放鼠标后再显示分割条。默认设置为true。(f)splitterMain-setStretchFactor(1,1)：调用setStretchFactor()方法用于设定可伸缩控

4、件，它的第1个参数用于指定设置的控件序号，控件序号按插入的先后次序从0起依次编号；第2个参数为大于0的值，表示此控件为可伸缩控件。分割窗口分割窗口QSplitter类类（3）在“main.cpp”文件的开始部分加入以下头文件：#include#include#include（4）运行程序，显示效果如图3.1所示。第第3章章 Qt 5布局管理布局管理停靠窗口停靠窗口QDockWidget类类停靠窗口停靠窗口QDockWidget类类停靠窗口QDockWidget类也是在应用程序中经常用到的，设置停靠窗口的一般流程如下。（1）创建一个QDockWidget对象的停靠窗体。（2）设置此停靠窗体的属性

5、，通常调用setFeatures()及setAllowedAreas()两种方法。（3）新建一个要插入停靠窗体的控件，常用的有QListWidget和QTextEdit。（4）将控件插入停靠窗体，调用QDockWidget的setWidget()方法。（5）使用addDockWidget()方法在MainWindow中加入此停靠窗体。停靠窗口停靠窗口QDockWidget类类【例】【例】（简单）（CH302）停靠窗口QDockWidget类的使用：窗口1只可在主窗口的左边和右边停靠；窗口2只可在浮动和右部停靠两种状态间切换，并且不可移动；窗口3可实现停靠窗口的各种状态。效果如图3.2所示。停靠

6、窗口停靠窗口QDockWidget类类（1）新建Qt Widgets Application（详见1.3.1节），项目名称为“DockWindows”，基类选择“QMainWindow”，类名命名为“DockWindows”，取消取消“创建界面”复选框的选中状态，如图3.3所示。停靠窗口停靠窗口QDockWidget类类（2）DockWindows类中只有一个构造函数的声明。位于“dockwindows.h”文件中，代码如下：class DockWindows:public QMainWindow Q_OBJECTpublic:DockWindows(QWidget*parent=0);Doc

7、kWindows();（3）打开“dockwindows.cpp”文件，DockWindows类构造函数实现窗口的初始化及功能实现，具体代码。其中，其中，(a)setFeatures()方法设置停靠窗体的特性，原型如下：void setFeatures(DockWidgetFeatures features)参数QDockWidget:DockWidgetFeatures指定停靠窗体的特性，包括以下几种参数。QDockWidget:DockWidgetClosable：停靠窗体可关闭。QDockWidget:DockWidgetMovable：停靠窗体可移动。QDockWidget:DockW

8、idgetFloatable：停靠窗体可浮动。QDockWidget:AllDockWidgetFeatures：此参数表示拥有停靠窗体的所有特性。QDockWidget:NoDockWidgetFeatures：不可移动、不可关闭、不可浮动。停靠窗口停靠窗口QDockWidget类类(b)setAllowedAreas()方法设置停靠窗体可停靠的区域，原型如下：void setAllowedAreas(Qt:DockWidgetAreas areas)参数Qt:DockWidgetAreas指定停靠窗体可停靠的区域，包括以下几种参数。Qt:LeftDockWidgetArea：可在主窗口的左

9、侧停靠。Qt:RightDockWidgetArea：可在主窗口的右侧停靠。Qt:TopDockWidgetArea：可在主窗口的顶部停靠。Qt:BottomDockWidgetArea：可在主窗口的底部停靠。Qt:AllDockWidgetArea：可在主窗口任意（以上四个）部位停靠。Qt:NoDockWidgetArea：只可停靠在插入处。各区域设定也可采用或(|)的方式进行。（4）在“dockwindows.cpp”文件的开始部分加入以下头文件：#include#include（5）运行程序，显示效果如图3.2所示。第第3章章 Qt 5布局管理布局管理堆栈窗体堆栈窗体QStackedWi

10、dget类类堆栈窗体堆栈窗体QStackedWidget类类【例】【例】（简单）（CH303）堆栈窗体QStackedWidget类的使用，当选择左侧列表框中不同的选项时，右侧显示所选的不同的窗体。在此使用列表框QListWidget，效果如图3.4所示。堆栈窗体堆栈窗体QStackedWidget类类本实例是采用编写代码的方式实现的，具体步骤如下：（1）新建Qt Widgets Application（详见1.3.1节），项目名称为“StackedWidget”，基类选择“QDialog”，类名命名为“StackDlg”，取消取消“创建界面”复选框的选中状态，如图3.5所示。堆栈窗体堆栈窗体

11、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;在文件开始部分添加以下头文件：#include#include#include 堆栈窗体堆栈窗体QStackedWidget类类（3）打开“stackdlg.cpp”文件

12、，在停靠窗体StackDlg类的构造函数中添加如下代码。其中，其中，(a)mainLayout-setStretchFactor(list,1)：设定可伸缩控件，第1个参数用于指定设置的控件（序号从0起编号），第2个参数的值大于0则表示此控件为可伸缩控件。(b)connect(list,SIGNAL(currentRowChanged(int),stack,SLOT(setCurrentIndex(int)：将QListWidget的currentRowChanged()信号与堆栈窗体的setCurrentIndex()槽函数连接起来，实现按选择显示窗体。此处的堆栈窗体index按插入的顺序从

13、0起依次排序，与QListWidget的条目排序相一致。（4）在stackdlg.cpp文件的开始部分加入以下头文件：#include（5）运行程序，显示效果如图3.4所示。第第3章章 Qt 5布局管理布局管理基本布局（基本布局（QLayout）基本布局（基本布局（QLayout）Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理，分别是水平排列布局、垂直排列布局和网格排列布局。各种布局类及继承关系如图3.6所示。基本布局（基本布局（QLayout）布局中常用的方法有addWidget()和addLayout()。addWidget()方法用

14、于加入需要布局的控件，方法原型如下：void addWidget(QWidget*widget,/需要插入的控件对象int fromRow,/插入的行int fromColumn,/插入的列int rowSpan,/表示占用的行数int columnSpan,/表示占用的列数Qt:Alignment alignment=0 /描述各个控件的对齐方式)基本布局（基本布局（QLayout）addLayout()方法用于加入子布局，方法原型如下：void addLayout(QLayout*layout,/表示需要插入的子布局对象int row,/插入的起始行int column,/插入的起始列in

15、t rowSpan,/表示占用的行数int columnSpan,/表示占用的列数Qt:Alignment alignment=0 /指定对齐方式)基本布局（基本布局（QLayout）【例】【例】（难度一般）（CH304）通过实现一个“用户基本资料修改”的功能表单来介绍如何使用基本布局管理，如QHBoxLayout类、QVBoxLayout类及QGridLayout类，效果如图3.7所示。基本布局（基本布局（QLayout）本实例共用到四个布局管理器，分别是LeftLayout、RightLayout、BottomLayout和MainLayout，其布局框架如图3.8所示。基本布局（基本布局

16、（QLayout）（1）新建Qt Widgets Application（详见1.3.1节），项目名称为“UserInfo”，基类选择“QDialog”，取消取消“创建界面”复选框的选中状态。（2）打开“dialog.h”头文件，在头文件中声明对话框中的各个控件。添加如下代码。添加如下头文件：#include#include#include#include#include（3）打开“dialog.cpp”文件，在类Dialog的构造函数中添加如下代码。基本布局（基本布局（QLayout）其中，其中，(a)OtherLabel-setFrameStyle(QFrame:Panel|QFrame:

17、Sunken)：设置控件的风格。setFrameStyle()是QFrame的方法，参数以或(|)的方式设定控件的面板风格，由形状(QFrame:Shape)和阴影(QFrame:shadow)两项配合设定。其中，形状包括六种，分别是NoFrame、Panel、Box、HLine、VLine及WinPanel；阴影包括三种，分别是Plain、Raised和Sunken。(b)LeftLayout=new QGridLayout()：左部布局，由于此布局管理器不是主布局管理器，所以不用指定父窗口。(c)LeftLayout-setColumnStretch(0,1)、LeftLayout-set

18、ColumnStretch(1,3)：设定两列分别占用空间的比例，本例设定为1:3。即使对话框框架大小改变了，两列之间的宽度比依然保持不变。(d)ButtomLayout-addStretch()：在按钮之前插入一个占位符，使两个按钮能够靠右对齐，并且在整个对话框的大小发生改变时，保证按钮的大小不发生变化。(e)QGridLayout*mainLayout=new QGridLayout(this)：实现主布局，指定父窗口this，也可调用this-setLayout(mainLayout)实现。(f)mainLayout-setSizeConstraint(QLayout:SetFixedS

19、ize)：设定最优化显示，并且使用户无法改变对话框的大小。所谓最优化显示，即控件都按其sizeHint()的大小显示。基本布局（基本布局（QLayout）（4）在“dialog.cpp”文件的开始部分加入以下头文件：#include#include#include#include#include#include#include#include（5）选择“构建”“构建项目UserInfo”命令，为了能够在界面上显示头像图片，请将事先准备好的图片312.png复制到D:QtCH3CH304build-UserInfo-Desktop_Qt_5_11_1_MinGW_32bit-Debug目录下，再

20、重新构建项目。运行程序，显示效果如图3.7所示。第第3章章 Qt 5布局管理布局管理【综合实例】（【综合实例】（CH305）：修改用户资料）：修改用户资料【综合实例】（【综合实例】（CH305）：修改用户资料）：修改用户资料通过实现修改用户资料功能这一综合实例，介绍如何使用布局方法实现一个复杂的窗口布局，如何使用分割窗口，以及如何使用堆栈窗体。实例效果如图3.9所示。（a）“基本信息”页面【综合实例】（【综合实例】（CH305）：修改用户资料）：修改用户资料（b）“联系方式”页面【综合实例】（【综合实例】（CH305）：修改用户资料）：修改用户资料（c）“详细资料”页面【综合实例】（【综合实例

21、】（CH305）：修改用户资料）：修改用户资料最外层是一个分割窗体QSplitter，分割窗体的左侧是一个QListWidget，右侧是一个QVBoxLayout布局，此布局包括一个堆栈窗体QStackWidget和一个按钮布局。在此堆栈窗体QStackWidget中包含三个页面，每个页面采用基本布局方式进行布局管理，如图3.10所示。1导航页实现导航页实现（1）新建Qt Widgets Application（详见1.3.1节），项目名称为“Example”，基类选择“QDialog”，类名命名为“Content”，取消取消“创建界面”复选框的选中状态。（2）在如图3.10所示的布局框架中，

22、框架左侧的页面（导航页）就用Content类来实现。打开“content.h”头文件，修改Content类继承自QFrame类，类声明中包含自定义的三个页面类对象、两个按钮对象及一个堆栈窗体对象，添加如下代码：/添加的头文件#include#include#include baseinfo.h#include contact.h#include detail.hclass Content:public QFrameQ_OBJECTpublic:Content(QWidget*parent=0);Content();QStackedWidget*stack;QPushButton*AmendBt

23、n;QPushButton*CloseBtn;BaseInfo *baseInfo;Contact*contact;Detail*detail;1导航页实现导航页实现（3）打开“Content.cpp”文件，添加如下代码：Content:Content(QWidget*parent):QFrame(parent)stack=new QStackedWidget(this);/创建一个QStackedWiget对象/对堆栈窗口的显示风格进行设置 stack-setFrameStyle(QFrame:Panel|QFrame:Raised);/*插入三个页面*/(a)baseInfo=new Ba

24、seInfo();contact=new Contact();detail=new Detail();stack-addWidget(baseInfo);stack-addWidget(contact);stack-addWidget(detail);/*创建两个按钮*/(b)AmendBtn=new QPushButton(tr(修改);CloseBtn=new QPushButton(tr(关闭);QHBoxLayout*BtnLayout=new QHBoxLayout;BtnLayout-addStretch(1);BtnLayout-addWidget(AmendBtn);BtnLa

25、yout-addWidget(CloseBtn);/*进行整体布局*/QVBoxLayout*RightLayout=new QVBoxLayout(this);RightLayout-setMargin(10);RightLayout-setSpacing(6);RightLayout-addWidget(stack);RightLayout-addLayout(BtnLayout);1导航页实现导航页实现其中，其中，(a)baseInfo=new BaseInfo()至至stack-addWidget(detail)：这段代码是在堆栈窗口中顺序插入“基本信息”“联系方式”“详细资料”三个页

26、面。其中，BaseInfo类的具体完成代码参照3.4节，后两个与此类似。(b)AmendBtn=new QPushButton(tr(修改修改)至至BtnLayout-addWidget(CloseBtn)：这段代码用于创建两个按钮，并利用QHBoxLayout对其进行布局。2“修改用户基本信息修改用户基本信息”设计设计（1）添加该工程的提供主要显示用户基本信息界面的函数所在的文件，在“Example”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件.”选项，在弹出的如图3.11所示的对话框中选择“C+Class”选项，单击“Choose.”按钮。2“修改用户基本信息修改用户基本信息”

27、设计设计（2）弹出如图3.12所示的对话框，在“Base class”下拉列表框中选择基类名为“QWidget”，在“Class name”的文本框中输入类的名称“BaseInfo”。单击“下一步”按钮，单击“完成”按钮，添加“baseinfo.h”头文件和“baseinfo.cpp”源文件。（3）打开“baseinfo.h”头文件，添加的代码（具体解释请参照3.4节）。（4）打开“baseinfo.cpp”文件，添加如下代码（具体解释请参照3.4节）。3“显示用户的联系方式显示用户的联系方式”设计设计（1）添加该工程的提供主要显示用户的联系方式界面的函数所在的文件，在“Example”项目名

28、上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件.”选项，在弹出的对话框中选择“C+Class”选项。单击“Choose.”按钮，在弹出的对话框的“Base class”的下拉列表框中选择基类名为“QWidget”，在“Class name”文本框中输入类的名称“Contact”。（2）单击“下一步”按钮，单击“完成”按钮，添加“contact.h”头文件和“contact.cpp”源文件。（3）打开“contact.h”头文件，添加如下代码。（4）打开“contact.cpp”文件，添加如下代码。4“显示用户的详细资料显示用户的详细资料”设计设计（1）添加主要显示用户的详细资料界面的函数所

29、在的文件，在“Example”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件.”选项，在弹出的对话框中选择“C+Class”选项，单击“Choose.”按钮，在弹出的对话框的“Base class”的下拉列表框中选择基类名为“QWidget”，在“Class name”后面的文本框中输入类的名称“Detail”。（2）单击“下一步”按钮，单击“完成”按钮，添加“detail.h”头文件和“detail.cpp”源文件。（3）打开“detail.h”头文件，添加如下代码。（4）打开“detail.cpp”文件，添加如下代码。5编写主函数编写主函数下面编写该工程的入口函数（所在的文件为m

30、ain.cpp）。打开“main.cpp”文件，编写以下代码。其中，其中，(a)QListWidget*list=new QListWidget(splitterMain)：在新建的水平分割窗的左侧窗口中插入一个QListWidget作为条目选择框，并在此依次插入“基本信息”“联系方式”“详细资料”条目。(b)Content*content=new Content(splitterMain)：在新建的水平分割窗的右侧窗口中插入Content类对象。(c)QObject:connect(list,SIGNAL(currentRowChanged(int),content-stack,SLOT(setCurrentIndex(int)：连接列表框的currentRowChanged()信号与堆栈窗口的setCurrentIndex()槽函数。选择“构建”“构建项目Example”菜单项，与上例一样，为了能够在界面上显示头像图片，将事先准备好的图片312.png复制到D:QtCH3CH305build-Example-Desktop_Qt_5_11_1_MinGW_32bit-Debug目录下。编译此程序，最后运行程序，效果如图3.9所示。