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();
}
标签：选项卡,Qt,mainLayout,StackWidget,tr,addWidget,new,include,QLabel 来源： https://www.cnblogs.com/bruce1992/p/14311392.html