学习QT之基本布局

学习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      //指定对齐方式
)

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

本实例共用到了四个布局管理器，分别是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()的大小显示。

程序运行，结果如下：