[C++] Qt QStackedWidgetで実現するウィジェット切り替え基本操作

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    // メインウィジェットの作成
    QWidget mainWindow;
    mainWindow.setWindowTitle("addWidgetでのウィジェット追加サンプル");
    // QStackedWidgetのインスタンスを作成
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    // 複数ページとなるウィジェットの作成
    QWidget *page1 = new QWidget;
    page1->setStyleSheet("background-color: lightblue;");
    QWidget *page2 = new QWidget;
    page2->setStyleSheet("background-color: lightgreen;");
    // addWidgetによるウィジェットの追加
    stackedWidget->addWidget(page1);
    stackedWidget->addWidget(page2);
    // QVBoxLayoutにウィジェットを組み込む
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

アプリケーションが起動し、青と緑の背景色を持つ2つのページがスタックされているウィンドウが表示されます

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget mainWindow;
    mainWindow.setWindowTitle("insertWidgetで位置指定サンプル");
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    QWidget *page1 = new QWidget;
    page1->setStyleSheet("background-color: pink;");
    QWidget *page2 = new QWidget;
    page2->setStyleSheet("background-color: orange;");
    QWidget *page3 = new QWidget;
    page3->setStyleSheet("background-color: yellow;");
    // 最初にpage1とpage3を追加
    stackedWidget->addWidget(page1);
    stackedWidget->addWidget(page3);
    // page2をpage1とpage3の間に挿入
    stackedWidget->insertWidget(1, page2);
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

オレンジ、黄色、ピンクの色が割り当てられた各ページが、挿入順序に応じて管理されるウィンドウが表示されます

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
#include <QPushButton>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget mainWindow;
    mainWindow.setWindowTitle("setCurrentIndexによるウィジェット切り替えサンプル");
    // QStackedWidgetの作成
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    QWidget *page1 = new QWidget;
    page1->setStyleSheet("background-color: lavender;");
    QWidget *page2 = new QWidget;
    page2->setStyleSheet("background-color: khaki;");
    stackedWidget->addWidget(page1);
    stackedWidget->addWidget(page2);
    // 切り替えボタンの作成とレイアウトの設定
    QPushButton *switchButton = new QPushButton("ウィジェット切り替え");
    QObject::connect(switchButton, &QPushButton::clicked, [=](){
        // 現在のインデックスに応じて切り替える
        int currentIndex = stackedWidget->currentIndex();
        int nextIndex = (currentIndex + 1) % stackedWidget->count();
        stackedWidget->setCurrentIndex(nextIndex);
    });
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    layout->addWidget(switchButton);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

<<ウィジェットが切り替わる動作を確認できるウィンドウが表示され、切り替えボタンを押すと背景色が変わります>>

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
#include <QPushButton>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget mainWindow;
    mainWindow.setWindowTitle("setCurrentWidgetによるウィジェット切り替えサンプル");
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    QWidget *pageA = new QWidget;
    pageA->setStyleSheet("background-color: coral;");
    QWidget *pageB = new QWidget;
    pageB->setStyleSheet("background-color: lightgray;");
    stackedWidget->addWidget(pageA);
    stackedWidget->addWidget(pageB);
    // 切り替え対象に応じたボタンを生成
    QPushButton *buttonA = new QPushButton("Page Aを表示");
    QPushButton *buttonB = new QPushButton("Page Bを表示");
    QObject::connect(buttonA, &QPushButton::clicked, [=](){
        stackedWidget->setCurrentWidget(pageA);
    });
    QObject::connect(buttonB, &QPushButton::clicked, [=](){
        stackedWidget->setCurrentWidget(pageB);
    });
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    layout->addWidget(buttonA);
    layout->addWidget(buttonB);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

<<Page AおよびPage Bの表示がボタン操作で切り替えられるウィンドウが表示されます>>

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
#include <QPushButton>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget mainWindow;
    mainWindow.setWindowTitle("removeWidgetの利用サンプル");
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    QWidget *pageOne = new QWidget;
    pageOne->setStyleSheet("background-color: lightcoral;");
    QWidget *pageTwo = new QWidget;
    pageTwo->setStyleSheet("background-color: lightseagreen;");
    stackedWidget->addWidget(pageOne);
    stackedWidget->addWidget(pageTwo);
    QPushButton *removeButton = new QPushButton("Page Oneを削除");
    QObject::connect(removeButton, &QPushButton::clicked, [=](){
        // pageOneをスタックから削除
        stackedWidget->removeWidget(pageOne);
        // 必要に応じてdeleteする処理を実行
        pageOne->deleteLater();
    });
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    layout->addWidget(removeButton);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

<<ボタンをクリックすると、Page Oneがスタックから削除され、残りのウィジェットのみが表示されます>>

#include <QApplication>
#include <QWidget>
#include <QStackedWidget>
#include <QVBoxLayout>
#include <QPushButton>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget mainWindow;
    mainWindow.setWindowTitle("QVBoxLayoutとQStackedWidgetの連携サンプル");
    QStackedWidget *stackedWidget = new QStackedWidget(&mainWindow);
    QWidget *upperPage = new QWidget;
    upperPage->setStyleSheet("background-color: lightsteelblue;");
    QWidget *lowerPage = new QWidget;
    lowerPage->setStyleSheet("background-color: beige;");
    stackedWidget->addWidget(upperPage);
    stackedWidget->addWidget(lowerPage);
    QPushButton *switchButton = new QPushButton("ページを切替");
    QObject::connect(switchButton, &QPushButton::clicked, [=](){
        int currentIndex = stackedWidget->currentIndex();
        int nextIndex = (currentIndex + 1) % stackedWidget->count();
        stackedWidget->setCurrentIndex(nextIndex);
    });
    QVBoxLayout *layout = new QVBoxLayout(&mainWindow);
    layout->addWidget(stackedWidget);
    layout->addWidget(switchButton);
    mainWindow.setLayout(layout);
    mainWindow.resize(400, 300);
    mainWindow.show();
    return app.exec();
}

<<上部にウィジェット、下部にボタンが配置されたウィンドウが表示され、ボタン操作でページが切り替わります>>