学习QT之基本布局

Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理，分别是水平排列布局、垂直排列布局和网格排列布局。各种布局类及继承关系如下图所示：

 

注意：QHBoxLayout默认采取的是以自左向右的方式顺序插入控件或子布局，也可以通过调用setDirection()方法设定排列的顺序（如：layout->setDirection(QBoxLayout::RightToLeft)）。QVBoxLayout默认采取的是以自上而下的方式顺序插入控件或子布局，也可通过调用setDirection()方法设定排列的顺序。

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

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

void addWidget
(
QWidget *widget, //需要插入的控件对象
int fromRow, //插入的行
int fromColumn, //插入的列
int rowSpan, //表示占用的行数
int columnSpan, //表示占用的列数
Qt::Allignment alignment=0 //描述各个控件的对齐方式
)

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

void addLayout
(
QLayout *layout, //表示需要插入的子布局对象
int row, //插入的起始行
int column, //插入的起始列
int rowSpan, //表示占用的行数
int columnSpan, //表示占用的列数
Qt::Alignment alignment=0 //指定对齐方式
)

Qt免费学习基地：C/C++项目实战/Qt5/C语言/c++/数据库/OpenCV/MFC/QT项目-学习视频教程-腾讯课堂

下面通过一个实例来详细说明：

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

 

//头文件

#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPushButton>
class Dialog : public QDialog
{
Q_OBJECT
public:
Dialog(QWidget *parent = 0);
~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

//源文件

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
setWindowTitle(tr("UserInfo"));
/*************左侧************************/
UserNameLabel = new QLabel(tr("用户名："));
UserNameLineEdit = new QLineEdit;
NameLabel = new QLabel(tr("姓名："));
NameLineEdit = new QLineEdit;
SexLabel = new QLabel(tr("性别："));
SexComboBox = new QComboBox;
SexComboBox->addItem(tr("女"));
SexComboBox->addItem(tr("男"));
DepartmentLabel = new QLabel(tr("部门："));
DepartmentTextEdit = new QTextEdit;
AgeLabel = new QLabel(tr("年龄："));
AgeLineEdit = new QLineEdit;
otherLabel = new QLabel(tr("备注"));
otherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);//(a)
LeftLayout = new QGridLayout();//(b)
//向布局中加入需要的控件
LeftLayout->addWidget(UserNameLabel,0,0);
LeftLayout->addWidget(UserNameLineEdit,0,1);
LeftLayout->addWidget(NameLabel,1,0);
LeftLayout->addWidget(NameLineEdit,1,1);
LeftLayout->addWidget(SexLabel,2,0);
LeftLayout->addWidget(SexComboBox,2,1);
LeftLayout->addWidget(DepartmentLabel,3,0);
LeftLayout->addWidget(DepartmentTextEdit,3,1);
LeftLayout->addWidget(AgeLabel,4,0);
LeftLayout->addWidget(AgeLineEdit,4,1);
LeftLayout->addWidget(otherLabel,5,0,1,2);
LeftLayout->setColumnStretch(0,1);//(c)
LeftLayout->setColumnStretch(1,3);
/*************右侧************************/
HeadLabel = new QLabel(tr("头像："));
HeadIconLabel = new QLabel;
QPixmap icon("321.png");//图片放在项目的构建目录之下
HeadIconLabel->setPixmap(icon);
HeadIconLabel->resize(icon.width(),icon.height());
UpdateHeadBtn = new QPushButton(tr("更新"));
//完成右上侧头像选择区的布局
TopRightLayout = new QHBoxLayout();
TopRightLayout->setSpacing(20);
TopRightLayout->addWidget(HeadLabel);
TopRightLayout->addWidget(HeadIconLabel);
TopRightLayout->addWidget(UpdateHeadBtn);
IntroductionLabel = new QLabel(tr("个人说明："));
IntroductionTextEdit = new QTextEdit;
//完成右侧的布局
RightLayout = new QVBoxLayout();
RightLayout->setMargin(10);
RightLayout->addLayout(TopRightLayout);
RightLayout->addWidget(IntroductionLabel);
RightLayout->addWidget(IntroductionTextEdit);
/*************底部************************/
okBtn = new QPushButton(tr("确定"));
CancelBtn = new QPushButton(tr("取消"));
//完成下方两个按钮的布局
ButtomLayout = new QHBoxLayout();
ButtomLayout->addStretch();//(d)
ButtomLayout->addWidget(okBtn);
ButtomLayout->addWidget(CancelBtn);
/*----------------------------------------------------*/
QGridLayout *mainLayout = new QGridLayout(this);//(e)
mainLayout->setMargin(15);
mainLayout->setSpacing(10);
mainLayout->addLayout(LeftLayout,0,0);
mainLayout->addLayout(RightLayout,0,1);
mainLayout->addLayout(ButtomLayout,1,0,1,2);
mainLayout->setSizeConstraint(QLayout::SetFixedSize);//(f)
}
Dialog::~Dialog()
{
}

（a）OtherLabel->setFrameStyle(QFrame::Panel | QFrame::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->setColumnStretch(1,3)：设定两列分别占用空间的比例，本例设定为1:3。即使对话框大小改变了，两列之间的宽度比依然保持不变

（d）ButtomLayout->addStretch()：在按钮之前插入一个占位符，使两个按钮能够靠右对齐，并且在整个对话框的大小发送改变时，保证按钮的大小不发生改变。

（e）QGridLayout *mainLayout = new QGridLayout(this)：实现主布局，指定父窗口this，也可调用this->setLayout(mainLayout)实现。

（f）mainLayout->setSizeConstraint(QLayout::SetFixedSize)：设定最优化显示，并且使用户无法改变对话框的大小。所谓最优化显示，即控件都按其sizeHint()的大小显示。

程序运行，结果如下： 

 进群领取qt开发学习资料以及技术交流  在下方↓↓↓↓↓↓↓↓