C＋Qt笔记009：基本布局

依法编程Autocodes

欢迎各位小伙伴关注”依法编程“，一起交流

目录

C++Qt笔记009：基本布局（QLayout） 1

一、基本布局概述 2

二、常用的布局方法 2

三、基本布局项目案例 3

（一）项目功能 3

（二）设计分析 3

（三）程序注释 7

一、基本布局概述

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

二、常用的布局方法

布局中，常用的方法有addWidget()和addLayout()。

1、addWidget()方法用于加入需要布局的控件，方法原型如下：

voidaddWidget

(

QWidget*widget,//需要插入的控件对象

intfromRow,//插入的行

intfromColumn,//插入的列

introwSpan,//表示占用的行数

intcolumnSpan,//表示占用的列数

Qt::Alignmentalignment=//描述各个控件的对齐方式

)

2、addLayout ()方法用于加入子布局，方法原型如下：

voidaddLayout

(

QLayout*layout,//表示需要插入的子布局对象

introw,//插入的起始行

intcolumn,//插入的起始列

introwSpan,//表示占用的行数

intcolumnSpan,//表示占用的列数

Qt::Alignmentalignment=//指定对齐方式

)

三、基本布局项目案例

（一）项目功能

通过实现一个“用户基本资料修改”的功能表来介绍如何使用基本布局管理，如QHBoxLayout类、QVBoxLayout类及QGridLayout类，效果如图。

（二）设计分析

1、本实例共用到四个布局管理器，分别是LeftLayout、RightLayout、BottomLayout和MainLayout，其布局框架如图所示。

2、新建Qt Widgets Application，项目名称为“UserInfo”，基类选择“QDialog”，取消“创建界面”复选框的选中状态。

3、打开“dialog.h”头文件，在头文件中声明对话框中的各个控件，添加代码。

dialog.h文件

#ifndefDIALOG_H

#defineDIALOG_H

//源代码编码必须是:UTF-8(BOM)

#if_MSC_VER>=1600

#pragmaexecution_character_set("utf-8")

#endif

#include

#include

#include

#include

#include

#include

#include

classDialog:publicQDialog

{

Q_OBJECT

public:

Dialog(QWidget*parent=);

~Dialog();

private:

//左侧

QLabel*UserNameLabel;//用户名

QLabel*NameLabel;//姓名

QLabel*SexLabel;//性别

QLabel*DepartmentLabel;//部门

QLabel*AgeLabel;//年龄

QLabel*OtherLabel;//备注

QLineEdit*UserNameLineEdit;//用户名输入区

QLineEdit*NameLineEdit;//姓名输入区

QComboBox*SexComboBox;//性别选择区

QTextEdit*DepartmentTextEdit;//部门输入区

QLineEdit*AgeLineEdit;//年龄输入区

QGridLayout*LeftLayout;//表格布局管理器

//右侧

QLabel*HeadLabel;//头像标签

QLabel*HeadIconLabel;//头像显示

QPushButton*UpdateHeadBtn;//更新按钮

QHBoxLayout*TopRightLayout;//水平布局

QLabel*IntroductionLabel;//个人说明标签

QTextEdit*IntroductionTextEdit;//个人说明输入框

QVBoxLayout*RightLayout;//垂直布局

//底部

QPushButton*OKBtn;//确定按钮

QPushButton*CancelBtn;//取消按钮

QHBoxLayout*ButtomLayout;//水平布局

};

#endif//DIALOG_H

dialog.cpp

#include"dialog.h"

#include

Dialog::Dialog(QWidget*parent)

:QDialog(parent)

{

setWindowTitle("UserInfo");

/**************左侧**************/

UserNameLabel=newQLabel("用户名");

UserNameLineEdit=newQLineEdit;

NameLabel=newQLabel("姓名");

NameLineEdit=newQLineEdit;

SexLabel=newQLabel("性别");

SexComboBox=newQComboBox;

SexComboBox->addItem("女");

SexComboBox->addItem("男");

DepartmentLabel=newQLabel("部门");

DepartmentTextEdit=newQTextEdit;

AgeLabel=newQLabel("年龄");

AgeLineEdit=newQLineEdit;

OtherLabel=newQLabel("备注");

OtherLabel->setFrameStyle(QFrame::Panel|QFrame::Sunken);

LeftLayout=newQGridLayout;//表格布局管理器

//向布局中加入需要布局的控件

LeftLayout->addWidget(UserNameLabel,,);

LeftLayout->addWidget(UserNameLineEdit,,1);

LeftLayout->addWidget(NameLabel,1,);

LeftLayout->addWidget(NameLineEdit,1,1);

LeftLayout->addWidget(SexLabel,2,);

LeftLayout->addWidget(SexComboBox,2,1);

LeftLayout->addWidget(DepartmentLabel,3,);

LeftLayout->addWidget(DepartmentTextEdit,3,1);

LeftLayout->addWidget(AgeLabel,4,);

LeftLayout->addWidget(AgeLineEdit,4,1);

LeftLayout->addWidget(OtherLabel,5,,1,2);

LeftLayout->setColumnStretch(,1);

LeftLayout->setColumnStretch(1,3);

/**************右侧**************/

HeadLabel=newQLabel("头像:");

HeadIconLabel=newQLabel;

QPixmapicon("312.png");

HeadIconLabel->setPixmap(icon);

HeadIconLabel->resize(icon.width(),icon.height());

UpdateHeadBtn=newQPushButton("更新");

//完成右上侧头像选择区的布局

TopRightLayout=newQHBoxLayout();

TopRightLayout->setSpacing(20);//设定各个控件之间的间距是20

TopRightLayout->addWidget(HeadLabel);

TopRightLayout->addWidget(HeadIconLabel);

TopRightLayout->addWidget(UpdateHeadBtn);

IntroductionLabel=newQLabel("个人说明");

IntroductionTextEdit=newQTextEdit;

//完成右侧的布局

RightLayout=newQVBoxLayout();

RightLayout->setMargin(10);

RightLayout->addLayout(TopRightLayout);

RightLayout->addWidget(IntroductionLabel);

RightLayout->addWidget(IntroductionTextEdit);

/**************底部**************/

OKBtn=newQPushButton("确定");

CancelBtn=newQPushButton("取消");

//完成下方两个按钮的布局

ButtomLayout=newQHBoxLayout();

ButtomLayout->addStretch();

ButtomLayout->addWidget(OKBtn);

ButtomLayout->addWidget(CancelBtn);

QGridLayout*mainLayout=newQGridLayout(this);

mainLayout->setMargin(15);

mainLayout->setSpacing(10);

mainLayout->addLayout(LeftLayout,,);

mainLayout->addLayout(RightLayout,,1);

mainLayout->addLayout(ButtomLayout,1,,1,2);

mainLayout->setSizeConstraint(QLayout::SetFixedSize);

}

Dialog::~Dialog()

{

}

（三）程序注释

【1】第8行，设定窗口标题；

【2】第11-23行，实例化左侧控件；

【3】第24行，OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);

设置控件的风格。

setFrameStyle()是QFrame的方法，参数以或的方式设定控件的面板风格，由形状(QFrame::Shape)和阴影(QFrame::Shadow)两项配合设定。其中，形状有NoFrame, Panel,Box,HLine,VLine以及WinPanel 6种，阴影有Plain, Raised和Sunken 3种。

【4】第25行定义一个QGridLayout表格布局管理器对象LeftLayout，由于此布局管理器并不是主布局管理器，因此不用指定父窗口，最后由主布局管理器统一指定。在定义代码中，可以不必为各个控件指定父窗口，使用布局管理会自动指定布局管理下的所有控件的父窗口。

【5】第28-38行，向左侧布局中加入需要布局的控件。

QGridLayout类的addWidget()方法用来向布局中加入需布局的控件，addWidget()的函数原型如下：

addWidget (QWidget)

addWidget (QWidget, int, int, Qt.Alignment alignment = 0)

addWidget (QWidget, int, int, int, int, Qt.Alignment alignment = 0)

QWidget参数为需插入的控件对象，后面的两个int参数为插入的行和列，再后面两上int参数为跨度的行数和跨度的列数，alignment参数描述各控件的对齐方式。

【6】第39、40行，设定两列分别占用的空间的比例，此处设定两列的空间比为1:3。即使对话框框架大小改变了，两列之间的宽度比依然保持不变。

LeftLayout->setColumnStretch(0,1);

LeftLayout->setColumnStretch(1,3);

【7】第43-54行实现对话框右上侧的头像选择区的布局，此处采用一个QHBoxLayout类进行布局管理。QHBoxLayout默认采取自左向右的方式顺序排列插入的控件，也可通过调用setDirection()方法设定排列的顺序，例如：

hLayout.setDirection(QBoxLayout.RightToLeft)

第45行，需要提前将图片保存在build-UserInfo-Desktop_Qt_5_10_1_MSVC2017_64bit-Debug文件中。

【8】第51行调用QLayout的setSpacing()方法设定各个控件之间的间距为20。

【9】第59-63行代码实现对话框右侧的布局。由一个QVBoxLayout实现布局，QVBoxLayout默认自上而下顺序排列插入的控件或子布局，也可通过setDirection()方法改变排列的顺序。由于右侧上部的头像选择区已使用布局，因此第61行调用addLayout()方法在布局中插入子布局。

【10】第69-72行代码实现对话框下方两个按钮的布局，采用QHBoxLayout实现。

【11】第70行调用addStretch()方法在按钮之前插入一个占位符，使两个按钮能靠右对齐。并且在整个对话框的大小发生改变时，保证按钮的大小不发生变化。合理使用addStretch()能让界面的布局效果增色不少。

【12】第74行，QGridLayout *mainLayout=new QGridLayout(this);

最后实现主布局，用一个QGridLayout实现，并在定义主布局时指定父窗口this，也可调用this-> setLayout(mainLayout)。

【13】第75行设定对话框的边距为15。

【14】第77、78行插入的子布局占用了两列，使用的函数方法和前面的是一样的，也调用addLayout()方法，只是参数不同，原型如下：

addLayout (QLayout, int, int, int, int, Qt.Alignment alignment = 0)

QLayout参数为需插入的控件对象，后面的两个int参数为插入的行和列，再后面两上int参数为跨度的行数和跨度的列数，alignment参数描述各控件的对齐方式。

【15】最后，第81行设定对话框的控件总是最优化显示，并且用户无法改变对话框的大小，所谓最优化显示，即控件都按其sizeHint()的大小显示。