Widget 教程 - 嵌套布局 ¶

Just as widgets can contain other widgets, layouts can be used to provide different levels of grouping for widgets. Here, we want to display a label alongside a line edit at the top of a window, above a table view showing the results of a query.

We achieve this by creating two layouts: queryLayout 是 QHBoxLayout that contains QLabel and QLineEdit widgets placed side-by-side; mainLayout 是 QVBoxLayout that contains queryLayout 和 QTableView arranged vertically.

#include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QLabel *queryLabel = new QLabel( QApplication::translate("nestedlayouts", "Query:")); QLineEdit *queryEdit = new QLineEdit(); QTableView *resultView = new QTableView(); QHBoxLayout *queryLayout = new QHBoxLayout(); queryLayout->addWidget(queryLabel); queryLayout->addWidget(queryEdit); QVBoxLayout *mainLayout = new QVBoxLayout(); mainLayout->addLayout(queryLayout); mainLayout->addWidget(resultView); window.setLayout(mainLayout); // Set up the model and configure the view... window.setWindowTitle( QApplication::translate("nestedlayouts", "Nested layouts")); window.show(); return app.exec(); }

Note that we call the mainLayout ‘s addLayout() function to insert the queryLayout above the resultView table.

We have omitted the code that sets up the model containing the data shown by the QTableView widget, resultView . For completeness, we show this below.

As well as QHBoxLayout and QVBoxLayout , Qt also provides QGridLayout and QFormLayout classes to help with more complex user interfaces. These can be seen if you run Qt Designer.