第4章布局管理19

第4章布局管理4.1

分割窗口QSplitter类4.2

停靠窗口QDockWidget类4.3

堆栈窗体QStackedWidget类4.4

基本布局（QLayout）窗体上的所有的控件必须有一个合适的尺寸和位置。Qt提供了一些类负责排列窗体上的控件，主要有：QHBoxLayout，QVBoxLayout，QGridLayout，QStackLayout。其他能够进行布局管理的类还有QSplitter，QScrollArea，QMainWindow，QWorkspace。这些类的共同特点是提供了更加灵活的布局管理，在一定程度上用户能够控制窗体内控件的大小。例如，QSplitter

类显示一个分隔条（splitterbar），用户拖动分隔条时就可以改变控件的大小。QWorkspace

提供了对多文档（MDI，multipledocumentinterface）的支持使用这些Qt布局管理类的另一个原因是，在程序改变字体，语言或者在不同的平台上运行时，布局管理器能够自动调整窗体里所有控件的大小和尺寸4.1分割窗口QSplitter类下面介绍一个十分简单的分割窗口功能，整个对话框由3个窗口组成，各窗口之间的大小可随意拖动改变，效果如图4.1所示。一个QSplitter

控件中可以包含其他控件，这些控件被一个分隔条隔开，托拽这个分隔条，里面的控件的大小可以改变。QSplitter

控件经常做为布局管理器使用，给用户提供更多的界面控制。QSplitter

控件中的子控件总是按顺序自动水平排列（或者上下排列）。相邻的控件之间有一个分隔条这个例子中的窗体有一个QSplitter

控件，其中有三个水平排列的QTextEdit

控件，和布局管理器不同，QSplitter

不但可以排列子控件，还有一个可视的外观，QSplitter

控件从QWidget继承，拥有QWidget

所有的功能。int

main(int

argc,char*argv[]){QApplication

app(argc,argv);QTextEdit*editor1=newQTextEdit;QTextEdit*editor2=newQTextEdit;QTextEdit*editor3=newQTextEdit;QSplitter

splitter(Qt::Horizontal);splitter.addWidget(editor1);splitter.addWidget(editor2);splitter.addWidget(editor3);...splitter.show();returnapp.exec();}QtDesigner也支持QSplitter。把子控件放到合适的位置，把他们选中，选择菜单Form|LayoutHorizontallyinSplitter

或者Form|LayoutVerticalllyinSplitter，所选择的子控件就被加入到QSplitter

控件中。对QSplitter

进行水平或者垂直嵌套可以实现更加复杂的布局。例如，图

所示的MailClient程序中，就是一个垂直方向的QSplitter

控件中嵌套了一个水平方向的QSplitter

控件。111创建完我们所需要显示三个控件（messageTreeWidget，textEdit，foldersTreeWidget）后，我们创建一个垂直的QSplitter，rightSplitter

控件，把messageTreeWidget

和textEdit控件加到rightSplitter

中。然后创建一个水平的QSplitter，mainSplitter

控件，把rightSplitter

和foldersTreeWidget

加入到mainSplitter

中。把mainSplitter

做为QMainWindow

的中央控件。下面的代码是MailClient

程序的主窗口类构造函数代码：MailClient::MailClient(){...rightSplitter=newQSplitter(Qt::Vertical);rightSplitter->addWidget(messagesTreeWidget);rightSplitter->addWidget(textEdit);rightSplitter->setStretchFactor(1,1);mainSplitter=newQSplitter(Qt::Horizontal);mainSplitter->addWidget(foldersTreeWidget);mainSplitter->addWidget(rightSplitter);mainSplitter->setStretchFactor(1,1);setCentralWidget(mainSplitter);setWindowTitle(tr("MailClient"));readSettings();}当用户改变窗口的大小时，QSplitter

通常给所有的子控件一样的空间。在MailClient

程序中，我们希望左边的文件树控件（foldersTreeWidget）和消息树控件（messageTreeWidget）保持它们的大小，把其他的空间都分配给QTextEdit。这由两个setStretchFactor()调用实现。第一个参数是0开始的子控件的索引值，第二个参数为我们设置的拉伸系数，缺省值为0。4.1分割窗口QSplitter类(1)创建一个工程，创建过程在第2章中已经详细介绍过，在这里就不在赘述。需要注意的是，创建过程在“Qt4GuiApplication”界面中，BaseClass选择“QMainwindow”选项，取消“Gernerateform”复选框的选中状态。(2)在上述工程的main.cpp文件中添加如下灰色背景代码。P89(3)在main.cpp文件的开始部分加入以下头文件：#include<Qsplitter>#include<QTextEdit>#include<QTextCodec>(4)运行程序，显示效果如图4.1所示。函数说明：P89-90可停靠控件能够停靠在QMainWindow

中或者作为一个独立窗口浮动。QMainWindow

提供了四个可停靠控件的地方：上方，下方，左方，右方。在Qt中，可停靠窗口是QDockWidget的一个实例。每一个可停靠控件都有一个标题条。用户可以拖动标题栏把窗口从一个可停靠区域移动到另一个可停靠区域。拖动标题栏把窗口移动到不能停靠的区域，窗口就浮动为一个独立的窗口。自由浮动的窗口总是在主窗口的上面。用户点击标题栏上的关闭按钮可以关闭QDockWidget。调用QDockWidget::setFeatures()能够设置以上这些属性。4.2停靠窗口QDockWidget类停靠窗口QDockWidget类也是应用程序中经常用到的，设置停靠窗口的一般流程为：(1)创建一个QDockWidget对象的停靠窗体。(2)设置此停靠窗体的属性，通常调用setFeatures()及setAllowedAreas()两种方法(P92)。(3)新建一个要插入停靠窗体的控件，常用的一般为QListWidget和QTextEdit。(4)把控件插入停靠窗体，调用QDockWidget的setWidget()方法。(5)使用addDockWidget()方法在MainWidow中加入此停靠窗体。4.2停靠窗口QDockWidget类下面通过一个简单的例子来学习停靠窗口QDockWidget类的使用，效果如图4.2所示。窗口1只可在主窗口的左边和右边停靠；窗口2只可在浮动和右部停靠两种状态间切换，并且不可移动；窗口3可实现停靠窗口的各个状态。4.2停靠窗口QDockWidget类(1)创建一个工程，创建过程中在“Qt4GuiApplication”界面中“BaseClass”下拉列表框中选择“QMainwindow”选项，停靠窗口DockWindows类继承自QMainWindow类，停靠窗口只在主窗口QMainWindow中使用。因此，在“Classname”后面的文本框中输入“DockWindows”，取消“Gernerateform”复选框的选中状态，如图4.3所示。4.2停靠窗口QDockWidget类(2)DockWindows类说明中只有一个构造函数的说明。代码如下：classDockWindows:publicQMainWindow{Q_OBJECTpublic:

DockWindows(QWidget*parent=0);~DockWindows();};(3)打开“dockwindows.cpp”文件，DockWindows类构造函数实现窗口的初始化及功能实现，具体代码。P92(4)在dockwindows.cpp文件的开始部分加入以下头文件：#include<QTextEdit>#include<QDockWidget>(5)运行程序，显示效果如图4.2所示。QStackedLayout

类把子控件进行分组或者分页，一次只显示一组或者一页，隐藏其他组或者页上的控件。QStackedLayout

本身并不可见，对换页也不提供本质的支持。为了方便起见，Qt还提供了类QStackedWidget，这个类的布局管理器为QStackedLayout。创建一个QListWidget，它的每一项为一个控件页的名字。然后创建一个QStackedLayout，调用addWidget()把每一页的控件加入到布局中。连接QListWidget

的信号currentRowChanged(int)和QStackedLayout

的函数setCurrentIndex(int)连接，改变QListWidget

的当前项时换页。最后调用QListWidget

把开始页设置为0。这样的对话框使用QtDesigner会更加简单：1.用“Dialog”或者“Widget”模板创建一个窗体、2.在窗体上增加一个QListWidget

和一个QStackedWidget

控件。3.给每一页添加子控件，子控件按布局排列好（右击QStackedWidget

控件，选择InsertPage菜单便可创建一个新页。点击右上角的左右键头，可以在页和页之间切换）。4.把QListWidget

和QStackedWidget

用水平布局管理。5.连接QListWidget

控件的currentRowChanged(int)信号和QStackedWidget

控件的槽setCurrentIndex(int)。6.设置当前QListWidget

控件的currentRow

属性为0。在QtDesigner中预览时，点击列表控件中不同的项目，窗体就会换为不同的页。4.3堆栈窗体QStackedWidget类下面通过一个简单的例子来学习堆栈窗体QStackedWidget类的使用，当选择左侧列表框中不同的选项时，右侧显示所选的不同的窗体。在此使用列表框QListWidget，效果如图4.4所示。4.3堆栈窗体QStackedWidget类(1)创建一个工程，创建过程中在“Qt4GuiApplication”界面中选择“BaseClass”下拉列表框中“QDialog”选项，停靠窗体StackDlg类继承自QDialog类，并声明所用到的控件。因此，在“Classname”后面的文本框中输入“StackDlg”，取消“Gernerateform”复选框的选中状态，如图4.5所示。4.3堆栈窗体QStackedWidget类(2)打开stackdlg.h文件，添加如下加黑代码：classStackDlg:publicQDialog{Q_OBJECTpublic:StackDlg(QWidget*parent=0);~StackDlg();private:QListWidget*list;QStackedWidget*stack;QLabel*label1;QLabel*label2;QLabel*label3;};在文件开始部分添加以下头文件：#include<QListWidget>#include<QStackedWidget>#include<QLabel>4.3堆栈窗体QStackedWidget类(3)打开stackdlg.cpp文件，在停靠窗体StackDlg类的构造函数中添加代码。P95(4)在stackdlg.cpp文件的开始部分加入以下头文件：#include<QHBoxLayout>(5)运行程序，显示效果如图4.4所示。这样的对话框使用QtDesigner会更加简单：1.用“Dialog”或者“Widget”模板创建一个窗体、2.在窗体上增加一个QListWidget

和一个QStackedWidget

控件。3.给每一页添加子控件，子控件按布局排列好（右击QStackedWidget

控件，选择InsertPage菜单便可创建一个新页。点击右上角的左右键头，可以在页和页之间切换）。4.把QListWidget

和QStackedWidget

用水平布局管理。5.连接QListWidget

控件的currentRowChanged(int)信号和QStackedWidget

控件的槽setCurrentIndex(int)。6.设置当前QListWidget

控件的currentRow

属性为0。在QtDesigner中预览时，点击列表控件中不同的项目，窗体就会换为不同的页。第4章布局管理4.1

分割窗口QSplitter类4.2

停靠窗口QDockWidget类4.3

堆栈窗体QStackedWidget类4.4

基本布局（QLayout）管理窗体上控件最简单的方法就是使用Qt的布局管理类。这些类能够给出所有类型控件的默认值，能够根据控件的字体，样式，内容得到不同的控件的sizeHint。布局管理类能够得到控件的最大，最小尺寸，在字体，内容或者窗口改变时自动调整布局。QHBoxLayout，QVBoxLayout，QGridLayout

是三个最重要的布局管理器，这些类从QLayout

继承，QLayout

提供布局最基本的框架。这三个类可以在代码中使用，也可以在QtDesigner

中使用4.4基本布局（QLayout）Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理，分别是水平排列布局、垂直排列布局和网格排列布局。它们之间的继承关系如图4.6所示。QHBoxLayout

和QVBoxLayout

的使用很简单，QGridLayout

有点复杂。QGridLayout

工作的基础是一个二维的单元格4.4基本布局（QLayout）布局中常用的方法有addWidget()和addLayout()。addWidget()方法用来向布局中加入需布局的控件，addWidget()的函数原型如下：voidaddWidget(QWidget*widget, //为需插入的控件对象int

fromRow, //为插入的行int

fromColumn, //为插入的列int

rowSpan, //表示占用的行数int

columnSpan, //表示占用的列数Qt::Alignmentalignment=0 //描述各控件的对齐方式)4.4基本布局（QLayout）addLayout()方法用来向布局中加入需布局的子布局，addLayout()的函数原型如下：voidaddLayout(QLayout*layout, //表示要插入的子布局对象introw, //插入的起始行intcolumn, //插入的起始列int

rowSpan, //表示占用的行数int

columnSpan, //表示占用的列数Qt::Alignmentalignment=0 //指定对齐方式)补充：函数addStretch()使布局管理器在指定的位置留出一块空间。例中，布局管理器在“确定”按钮和“取消”按钮前留出一个额外的空隙。P100在QtDesigner中，我们可以加入一个spacer实现这一功能，在QtDesigner中，spacer表现为蓝色的弹簧式折线。补充：也可以使用QtDesigner实现，首先把所有的子控件放置在近似适当的位置，选择需要布局管理器一同管理的控件(或者布局)，点击Form|LayoutHorizontally，Form|LayoutVertically或者Form|LayoutinaGrid。通过属性设置布局管理器拖拽操作等4.4基本布局（QLayout）本小节将通过实现一个“用户基本资料修改”的功能来介绍如何使用基本布局管理，如QHBoxLayout类、QVBoxLayout类及QGridLayout类，效果如图4.7所示。4.4基本布局（QLayout）本实例共用到5个布局管理器，分别是LeftLayout、TopRightLayout、RightLayout、BottomLayout和MainLayout，其布局框架如图4.8所示。TopRightLayout用QHBoxLayout实现4.4基本布局（QLayout）(1)创建一个工程，在创建过程中，创建过程中在“Qt4GuiApplication”界面中，选择“BaseClass”下拉列表框中“QDialog”选项，取消“Gernerateform”复选框的选中状态。(2)打开“dialog.h”头文件，在头文件中声明对话框中的各个控件。添加代码P98。接着添加如下的头文件：#include<QLabel>#include<QLineEdit>#include<QComboBox>#include<QTextEdit>#include<QGridLayout>4.4基本布局（QLayout）(3)打开“dialog.cpp”文件，在类Dialog的构造函数中添加代码

P98。(4)在dialog.cpp文件的开始部分加入以下头文件：#include<QLabel>#include<QLineEdit>#include<QComboBox>#include<QPushButton>#include<QFrame>#include<QGridLayout>#include<QPixmap>#include<QHBoxLayout>4.4基本布局（QLayout）(5)打开main.cpp文件，在主函数中添加以下加黑代码：int

main(int

argc,char*argv[]){

QApplication

a(argc,argv);

QTextCodec::setCodecForTr(QTextCodec::codecForLocale());

//在窗口中显示中文Dialogw;

w.sho