QT5布局管理---用户基本资料修改

一，布局讲述

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

2.本例用了四个布局管理器，分别是LeftLayout、RightLayout、BottonLayout、MainLayout。

二、实现过程

（1）新建一个Qt Widget Application，项目名称为“UserInfo”，基类选择“QDlalog”，取消“创建界面”复选框的选中状态。

（2）打开“dialog.h”文件，在头文件中声明对话框中的各个控件。

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include "QLabel"
#include "QLineEdit"
#include "QComboBox"
#include "QTextEdit"
#include "QGridLayout"

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = nullptr);
    ~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 *ButtonLayout;      //按钮布局
};
#endif // DIALOG_H

（3）打开“dialog.cpp”文件，在Dialog的构建函数中添加代码：

#include "dialog.h"
#include "QString"
#include "QLabel"
#include "QLineEdit"
#include "QComboBox"
#include "QPushButton"
#include "QFrame"
#include "QGridLayout"
#include "QPixmap"
#include "QHBoxLayout"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
   setWindowTitle(tr("UserInfo"));
   setWindowIcon(QIcon("katong.jpg"));

   /***************左侧*******************/
   UserNameLabel = new QLabel(QString::fromLocal8Bit("用户名:"));
   UserNameLineEdit = new QLineEdit;

   NameLabel = new QLabel(QString::fromLocal8Bit("姓名:"));
   NameLineEdit = new QLineEdit;

   SexLabel = new QLabel(QString::fromLocal8Bit("性别:"));
   SexComboBox = new QComboBox;
   SexComboBox->addItem(QString::fromLocal8Bit("男"));
   SexComboBox->addItem(QString::fromLocal8Bit("女"));

   DepartmentLabel = new QLabel(QString::fromLocal8Bit("部门:"));
   DepartmentTextEdit = new QTextEdit;

   AgeLabel = new QLabel(QString::fromLocal8Bit("年龄:"));
   AgeLineEdit = new QLineEdit;

   OtherLabel = new QLabel(QString::fromLocal8Bit("备注:"));
   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);
   LeftLayout->setColumnStretch(1,3);                           //c

   /***************右侧*******************/
   HeadLabel = new QLabel(QString::fromLocal8Bit("头像:"));       //右上角部分
   HeadIconLabel = new QLabel;
   QPixmap icon("katong.jpg");
   HeadIconLabel->setPixmap(icon);
   HeadIconLabel->resize(icon.width(),icon.height());
   UpdateHeadBtn = new QPushButton(QString::fromLocal8Bit("更新:"));

   //完成右上侧头像选择区的布局
   TopRightLayout = new QHBoxLayout();
   TopRightLayout->setSpacing(20);                                  //设定各个控件之间的间距为20
   TopRightLayout->addWidget(HeadLabel);
   TopRightLayout->addWidget(HeadIconLabel);
   TopRightLayout->addWidget(UpdateHeadBtn);
   IntroductionLabel = new QLabel(QString::fromLocal8Bit("个人说明:"));//右下角部分
   IntroductionTextEdit = new QTextEdit;

   //完成右侧的布局
   RightLayout = new QVBoxLayout();
   RightLayout->setMargin(10);
   RightLayout->addLayout(TopRightLayout);
   RightLayout->addWidget(IntroductionLabel);
   RightLayout->addWidget(IntroductionTextEdit);

   /***************底部*******************/
   OkBtn = new QPushButton(QString::fromLocal8Bit("确定"));
   CancelBtn = new QPushButton(QString::fromLocal8Bit("取消"));

   //完成下方两个按钮的布局
   ButtonLayout = new QHBoxLayout();
   ButtonLayout->addStretch();                                          //d
   ButtonLayout->addWidget(OkBtn);
   ButtonLayout->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(ButtonLayout,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、HLiine、VLine及WinPanel；阴影部分包括三种，分别是Plain、Raised和SunKen。

        （b）LeftLayout = new QGridLayout() ：左部布局，由于此布局管理器不是主布局管理器，所以不用指定父窗口

        （c）LeftLayout->setColumnStretch(0,1)、LeftLayout->setColumnStretch(1,3)：设定两列分别占用空间的比例，本例设定为1:3。即使对话框框架大小改变了，两列之间的宽度比依然保持不变。

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

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

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

（4）选择“构建”-->“构建项目"UserInfo"”命令，

把事先准备好的图片放进如下目录里。