Qt中QStackedWidget的实现示例_C/C++

一、基本概念

1.1 什么是 qstackedwidget

qstackedwidget 是 qt 中的一个容器控件，它可以包含多个子控件（页面），但一次只显示其中一个。类似于一叠卡片，只有最上面的卡片可见。

1.2 主要特点

多个页面共享同一显示区域
一次只显示一个页面
可通过索引或指针切换页面
常用于实现标签页、向导界面等

二、qt6 中的语法和 api

2.1 基本 api

#include <qstackedwidget>

// 创建
qstackedwidget *stackedwidget = new qstackedwidget(parent);

// 添加页面
int index = stackedwidget->addwidget(widget);
int index = stackedwidget->insertwidget(index, widget);

// 切换页面
stackedwidget->setcurrentindex(index);        // 通过索引
stackedwidget->setcurrentwidget(widget);      // 通过指针

// 获取信息
int currentindex = stackedwidget->currentindex();
qwidget *currentwidget = stackedwidget->currentwidget();
int count = stackedwidget->count();
qwidget *widget = stackedwidget->widget(index);

// 移除页面
stackedwidget->removewidget(widget);

2.2 信号

// 当前页面改变时发射
void currentchanged(int index);
void widgetremoved(int index);

三、案例

qstackwidget核心

 // 创建堆叠布局
    m_stackedwidget = new qstackedwidget(this);
    qwidget *gridpage = new qwidget();
 // 创建详情页
    m_detailpage = new detailpage(this);
    // 添加到堆叠窗口
    m_stackedwidget->addwidget(gridpage);
    m_stackedwidget->addwidget(m_detailpage);

这里我们可以看到两个页面都添加到堆叠布局中：
我们可以通过 m_stackedwidget->setcurrentindex(index);的方式进行切换：

例如上面的那个当index=0时就是gridpage页面；当index=1时就是detailpage。

整体代码

mianwindow.h

#ifndef mainwindow_h
#define mainwindow_h
#include "detailpage.h"
#include <qmainwindow>
#include <qstackedwidget>
#include <qgridlayout>
qt_begin_namespace
namespace ui {
class mainwindow;
}
qt_end_namespace
class mainwindow : public qmainwindow
{
    q_object
public:
    mainwindow(qwidget *parent = nullptr);
    ~mainwindow();
private slots:
    void onproductclicked(int index);
    void onbackfromdetail();
private:
    ui::mainwindow *ui;
    struct productinfo
    {
        qstring title;
        qstring image;
        qstring details;
    };
    void setupui();
    void initproducts();
    bool eventfilter(qobject *obj, qevent *event);
    qvector<productinfo> m_products;
    qstackedwidget *m_stackedwidget;
    qgridlayout *m_gridlayout;
    detailpage *m_detailpage;
};
#endif // mainwindow_h

mainwindow.cpp

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <qlabel>
#include <qmouseevent>
mainwindow::mainwindow(qwidget *parent)
    : qmainwindow(parent)
    , ui(new ui::mainwindow)
{
    ui->setupui(this);
    setupui();
}
mainwindow::~mainwindow()
{
    delete ui;
}
void mainwindow::setupui()
{
    resize(800, 600);
    // 创建堆叠布局
    m_stackedwidget = new qstackedwidget(this);
    qwidget *gridpage = new qwidget();
    m_gridlayout = new qgridlayout(gridpage);
    m_gridlayout->setspacing(10);
    // 创建详情页
    m_detailpage = new detailpage(this);
    // 添加到堆叠窗口
    m_stackedwidget->addwidget(gridpage);
    m_stackedwidget->addwidget(m_detailpage);
    setcentralwidget(m_stackedwidget);
    // 初始化产品数据
    initproducts();
    // 创建产品卡片
    for (int i = 0; i < m_products.size(); ++i) {
        const productinfo &product = m_products[i];
        // 创建卡片容器
        qwidget *card = new qwidget();
        card->setfixedsize(200, 200);
        card->setproperty("productindex", i);
        card->installeventfilter(this);
        // 卡片内部布局
        qvboxlayout *cardlayout = new qvboxlayout(card);
        // 产品图标
        qlabel *iconlabel = new qlabel(product.image);
        iconlabel->setalignment(qt::aligncenter);
        cardlayout->addwidget(iconlabel);
        // 产品标题
        qlabel *titlelabel = new qlabel(product.title);
        titlelabel->setalignment(qt::aligncenter);
        cardlayout->addwidget(titlelabel);
        // 添加到网格布局
        int row = i / 3;
        int col = i % 3;
        m_gridlayout->addwidget(card, row, col, qt::aligncenter);
    }
    // 连接信号
    connect(m_detailpage, &detailpage::backrequest, this, &mainwindow::onbackfromdetail);
}
void mainwindow::initproducts()
{
    m_products = {
        {
            "火灾预防",
            "🔥",
            "火灾预防是消防安全的第一道防线。本产品包含家庭用电安全规范、厨房用火注意事项等。"
        }
    };
}
void mainwindow::onproductclicked(int index)
{
    if (index >= 0 && index < m_products.size()) {
        const productinfo &product = m_products[index];
        m_detailpage->setproductinfo(product.title, product.image, product.details);
        m_stackedwidget->setcurrentindex(1);
    }
}
void mainwindow::onbackfromdetail()
{
    m_stackedwidget->setcurrentindex(0);
}
bool mainwindow::eventfilter(qobject *obj, qevent *event)
{
    if (event->type() == qevent::mousebuttonpress) {
        qmouseevent *mouseevent = static_cast<qmouseevent*>(event);
        if (mouseevent->button() == qt::leftbutton) {
            qwidget *card = qobject_cast<qwidget*>(obj);
            if (card) {
                int index = card->property("productindex").toint();
                onproductclicked(index);
                return true;
            }
        }
    }
    return qwidget::eventfilter(obj, event);
}

detailpage.h

#ifndef detailpage_h
#define detailpage_h
#include <qwidget>
#include <qtextedit>
#include <qpushbutton>
class detailpage : public qwidget
{
    q_object
public:
    explicit detailpage(qwidget *parent = nullptr);
    void setproductinfo(const qstring &title, const qstring &image, const qstring &details);
signals:
    void backrequest();
private slots:
    void onbackclicked();
private:
    qtextedit *m_detailstext;
    qpushbutton *m_backbutton;
};
#endif // detailpage_h

detailpage.cpp

#include "detailpage.h"
#include <qvboxlayout>
#include <qhboxlayout>
detailpage::detailpage(qwidget *parent)
    : qwidget{parent}
{
    qvboxlayout *mainlayout = new qvboxlayout(this);
    // 返回按钮
    m_backbutton = new qpushbutton("返回");
    connect(m_backbutton, &qpushbutton::clicked, this, &detailpage::onbackclicked);
    // 详细信息显示
    m_detailstext = new qtextedit();
    m_detailstext->setreadonly(true);
    mainlayout->addwidget(m_backbutton);
    mainlayout->addwidget(m_detailstext);
}
void detailpage::setproductinfo(const qstring &title, const qstring &image, const qstring &details)
{
    qstring formatteddetails = qstring("<h2>%1</h2><p>%2</p>").arg(title, details);
    m_detailstext->sethtml(formatteddetails);
}
void detailpage::onbackclicked()
{
    emit backrequest();
}