Qt5开发从入门到精通——第三篇一节（窗口篇——堆栈窗口）

欢迎小伙伴的点评✨✨，相互学习、互关必回、全天在线🍳🍳🍳
博主🧑🧑 本着开源的精神交流Qt开发的经验、将持续更新续章，为社区贡献博主自身的开源精神👩‍🚀

---

前言

`本章节将会给大家带来堆栈窗体(QStackedWidget类)和基本布局（QLayout）的详细使用方法

---

一、堆栈窗体QStackedWidget类

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

1.1简单实例堆栈窗体实例效果

图一

1.2原码详解

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QListWidget>
#include <QStackedWidget>
#include <QLabel>
#include <QHBoxLayout>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;

private:
    QListWidget *list;   //声明一个QListWidget控件对象指针，用于在控件中插入三个条目，作为选择项
    QStackedWidget *stack; //声明一个QStackedWidget堆栈窗口指针，用于将创建的三个标签依次插入堆栈窗体中
    QLabel *Label1;      //声明一个QLabel控件标签指针，用于插入窗口中
    QLabel *Label2;
    QLabel *Label3;

};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);





    setWindowTitle(tr("StackedWidget")); //设置主窗口的名称
    list =new QListWidget(this); //新建一个 QListWidget 控件对象
    //在新建的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"));
    stack =new QStackedWidget (this);//新建一个QStackedWidget堆栈窗体对象
    //将创建的三个QLabel 标签控件依次插入堆栈窗体中
    stack->addWidget(Label1) ;
    stack->addWidget(Label2);
    stack->addWidget(Label3);
    QHBoxLayout *mainLayout =new QHBoxLayout(this);
                                 //对整个对话框进行布局
    mainLayout->setMargin (5);   //设定对话框（或窗体）的边距为5
    mainLayout->setSpacing(5);   //设定各个控件之间的间距为5
    mainLayout->addWidget(list);
    mainLayout->addWidget(stack,0,Qt::AlignHCenter);
    mainLayout->setStretchFactor(list,1);  //(a)
    mainLayout->setStretchFactor(stack,3);
    connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));
    //(b)


}

Widget::~Widget()
{
    delete ui;
}

其中，
(a) mainLayout->setStretchFactor(list,1): 设定可伸缩控件，第 1 个参数用于指定设置
的控件（序号从 0 起编号），第 2 个参数的值大于0 则表示此控件为可伸缩控件。

(b) connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentlndex(int))): 将QListWidget 的 currentRowChanged()信号与堆栈窗体的 setCurrentlndex()槽函数连接起来，实现按选择显示窗体。此处的堆栈窗体 index 按插入的顺序从 0 起依次排序，与 QListWidget 的条目排序相一致。

二、基本布局（QLayout）

Qt 提供了 QHBoxLayout 类、 QVBoxLayout 类及 QGridLayout 类等的基本布局管理，分别是水平排列布局、垂直排列布局和网格排列布局。各种布局类及继承关系如下图

图二

布局中常用的方法有 addWidget()和 add.Layout() 。
addWidget()方法用千加入需要布局的控件，方法原型如下：

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

addLayout()方法用于加入子布局，方法原型如下：

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

---

三、使用堆栈窗口和基本布局【实例】

图三

3.1原码详解

在上述堆栈窗口原码详解中，增添widgetx.h和widgetx.cpp 如下图所示：

widgetx.h原码详解

#ifndef WIDGETX_H
#define WIDGETX_H


#include <QWidget>
#include <QListWidget>
#include <QStackedWidget>
#include <QLabel>
#include <QHBoxLayout>
#include <QPushButton>
#include <QLineEdit>
#include <QHBoxLayout>
#include <QGridLayout>
#include <QString>
namespace Ui {
class Widget;
}

class Widgetx : public QWidget
{
    Q_OBJECT

public:
    explicit Widgetx(QWidget *parent = nullptr);
    ~Widgetx();

private:
    Ui::Widget *ui;

private:
QPushButton *button,*button1;     // 声明按钮指针
QLineEdit *edit1,*edit2,*edit3,*edit4;   //声明文本框指针
QGridLayout *layout;    //声明画图指针

private slots:
void on_clicked();  //声明按钮信号触发调用的函数
void on_clicked1(); 

};


#endif // WIDGETX_H

widgetx.cpp原码详解

#include "widgetx.h"
#include "ui_widget.h"




Widgetx::Widgetx(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);


    button = new QPushButton;
    button1 = new QPushButton;

    layout = new QGridLayout(this);

    edit1  = new QLineEdit;
    edit2  = new QLineEdit;
    edit3  = new QLineEdit;
    edit4  = new QLineEdit;

    button1->setText("清除");
    button->setText("结果");

    connect(button,SIGNAL(clicked(bool)),this,SLOT(on_clicked()));   //连接按钮
    connect(button1,SIGNAL(clicked(bool)),this,SLOT(on_clicked1()));

    layout->addWidget(button,1,0,Qt::Alignment());       //初始化画图

    layout->addWidget(edit1,0,0,Qt::Alignment());      //用于初始化控件位置
    layout->addWidget(edit2,0,1,Qt::Alignment());
    layout->addWidget(edit3,0,2,Qt::Alignment());
    layout->addWidget(edit4,1,1,Qt::Alignment());
    layout->addWidget(button1,1,2,Qt::Alignment());



}







void Widgetx::on_clicked()     //计算大小
{

   int a = edit1->text().toInt();
   int b = edit3->text().toInt();
   QString c = edit2->text();

   if(c=="+")
   {
       edit4->setText(QString::number(a+b));
   }
   if(c=="-")
   {
       edit4->setText(QString::number(a-b));
   }
   if(c=="*")
   {
       edit4->setText(QString::number(a*b));
   }
   if(c=="/")
   {
       edit4->setText(QString::number(a/b));
   }



}

void Widgetx::on_clicked1()   //清除
{

    edit1->clear();
    edit2->clear();
    edit3->clear();
    edit4->clear();
}

Widgetx::~Widgetx()
{
    delete ui;
}

widget.cpp原码做出的更改

    list =new QListWidget(this); //新建一个 QListWidget 控件对象
    //在新建的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"));
    widgetx = new Widgetx;  //此处仿照 Label1 类，创建widget类
    stack =new QStackedWidget (this);//新建一个QStackedWidget堆栈窗体对象
    //将创建的三个QLabel 标签控件依次插入堆栈窗体中

    stack->addWidget(Label1) ;
    stack->addWidget(widgetx);    //此处将Label2换成widgetx 从而成功引用widget类画出窗口
    stack->addWidget(Label3);

四、总结

此处篇章，所涉及核心的理解是关于c++中类的使用，工程文件已经上传github,拉取命令如下

git clone https://github.com/dhn111/Qt.git