**Course Title:** Qt 6 Application Development with C++ **Section Title:** Widgets, Layouts, and Events **Topic:** Working with layouts: QVBoxLayout, QHBoxLayout, QGridLayout. **Overview** In the previous topic, we introduced the basic Qt widgets and their usage. However, a GUI application would look disorganized without a proper layout. Qt provides an efficient way to arrange widgets using layouts, which helps in creating visually appealing and user-friendly interfaces. In this topic, we will cover the most commonly used layouts in Qt: QVBoxLayout, QHBoxLayout, and QGridLayout. **什么是Layouts?** In Qt, a layout is an instance of a class that inherits from the QLayout class. A layout can contain other layouts or widgets, allowing you to create complex and nested layouts. **-vertical Layout (QVBoxLayout)** QVBoxLayout is a layout that arranges widgets vertically, one below the other. This layout is useful for creating interfaces where you want to display a list of widgets. Example: ```cpp #include <QVBoxLayout> #include <QPushButton> #include <QWidget> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QVBoxLayout layout; QPushButton button1("Button 1"); QPushButton button2("Button 2"); QPushButton button3("Button 3"); layout.addWidget(&button1); layout.addWidget(&button2); layout.addWidget(&button3); window.setLayout(&layout); window.show(); return app.exec(); } ``` In this example, we created a QVBoxLayout and added three QPushButton instances to it. When you run this application, you will see the buttons arranged vertically in a window. **Horizontal Layout (QHBoxLayout)** QHBoxLayout is a layout that arranges widgets horizontally, side by side. This layout is useful for creating interfaces where you want to display a row of widgets. Example: ```cpp #include <QHBoxLayout> #include <QPushButton> #include <QWidget> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QHBoxLayout layout; QPushButton button1("Button 1"); QPushButton button2("Button 2"); QPushButton button3("Button 3"); layout.addWidget(&button1); layout.addWidget(&button2); layout.addWidget(&button3); window.setLayout(&layout); window.show(); return app.exec(); } ``` In this example, we created a QHBoxLayout and added three QPushButton instances to it. When you run this application, you will see the buttons arranged horizontally in a window. **Grid Layout (QGridLayout)** QGridLayout is a layout that arranges widgets in a grid of rows and columns. This layout is useful for creating complex interfaces where you want to display multiple widgets in a grid. Example: ```cpp #include <QGridLayout> #include <QPushButton> #include <QWidget> #include <QLineEdit> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QGridLayout layout; QPushButton button1("Button 1"); QPushButton button2("Button 2"); QPushButton button3("Button 3"); QPushButton button4("Button 4"); QLineEdit lineEdit; layout.addWidget(&button1, 0, 0); layout.addWidget(&button2, 0, 1); layout.addWidget(&button3, 1, 0); layout.addWidget(&button4, 1, 1); layout.addWidget(&lineEdit, 2, 0, 1, 2); window.setLayout(&layout); window.show(); return app.exec(); } ``` In this example, we created a QGridLayout and added multiple widgets to it. When you run this application, you will see the widgets arranged in a grid. **Nesting Layouts** Qt allows you to nest layouts to create complex interfaces. This means you can add a layout to another layout. Example: ```cpp #include <QVBoxLayout> #include <QHBoxLayout> #include <QPushButton> #include <QWidget> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QVBoxLayout mainLayout; QHBoxLayout topLayout; QHBoxLayout bottomLayout; QPushButton button1("Button 1"); QPushButton button2("Button 2"); QPushButton button3("Button 3"); QPushButton button4("Button 4"); topLayout.addWidget(&button1); topLayout.addWidget(&button2); bottomLayout.addWidget(&button3); bottomLayout.addWidget(&button4); mainLayout.addLayout(&topLayout); mainLayout.addLayout(&bottomLayout); window.setLayout(&mainLayout); window.show(); return app.exec(); } ``` In this example, we created a QVBoxLayout and added two QHBoxLayout instances to it. When you run this application, you will see the widgets arranged horizontally in two rows. **Practical Takeaways:** 1. **Use layouts to arrange widgets:** Layouts help create visually appealing and user-friendly interfaces. 2. **Choose the right layout:** QVBoxLayout, QHBoxLayout, and QGridLayout are the most commonly used layouts. Choose the one that best fits your interface design. 3. **Nest layouts to create complex interfaces:** Qt allows you to nest layouts to create complex interfaces. **External Resources:** * [Qt Documentation: Layout Management](https://doc.qt.io/qt-6/layout.html) * [Qt Documentation: QTimer Class](https://doc.qt.io/qt-6/qtimer.html) If you have any questions or need further clarification on any of the topics covered in this section, please leave a comment below.