Qt5——布局管理

---

本文参考电子工业出版社出版的《Qt5开发及实例》第三章内容，总结了Qt5中关于布局管理的使用方法。主要分为分割窗口QSplitter类、停靠窗口QDockWidget类及堆栈窗口QStackedWidget类三种情况的使用。

分割窗口QSplitter类

分割窗口QSplitter类在应用程序中经常用到，它可以灵活分割窗口的布局，经常用在类似文件资源管理器的窗口设计中。

示例

• 新建一个QtWidgetsApplication项目，取消“创建界面”复选框。
• 在main.cpp文件中修改成如下代码：

#include "mainwindow.h"
#include <QApplication>
#include <QSplitter>
#include <QTextEdit>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFont font("ZYSong18030", 12);
    a.setFont(font);
    //主分割窗口
    //新建一个QSplitter类对象，作为主分割窗口，设定此分割窗口为水平分割窗口
    QSplitter *splitterMain = new QSplitter(Qt::Horizontal, 0);
    //新建一个QTextEdit类对象，并将其插入主分割窗口中。
    QTextEdit *texteft = new QTextEdit(QObject::tr("Left Widget"), splitterMain);
    //设定TextEdit中文字的对齐复方石，常用有
    //Qt::AlignLeft-做对齐;Qt::AlignRight-右对齐；Qt::AlignCenter-文字居中。
    //Qt::AlignUp-文字与顶端对齐；Qt::AlignBotton：文字与底端对齐。
    texteft->setAlignment(Qt::AlignCenter);

    //右分割窗口
    //新建一个QSplitter类对象，作为右分割窗口，设定此分割窗口为垂直分割窗口，并以主分割窗口为父窗口。
    QSplitter *splitterRight = new QSplitter(Qt::Vertical, splitterMain);
    //设定分割窗口的分隔条在拖拽时是否为实时更新显示，为true则实时更新，false则在拖拽到位并释放鼠标后更新显示，默认为true。
    splitterRight->setOpaqueResize(false);
    QTextEdit *textup = new QTextEdit(QObject::tr("Top Widget"), splitterRight);
    textup->setAlignment(Qt::AlignCenter);
    QTextEdit *textBottom = new QTextEdit(QObject::tr("Bottom Widget"), splitterRight);
    textBottom->setAlignment(Qt::AlignCenter);

    //设定可伸缩控件，第一个参数为指定设置的控件序号（序号按控件插入顺序从0逐步增加）；
    //第二个参数为大于0的值，表示为可伸缩控件。
    //序号1的控件为右分割窗口，当整个对话框的宽度发送变化后，左边窗口的宽度不变，右边会随拉伸而改变。
    splitterMain->setStretchFactor(1, 1);
    splitterMain->setWindowTitle(QObject::tr("Splitter"));
    splitterMain->show();

//    MainWindow w;
//    w.show();

    return a.exec();
}

• 执行结果如下：
  

停靠窗口QDockWidget类

停靠窗口QDockWidget类也是应用程序中经常用到的，设置停靠窗口的一般流程如下：

• 创建一个QDockWidget对象的停靠窗体。
• 设置此停靠窗体的属性，通常调用setFeatures()及setAllowedAreas()两种方法。
• 新建一个要插入停靠窗体的控件，常用的有QListWidget和QTextEdit。
• 将控件插入停靠窗体，调用QDockWidget的setWidget()方法。
• 使用addDockWidget()方法在MainWindow中加入此停靠窗体。

示例

• 新建QtWidgetApplication项目，基类选择“QMainWindow”，取消“创建界面”复选框。
• mainWindow.h文件代码如下：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
};

#endif // MAINWINDOW_H

• 打开MainWindow.cpp文件，添加实现窗口的初始化及功能实现。具体如下：

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setWindowTitle(tr("DockWindows"));
    QTextEdit *te = new QTextEdit(this);
    te->setText(tr("Main Window"));
    te->setAlignment(Qt::AlignCenter);

    //停靠窗口1
    QDockWidget *dock = new QDockWidget(tr("DockWindow1"), this);
/*
 * void setFeatures(DockWidgetFeatures features);
 * 参数指定停靠窗体的特性，包括以下几种参数：
 * QDockWidget::DockWidgetClosable：停靠窗体可关闭。
 * QDockWidget::DockWidgetMovable：停靠窗体可移动。
 * QDockWidget::DockWidgetFloatable:停靠窗体可浮动。
 * QDockWidget::AllDockWidgetFeatures：此参数表示拥有停靠窗体的所有特性。
 * QDockWidget::NoDockWidgetFeatures：不可一定、不可关闭、不可浮动。
*/
    dock->setFeatures(QDockWidget::DockWidgetMovable);
/*
 * void setAllowedAreas(Qt::DockWidgetAreas areas);
 * 参数指定了停靠窗体可停靠的区域，包括以下几种参数：
 * Qt::LeftDockWidgetArea：可在主窗口的左侧停靠。
 * Qt::RightDockWidgetArea：可在主窗口的右侧停靠。
 * Qt::TopDockWidgetArea：可在主窗口的顶端停靠。
 * Qt::BottomDockWidgetArea：可在主窗口的底部停靠。
 * Qt::AllDockWidgetArea：可在主窗口任意部位停靠。
 * Qt::NoDockDockWidgetArea：只能停靠在插入处。
*/
    dock->setAllowedAreas(Qt::LeftDockWidgetArea |Qt::RightDockWidgetArea);
    QTextEdit *te1 = new QTextEdit();
    te1->setText(tr("Window1, The dock widget can be moved between docks by the user" ""));
    dock->setWidget(te1);
    addDockWidget(Qt::RightDockWidgetArea, dock);

    //停靠窗口2
    dock = new QDockWidget(tr("DockWindow2"), this);
    dock->setFeatures(QDockWidget::DockWidgetClosable |QDockWidget::DockWidgetFloatable);
    QTextEdit *te2 = new QTextEdit();
    te2->setText(tr("Window2, The dock widget can be detached from the main window,""and float as an independent window, and can be closed"));
    dock->setWidget(te2);
    addDockWidget(Qt::RightDockWidgetArea, dock);

    //停靠窗口3
    dock = new QDockWidget(tr("DockWindow3"), this);
    dock->setFeatures(QDockWidget::AllDockWidgetFeatures);
    QTextEdit *te3 = new QTextEdit();
    te3->setText(tr("Window3, The dock widget can be closed, moved, and floated"));
    dock->setWidget(te3);
    addDockWidget(Qt::RightDockWidgetArea, dock);
}

MainWindow::~MainWindow()
{

}

• 执行结果：
  

堆栈窗体QStackedWidget类

堆栈窗体QStackedWidget类也是应用程序中经常用到的。在实际应用中，堆栈窗体多与列表框QListWidget及下拉列表框QComboBox配合使用。

示例

• 新建Qt Widget Application，选择基类“QDialog”，类名命名为“StackDlg”，取消“创建界面”复选框。
• 打开“stackdlg.h”，添加如下代码：

#ifndef STACKDLG_H
#define STACKDLG_H

#include <QDialog>
#include <QListWidget>
#include <QStackedWidget>
#include <QLabel>

class StackDlg : public QDialog
{
    Q_OBJECT

public:
    StackDlg(QWidget *parent = 0);
    ~StackDlg();

private:
    QListWidget *list;
    QStackedWidget *stack;
    QLabel *label1;
    QLabel *label2;
    QLabel *label3;
};

#endif // STACKDLG_H

• 打开“stackdlg.cpp”文件，添加如下代码：

#include "stackdlg.h"

StackDlg::StackDlg(QWidget *parent)
    : QDialog(parent)
{
    setWindowTitle(tr("StackedWidget"));
    //新建一个QListWidget控件对象
    list = new QListWidget(this);
    //在新建的QListWidget控件中插入三个条目，作为选择项
    list->insertItem(0, tr("Window1"));
    list->insertItem(1, tr("Window2"));
    list->insertItem(2, tr("Window3"));
    //创建三个QLabel标签控件对象，作为堆栈窗口需要显示的三层窗体。
    label1 = new QLabel(tr("WindowTest1"));
    label2 = new QLabel(tr("WindowTest2"));
    label3 = new QLabel(tr("WindowTest3"));

    //新建一个QStackWidget堆栈窗体对象。
    stack = new QStackedWidget(this);
    //将三个QLabel标签空气依次插入堆栈窗体中。
    stack->addWidget(label1);
    stack->addWidget(label2);
    stack->addWidget(label3);

    QHBoxLayout *mainLayout = new QHBoxLayout(this);
    //对整个对话框进行布局。
    //设定对话框的边距
    mainLayout->setMargin(5);
    //设定各个控件之间的间距
    mainLayout->setSpacing(5);
    mainLayout->addWidget(list);
    mainLayout->addWidget(stack, 0, Qt::AlignHCenter);
    //设定可伸缩控件，第一个参数指定设置的控件，第二个参数值大于0表示可伸缩。
    mainLayout->setStretchFactor(list, 1);
    mainLayout->setStretchFactor(stack, 3);

    //将QListWidget的currentRowChanged()信号与堆栈窗体的setCurrentIndex()槽函数连接起来。
    //实现按选择显示窗体，此时的对战窗体index按插入顺序从0依次排序。
    connect(list, SIGNAL(currentRowChanged(int)), stack, SLOT(setCurrentIndex(int)));

}

StackDlg::~StackDlg()
{

}

• 执行结果
  

基本布局（QLayout）

Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理，分别是水平排列布局，垂直排列布局和网格排列布局。

它们之间的继承关系如下

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

addWidget()方法用于加入需要布局的控件：

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

addLayout() 方法用于加入子布局：

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

示例

• 新建Qt Widgets Application，项目名称为“UserInfo”，基类选择QDialog，取消“创建界面”复选框。
• 打开“dialog.h”头文件，声明对话框中的各个控件，添加如下代码：

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QGridLayout>
#include <QPushButton>
#include <QBoxLayout>
#include <QTextEdit>
#include <QComboBox>


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

• 打开“dialog.cpp”文件，在构造函数中添加如下代码：

#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;
    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("备注："));
    //设定控件风格，setFrameStyle（）是QFrame的方法。参数指定由形状（shape）和阴影（shadow）配合设定
    //六种形状：NoFrame、Panel、Box、HLine、VLine及WinPanel；
    //三种阴影：Plain、Raised及Sunken。
    OtherLabel->setFrameStyle(QFrame::Panel |QFrame::Sunken);

    //左部布局，由于不是主布局管理器，所以不指定父窗口
    LeftLayout = new QGridLayout();
    //向布局中加入需要布局的控件
    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);
    //setColumnStretch()设定占用空间比例。
    //第一列和第二列比例为1:3.即使对话框框架大小改变，该比例也不会改变
    LeftLayout->setColumnStretch(0, 1);
    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();
    ButtomLayout->addWidget(OKBtn);
    ButtomLayout->addWidget(CancelBtn);

    //------------------总体布局----------------
    //实现主布局，指定父窗口（this），也可以调用 this->setLayout(mainLayout)实现。
    QGridLayout *mainLayout = new QGridLayout(this);
    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);

}

Dialog::~Dialog()
{

}

• 执行结果
  
  

“修改用户资料” 实例实现

实现一个综合示例“修改用户资料”的项目，效果如下：


可以看到，在主界面上最左侧有一个文本选择框，根据选择不同切换不同界面，一共具有三个主要界面：详细信息界面、联系方式界面、详细资料界面。

实现步骤

导航页实现

• 新建QtWidgetApplication项目，选择基类“QDialog”，类命名“Content”，取消“创建界面”复选框的选择。
• content.h

#ifndef CONTENT_H
#define CONTENT_H

#include <QDialog>
#include <QStackedWidget>
#include <QPushButton>
#include "baseinfo.h"
#include "contact.h"
#include "detail.h"


class Content : public QFrame
{
    Q_OBJECT

public:
    Content(QWidget *parent = 0);
    ~Content();
    QStackedWidget *stack;
    QPushButton *AmendBtn;
    QPushButton *CloseBtn;
    BaseInfo *baseInfo;
    Contact *contact;
    Detail *detail;
};

#endif // CONTENT_H

• content.cpp

#include "content.h"

Content::Content(QWidget *parent)
    : QFrame (parent)
{
    //创建一个QStackWidget对象
    stack = new QStackedWidget(this);
    //对堆栈窗口的显示风格进行设置
    stack->setFrameStyle(QFrame::Panel | QFrame::Raised);

    //插入三个页面
    baseInfo = new BaseInfo();
    contact = new Contact();
    detail = new Detail();
    stack->addWidget(baseInfo);
    stack->addWidget(contact);
    stack->addWidget(detail);

    //创建两个按钮
    AmendBtn = new QPushButton(tr("修改"));
    CloseBtn = new QPushButton(tr("关闭"));
    QHBoxLayout *BtnLayout = new QHBoxLayout;
    BtnLayout->addStretch(1);
    BtnLayout->addWidget(AmendBtn);
    BtnLayout->addWidget(CloseBtn);

    //整体布局
    QVBoxLayout *RightLayout = new QVBoxLayout(this);
    RightLayout->setMargin(10);
    RightLayout->setSpacing(6);
    RightLayout->addWidget(stack);
    RightLayout->addLayout(BtnLayout);

}

Content::~Content()
{

}

“基本信息”页面实现

在该工程添加新类，右键点击项目选择“添加新文件…”，选择“C++ Class”选项，单击“Choose…”按钮。
选择基类“QWidget”，类命名为“BaseInfo”点击完成创建。

• baseinfo.h

#ifndef BASEINFO_H
#define BASEINFO_H

#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>
#include <QPushButton>
#include <QWidget>
#include <QVBoxLayout>

class BaseInfo : public QWidget
{
    Q_OBJECT
public:
    explicit BaseInfo(QWidget *parent = nullptr);

signals:

public slots:

private:
    //左侧
    QLabel *UserNameLabel;
    QLabel *NameLabel;
    QLabel *SexLabel;
    QLabel *DepartmentLabel;
    QLabel *AgeLabel;
    QLabel *OtherLabel;
    QLineEdit *UserNameLineEdit;
    QLineEdit *NameLineEdit;
    QComboBox *SexComboxBox;
    QTextEdit *DepartmentTextEdit;
    QLineEdit *AgeLineEdit;
    QGridLayout *LeftLayout;

    //右侧
    QLabel *HeadLabel;
    QLabel *HeadIconLabel;
    QPushButton *UpdateHeadBtn;
    QHBoxLayout *TopRightLayout;
    QLabel *IntroductionLabel;
    QTextEdit *IntroductionTextEdit;
    QVBoxLayout *RightLayout;
};

#endif // BASEINFO_H

• baseinfo.cpp

#include "baseinfo.h"

BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{
    //---------左侧-------
    UserNameLabel = new QLabel(tr("用户名："));
    UserNameLineEdit = new QLineEdit;
    NameLabel = new QLabel(tr("姓名："));
    NameLineEdit = new QLineEdit;
    SexLabel = new QLabel(tr("性别："));
    SexComboxBox = new QComboBox;
    SexComboxBox->addItem(tr("女"));
    SexComboxBox->addItem(tr("男"));
    DepartmentLabel = new QLabel(tr("部门："));
    DepartmentTextEdit = new QTextEdit;
    OtherLabel = new QLabel(tr("备注："));
    OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);
    LeftLayout = new QGridLayout();
    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(SexComboxBox, 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, 0, 1);
    LeftLayout->setColumnStretch(0, 1);
    LeftLayout->setColumnStretch(1, 3);

    //-----------右侧-----------
    HeadLabel = new QLabel(tr("头像"));
    HeadIconLabel = new QLabel;
    QPixmap icon("321.bmp");
    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);

    //-------------主布局-----------
    QGridLayout *mainLayout = new QGridLayout(this);
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);
    mainLayout->addLayout(LeftLayout, 0, 0);
    mainLayout->addLayout(RightLayout, 0, 1);
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);

}

“联系方式”页面实现

还是前面添加新类文件的方式添加新文件，命令新的类为“Contact”。

• contact.h

#ifndef CONTACT_H
#define CONTACT_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QCheckBox>
#include <QGridLayout>

class Contact : public QWidget
{
    Q_OBJECT
public:
    explicit Contact(QWidget *parent = nullptr);

signals:

public slots:

private:
    QLabel *EmailLabel;
    QLineEdit *EmailLineEdit;
    QLabel *AddrLabel;
    QLineEdit *AddrLineEdit;
    QLabel *CodeLabel;
    QLineEdit *CodeLineEdit;
    QLabel *MoviTelLabel;
    QLineEdit *MoviTelLineEdit;
    QCheckBox *MoviTelCheckBook;
    QLabel *ProTelLabel;
    QLineEdit *ProTelLineEdit;
    QGridLayout *mainLayout;

};

#endif // CONTACT_H

• contact.cpp

#include "contact.h"

Contact::Contact(QWidget *parent) : QWidget(parent)
{
    EmailLabel = new QLabel(tr("电子邮件："));
    EmailLineEdit = new QLineEdit;
    AddrLabel = new QLabel(tr("联系地址："));
    AddrLineEdit = new QLineEdit;
    CodeLabel = new QLabel(tr("邮政编码："));
    CodeLineEdit = new QLineEdit;
    MoviTelLabel = new QLabel(tr("移动电话："));
    MoviTelLineEdit = new QLineEdit;
    MoviTelCheckBook = new QCheckBox(tr("接收留言："));
    ProTelLabel = new QLabel(tr("办公电话："));
    ProTelLineEdit = new QLineEdit;

    mainLayout = new QGridLayout(this);
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);
    mainLayout->addWidget(EmailLabel, 0, 0);
    mainLayout->addWidget(EmailLineEdit, 0, 1);
    mainLayout->addWidget(AddrLabel, 1, 0);
    mainLayout->addWidget(AddrLineEdit, 1, 1);
    mainLayout->addWidget(CodeLabel, 2, 0);
    mainLayout->addWidget(CodeLabel, 2, 1);
    mainLayout->addWidget(MoviTelLabel, 3, 0);
    mainLayout->addWidget(MoviTelLabel, 3, 1);
    mainLayout->addWidget(MoviTelCheckBook, 3, 2);
    mainLayout->addWidget(ProTelLabel, 4, 0);
    mainLayout->addWidget(ProTelLineEdit, 4, 1);
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}

“详细资料”页面实现

再次添加新的类文件，命令类为“Detail”。具体实现如下：

• detail.h

#ifndef DETAIL_H
#define DETAIL_H

#include <QWidget>
#include <QLabel>
#include <QComboBox>
#include <QLineEdit>
#include <QTextEdit>
#include <QGridLayout>

class Detail : public QWidget
{
    Q_OBJECT
public:
    explicit Detail(QWidget *parent = nullptr);

signals:

public slots:

private:
    QLabel *NationalLabel;
    QComboBox *NationalComboBox;
    QLabel *ProvinceLabel;
    QComboBox *ProvinceComboBox;
    QLabel *CityLabel;
    QLineEdit *CityLineEdit;
    QLabel *IntroductLabel;
    QTextEdit *IntroductTextEdit;
    QGridLayout *mainLayout;
};

#endif // DETAIL_H

• detail.cpp

#include "detail.h"

Detail::Detail(QWidget *parent) : QWidget(parent)
{
    NationalLabel = new QLabel(tr("国家/地址："));
    NationalComboBox = new QComboBox;
    NationalComboBox->insertItem(0, tr("中国"));
    NationalComboBox->insertItem(1, tr("美国"));
    NationalComboBox->insertItem(2, tr("英国"));
    ProvinceLabel = new QLabel(tr("省份："));
    ProvinceComboBox = new QComboBox;
    ProvinceComboBox->insertItem(0, tr("江苏省"));
    ProvinceComboBox->insertItem(1, tr("山东省"));
    ProvinceComboBox->insertItem(2, tr("浙江省"));
    CityLabel = new QLabel(tr("城市："));
    CityLineEdit = new QLineEdit;
    IntroductLabel = new QLabel(tr("个人说明："));
    IntroductTextEdit = new QTextEdit;
    mainLayout = new QGridLayout(this);
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);
    mainLayout->addWidget(NationalLabel, 0 , 0);
    mainLayout->addWidget(NationalComboBox, 0, 1);
    mainLayout->addWidget(ProvinceLabel, 1, 0);
    mainLayout->addWidget(ProvinceComboBox, 1, 1);
    mainLayout->addWidget(CityLabel, 2, 0);
    mainLayout->addWidget(CityLineEdit, 2, 1);
    mainLayout->addWidget(IntroductLabel, 3, 0);
    mainLayout->addWidget(IntroductTextEdit, 3, 1);

}

主函数实现

下面编写工程的入口函数，即main.cpp的实现。

• main.cpp

#include "content.h"
#include <QApplication>
#include <QTextCodec>
#include <QSplitter>
#include <QListWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //设置整个程序使用的字体和字号
    QFont font("AR PL KaitiM GB", 12);
    a.setFont(font);

    //新建一个水平分割窗口对象，作为主布局框
    QSplitter *splitterMain = new QSplitter(Qt::Horizontal, 0);
    splitterMain->setOpaqueResize(true);
    QListWidget *list = new QListWidget(splitterMain);
    list->insertItem(0, QObject::tr("基本信息"));
    list->insertItem(1, QObject::tr("联系方式"));
    list->insertItem(2, QObject::tr("详细资料"));
    Content *content = new Content(splitterMain);
    QObject::connect(list, SIGNAL(currentRowChanged(int)), content->stack, SLOT(setCurrentIndex(int)));
    //设置主布局框的标题
    splitterMain->setWindowTitle(QObject::tr("修改用户资料"));
    //设置主布局框的最小尺寸
    splitterMain->setMinimumSize(splitterMain->minimumSize());
    //设置主布局框的最大尺寸
    splitterMain->setMaximumSize(splitterMain->maximumSize());

    //显示主布局框
    splitterMain->show();

//    Content w;
//    w.show();

    return a.exec();
}