**Course Title:** Qt 6 Application Development with C++ **Section Title:** Building Responsive and Dynamic UIs **Topic:** Introduction to QStackedWidget and QSplitter for dynamic layouts. **Overview** --------------- In the previous sections, we learned about designing dynamic UIs that respond to window resizing. In this topic, we will explore two powerful widgets in Qt that help create dynamic and flexible layouts: QStackedWidget and QSplitter. **QStackedWidget** ----------------- QStackedWidget is a container widget that allows you to stack multiple widgets on top of each other, displaying only one at a time. This widget is useful when you want to show different views or pages in the same window, without having to create multiple windows. Here is an example of how to use QStackedWidget: ```cpp #include <QStackedWidget> #include <QPushButton> #include <QWidget> int main() { QApplication app(argc, argv); QStackedWidget stackedWidget; stackedWidget.setWindowTitle("QStackedWidget Example"); QWidget page1; QPushButton button1("Page 1", &page1); page1.setLayout(new QVBoxLayout()); page1.layout()->addWidget(&button1); QWidget page2; QPushButton button2("Page 2", &page2); page2.setLayout(new QVBoxLayout()); page2.layout()->addWidget(&button2); stackedWidget.addWidget(&page1); stackedWidget.addWidget(&page2); QPushButton switchButton("Switch Page"); QObject::connect(&switchButton, &QPushButton::clicked, [&stackedWidget]() { int currentIndex = stackedWidget.currentIndex(); if (currentIndex == 0) { stackedWidget.setCurrentIndex(1); } else { stackedWidget.setCurrentIndex(0); } }); QVBoxLayout layout; layout.addWidget(&stackedWidget); layout.addWidget(&switchButton); QWidget window; window.setLayout(&layout); window.show(); return app.exec(); } ``` In this example, we create a QStackedWidget and add two pages to it. We also create a QPushButton that switches between the two pages when clicked. **QSplitter** ------------- QSplitter is a widget that divides the available space into two or more sub-widgets, allowing the user to resize them interactively. This widget is useful when you want to display multiple views or widgets side-by-side, and allow the user to adjust their sizes. Here is an example of how to use QSplitter: ```cpp #include <QSplitter> #include <QWidget> #include <QPushButton> int main() { QApplication app(argc, argv); QSplitter splitter(Qt::Horizontal); QWidget widget1; QPushButton button1("Widget 1", &widget1); widget1.setLayout(new QVBoxLayout()); widget1.layout()->addWidget(&button1); QWidget widget2; QPushButton button2("Widget 2", &widget2); widget2.setLayout(new QVBoxLayout()); widget2.layout()->addWidget(&button2); splitter.addWidget(&widget1); splitter.addWidget(&widget2); splitter.show(); return app.exec(); } ``` In this example, we create a QSplitter and add two widgets to it. The widgets are displayed side-by-side, and the user can resize them interactively. **Key Concepts** ---------------- * QStackedWidget allows you to stack multiple widgets on top of each other, displaying only one at a time. * QSplitter divides the available space into two or more sub-widgets, allowing the user to resize them interactively. * Both QStackedWidget and QSplitter are useful for creating dynamic and flexible layouts. **Practical Takeaways** ------------------------- * Use QStackedWidget when you want to show different views or pages in the same window. * Use QSplitter when you want to display multiple views or widgets side-by-side, and allow the user to adjust their sizes. * Consider using QStackedWidget and QSplitter together to create complex dynamic layouts. **Example Use Case** -------------------- Suppose you are building a web browser with multiple tabs. You can use QStackedWidget to display the different tabs, and QSplitter to divide the available space between the tabs and the address bar. **Conclusion** ---------- In this topic, we learned about QStackedWidget and QSplitter, two powerful widgets in Qt that help create dynamic and flexible layouts. We explored their features and use cases, and saw examples of how to use them in practice. **Comments and Questions** --------------------------- If you have any comments or questions about this topic, feel free to leave them below. **External Resources** ---------------------- For more information about QStackedWidget and QSplitter, see the official Qt documentation: * [QStackedWidget](https://doc.qt.io/qt-6/qstackedwidget.html) * [QSplitter](https://doc.qt.io/qt-6/qsplitter.html) **Next Topic** ---------------- In the next topic, we will learn about using QTabWidget for multi-view interfaces.