Qt学习笔记（2）利用StackWidget实现选项卡式页面

 学习笔记第二篇，利用Qt实现选项卡式的页面，效果如图1.1-图1.3所示。程序实现的功能是通过点击状态栏实现不同页面的切换，实际上Qt中自带有Tab选项卡式的控件，本文利用StackWidge实现类似的页面切换功能。本文的开发思路以及页面代码参考了陆文周主编的《Qt5开发及实例（第3版）》（中国工信出版社）。

 

图1.1 基本信息界面

 

图1.2 联系方式界面

 

图1.3 详细资料界面

        本文软件的框架如图1.4所示，下面从最下层的内容开始介绍。

 

图1.4 软件开发框架

        1、底层页面的构建

        最底层的页面分为三个类，基本信息（BaseInfo）类，联系方式（Contact）类以及详细资料（Detail）类，三个类均继承自QWidget类。

        （1）Class BaseInfo

        baseinfo.h

#ifndef BASEINFO_H

#define BASEINFO_H

#include <QtCore/qglobal.h>

#if QT_VERSION >= 0x050000

#include <QtWidgets/QWidget>

#else

#include <QtGui/QWidget>

#endif

#include <QLabel>

#include <QLineEdit>

#include <QComboBox>

#include <QTextEdit>

#include <QGridLayout>

#include <QPushButton>

#include <QHBoxLayout>

#include <QVBoxLayout>

#include <QPixmap>

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 *SexCombox;

    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("性别："));

    SexCombox = new QComboBox;

    SexCombox->addItem(tr("男"));

    SexCombox->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);

    //左侧布局

    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(SexCombox, 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);

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

    //右上方

    HeadLabel = new QLabel(tr("头像："));

    HeadIconLabel = new QLabel;

    QPixmap icon("123.png");

    HeadIconLabel->setPixmap(icon);

    HeadIconLabel->resize(20, 20);

    UpdateHeadBtn  = new QPushButton(tr("更新"));

    //右上方布局

    TopRightLayout = new QHBoxLayout;

    TopRightLayout->setSpacing(20);

    TopRightLayout->addWidget(HeadLabel);

    TopRightLayout->addWidget(HeadIconLabel);

    //右下方

    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);

}

        （2）Class Contact

        contact.h

#ifndef CONTACT_H

#define CONTACT_H

#include <QtCore/qglobal.h>

#if QT_VERSION >= 0x050000

#include <QtWidgets/QWidget>

#else

#include <QtGui/QWidget>

#endif

#include <QLabel>

#include <QGridLayout>

#include <QLineEdit>

#include <QCheckBox>

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 *MoviTelCheckBox;

    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;

    MoviTelCheckBox = 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(CodeLineEdit, 2, 1);

    mainLayout->addWidget(MoviTelLabel, 3, 0);

    mainLayout->addWidget(MoviTelLineEdit, 3, 1);

    mainLayout->addWidget(MoviTelCheckBox, 3, 2);

    mainLayout->addWidget(ProTelLabel, 4, 0);

    mainLayout->addWidget(ProTelLineEdit, 4, 1);

    mainLayout->setSizeConstraint(QLayout::SetFixedSize);

}

        （3）Class Detail

        detail.h

#ifndef DETAIL_H

#define DETAIL_H

#include <QtCore/qglobal.h>

#if QT_VERSION >= 0x050000

#include <QtWidgets/QWidget>

#else

#include <QtGui/QWidget>

#endif

#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);

}

        2、将底层页面放在QStackWidget中

        新建一个Content类，继承自QFrame。在Content类中，创建一个QStackWidget对象，然后将上述三个页面插入到此对象中。

        content.h

#ifndef CONTENT_H

#define CONTENT_H

#include <QtCore/qglobal.h>

#if QT_VERSION >= 0x050000

#include <QtWidgets/QWidget>

#else

#include <QtGui/QWidget>

#endif

#include <QFrame>

#include <QStackedWidget>

#include <QGridLayout>

#include "baseinfo.h"

#include "contact.h"

#include "detail.h"

class Content : public QFrame

{

    Q_OBJECT

public:

    explicit Content(QWidget *parent = nullptr);

    QStackedWidget *stack;

    BaseInfo *baseInfo;

    Contact *contact;

    Detail *detail;

signals:

public slots:

private:

    QGridLayout *mainLayout;

};

#endif // CONTENT_H

        content.cpp

        这里用了一个QGridLayou布局，布局中只有一个QStackWidget。如果去掉此布局，则在主界面中的Stack页面无法随主界面变化，只能保持同一个尺寸，所以这里有必要加一个布局。

#include "content.h"

Content::Content(QWidget *parent) : QFrame(parent)

{

    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);

    mainLayout = new QGridLayout(this);

    mainLayout->setMargin(2);

    mainLayout->addWidget(stack, 0, 0);

}

        3、主界面的实现

        这里的主界面不是指main函数，而是指QMainWindow，主界面的类为MainStack继承自QMainWindow。在主界面上主要实现的功能是状态栏和Stack界面的显示以及它们之间的连接。

        mainstack.h

#ifndef MAINSTACK_H

#define MAINSTACK_H

#include <QMainWindow>

#include <QToolBar>

#include <QAction>

#include <QGridLayout>

#include "content.h"

class MainStack : public QMainWindow

{

    Q_OBJECT

public:

    MainStack(QWidget *parent = 0);

    ~MainStack();

    Content *content;

    QGridLayout *mainLayout;

    void createAction();                                //动作处理函数

    void createToolBar();                               //创建工具栏

private:

    QToolBar *stackTool;                                //工具栏

    QAction *openStack[3];

private slots:

    void openBaseInfo();                                //点击状态栏的槽函数

    void openContact();

    void openDtail();

};

#endif // MAINSTACK_H

        mainstack.cpp

        主界面的中心部件就一个，就不加布局了，所有的布局都加在上一步的QFrame中。

#include "mainstack.h"

MainStack::MainStack(QWidget *parent)

    : QMainWindow(parent)

{

    setWindowTitle(tr("主界面"));

    setMinimumSize(800, 480);

    createAction();

    createToolBar();

    content = new Content(this);

    setCentralWidget(content);                              //将stack窗口设置为中心部件

    //mainLayout = new QGridLayout(this);

    //mainLayout->setMargin(15);

    //mainLayout->setSpacing(10);

    //mainLayout->addWidget(stackTool, 0, 0);

    //mainLayout->addWidget(content, 1, 0);

}

MainStack::~MainStack()

{

}

//Action动作

void MainStack::createAction()

{

    //转到第一个界面

    openStack[0] = new QAction(tr("基本信息"), this);

    openStack[0]->setShortcut(tr("Ctrl+Q"));

    openStack[0]->setStatusTip(tr("界面1"));

    connect(openStack[0], SIGNAL(triggered(bool)), this, SLOT(openBaseInfo()));

    //转到第二个界面

    openStack[1] = new QAction(tr("联系方式"), this);

    openStack[1]->setShortcut(tr("Ctrl+W"));

    openStack[1]->setStatusTip(tr("界面2"));

    connect(openStack[1], SIGNAL(triggered(bool)), this, SLOT(openContact()));

    //转到第三个界面

    openStack[2] = new QAction(tr("详细资料"), this);

    openStack[2]->setShortcut(tr("Ctrl+E"));

    openStack[2]->setStatusTip(tr("界面3"));

    connect(openStack[2], SIGNAL(triggered(bool)), this, SLOT(openDtail()));

}

//创建工具栏

void MainStack::createToolBar()

{

    stackTool = addToolBar("工具栏");

    stackTool->addAction(openStack[0]);

    stackTool->addAction(openStack[1]);

    stackTool->addAction(openStack[2]);

}

//转到界面1槽函数

void MainStack::openBaseInfo()

{

    this->content->stack->setCurrentIndex(0);

}

//转到界面2槽函数

void MainStack::openContact()

{

    this->content->stack->setCurrentIndex(1);

}

//转到界面3槽函数

void MainStack::openDtail()

{

    this->content->stack->setCurrentIndex(2);

}

        4、main函数

        main函数就是显示主界面。

#include "mainstack.h"

#include <QApplication>

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    MainStack w;

    w.show();

    return a.exec();

}