Qt中QStackedWidget控制項的基本使用

本文作者林中楓，首發於知乎，未經許可禁止轉載。

QStackedWidget控制項是什麼呢？這裡做個形象的比喻，你手裡有一副撲克牌，雖然有很多撲克牌但卻只佔一張撲克牌的面積，也只有最頂上的撲克牌是可以被看見的，你也可以將下面任意一張撲克牌放到最頂層使之可見。這裡拿火絨界面更形象的描述：

載入超時，點擊重試

當我點擊擴展工具可以看到右側的界面發生了改變：

QStackedWidget就可以實現這樣的功能。

QStackedWidget的使用比較簡單，下面是一個demo將展示如何使用QStackedWidget：

//widget.h

#ifndef WIDGET_H #define WIDGET_H

#include <QWidget>
#include<QVBoxLayout>
#include<QLabel>
#include<QPushButton>
#include<QStackedWidget>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
Q_OBJECT

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

private:
Ui::Widget *ui;
QVBoxLayout *layout;
QPushButton *button;
QStackedWidget *stack;
int count=0;
public slots:
void changePage();
};

#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);
//構建界面
layout=new QVBoxLayout(this);
button=new QPushButton("切換界面",this);
stack=new QStackedWidget(this);
layout->addWidget(stack);
layout->addWidget(button);
this->setLayout(layout);
//設置佈局內部比例
layout->setStretch(0,8);
layout->setStretch(1,2);

//為QStackedWidget添加控制項
QLabel *label1=new QLabel("this is page1");
QLabel *label2=new QLabel("this is page2");
QLabel *label3=new QLabel("this is page3");
stack->addWidget(label1);
stack->addWidget(label2);
stack->addWidget(label3);
//設置標籤水平垂直方向均居中對齊
label1->setAlignment(Qt::AlignCenter);
label2->setAlignment(Qt::AlignCenter);
label3->setAlignment(Qt::AlignCenter);
//添加信號與槽
connect(button,SIGNAL(clicked()),this,SLOT(changePage()));
}

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

void Widget::changePage()
{
//改變QStackedWidget的界面
stack->setCurrentIndex(++count%3);
}

有趣的一點是，當我們查setCurrentIndex()時會發現這是一個槽函數，但是我們在代碼裏直接將它作為普通函數一樣調用，由此可以發現槽函數的實質還是函數，我們可以像調用一般函數一樣調用槽函數，只不過槽函數還能由信號去觸發，這點是一般函數所不具備的。

接下來看看運行效果，運行程序：

通過點擊按鈕切換可見界面：

測試成功，QStackedWidget還有其他的一些實用的介面和屬性，在需要時可以查閱幫助文檔。