QStackedWidget仅显示第一页内容，期望实现Qt Designer式分页样式

问题描述 #

使用Qt 5在Windows 10系统编写QStackedWidget示例时，仅能看到第一页的Label控件，无法实现类似Qt Designer中带分页标题的切换样式，QStackedWidget仅展示第一页内容。

当前效果截图 #

期望效果截图 #

原代码 #

class QTest : public QDialog {
public:
    QTest(QWidget* parent = nullptr) : QDialog(parent) {
        setWindowTitle("Stacked Widget Example");

        QVBoxLayout* mainLayout = new QVBoxLayout(this);
        QStackedWidget* stackedWidget = new QStackedWidget(this);
        const int numPages = 5;
        for (int i = 0; i < numPages; ++i) {
            auto* optionsPage = new QWidget(this);
            auto* formLayout = new QFormLayout(optionsPage);

            optionsPage->setWindowTitle(QString("Page %1").arg(i + 1));

            formLayout->addRow(new QLabel(QString("Label %1").arg(i + 1)), new QLineEdit(this));

            stackedWidget->addWidget(optionsPage);
        }

        mainLayout->addWidget(stackedWidget);
        setLayout(mainLayout); // Ensure layout is set to the dialog
    }
};

void foo() {
    auto* pp = new QTest(this);
    pp->exec();
}

核心原因 #

混淆了QStackedWidget和QTabWidget的功能：

• QStackedWidget仅提供页面堆叠容器，本身没有自带分页标题切换栏，需要手动搭配切换控件。
• 你期望的带标题切换的样式，是QTabWidget的默认功能。

解决方法 #

方案1：使用QTabWidget直接实现（最简便） #

替换QStackedWidget为QTabWidget，它自带标签栏，直接添加页面并设置标题即可：

class QTest : public QDialog {
public:
    QTest(QWidget* parent = nullptr) : QDialog(parent) {
        setWindowTitle("Stacked Widget Example");

        QVBoxLayout* mainLayout = new QVBoxLayout(this);
        QTabWidget* tabWidget = new QTabWidget(this);
        const int numPages = 5;

        for (int i = 0; i < numPages; ++i) {
            auto* optionsPage = new QWidget(this);
            auto* formLayout = new QFormLayout(optionsPage);

            formLayout->addRow(new QLabel(QString("Label %1").arg(i + 1)), new QLineEdit(this));

            // 添加页面并设置标签标题
            tabWidget->addTab(optionsPage, QString("Page %1").arg(i + 1));
        }

        mainLayout->addWidget(tabWidget);
        setLayout(mainLayout);
    }
};

void foo() {
    auto* pp = new QTest(this);
    pp->exec();
}

方案2：QStackedWidget搭配切换控件（自定义切换方式） #

如果必须使用QStackedWidget，可以搭配QComboBox、按钮组等控件实现页面切换：

class QTest : public QDialog {
public:
    QTest(QWidget* parent = nullptr) : QDialog(parent) {
        setWindowTitle("Stacked Widget Example");

        QVBoxLayout* mainLayout = new QVBoxLayout(this);
        QStackedWidget* stackedWidget = new QStackedWidget(this);
        QComboBox* pageSelector = new QComboBox(this);
        const int numPages = 5;

        for (int i = 0; i < numPages; ++i) {
            auto* optionsPage = new QWidget(this);
            auto* formLayout = new QFormLayout(optionsPage);

            formLayout->addRow(new QLabel(QString("Label %1").arg(i + 1)), new QLineEdit(this));

            stackedWidget->addWidget(optionsPage);
            pageSelector->addItem(QString("Page %1").arg(i + 1));
        }

        // 关联切换信号，选择下拉项时切换对应页面
        connect(pageSelector, QOverload<int>::of(&QComboBox::currentIndexChanged),
                stackedWidget, &QStackedWidget::setCurrentIndex);

        mainLayout->addWidget(pageSelector);
        mainLayout->addWidget(stackedWidget);
        setLayout(mainLayout);
    }
};

void foo() {
    auto* pp = new QTest(this);
    pp->exec();
}

内容的提问来源于stack exchange，提问作者KungPhoo