小部件教程 - 嵌套布局

与小部件可以包含其他小部件一样，布局可以用于为小部件提供不同层级的分组。在这里，我们想在窗口顶部显示一个标签和一条线编辑，在显示查询结果的表格视图上方。

我们通过创建两个布局来实现这一功能：queryLayout 是一个包含置于旁边的 QHBoxLayout，它包含 QLabel 和 QLineEdit 小部件；mainLayout 是一个 QVBoxLayout，它包含 queryLayout 和垂直排列的 QTableView。

#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();
}

请注意，我们调用 mainLayout 的 addLayout() 函数在 resultView 表格上方插入 queryLayout。

我们省略了设置 QTableView 小部件 resultView 中显示数据的模型的代码。为了完整，我们下面显示这些代码。

除了 QHBoxLayout 和 QVBoxLayout，Qt 还提供了 QGridLayout 和 QFormLayout 类来帮助构建更复杂的用户界面。这些可以在运行 Qt Designer 时看到。

设置模型

在上面的代码中，我们没有显示表格数据来源的地方，因为我们想集中讨论布局的使用。在这里，我们看到模型包含与行相对应的一系列项目，每个项目都设置用来包含两列的数据。

    QStandardItemModel model;
    model.setHorizontalHeaderLabels({ QApplication::translate("nestedlayouts", "Name"),
                                      QApplication::translate("nestedlayouts", "Office") });

    const QStringList rows[] = {
        QStringList{ QStringLiteral("Verne Nilsen"), QStringLiteral("123") },
        QStringList{ QStringLiteral("Carlos Tang"), QStringLiteral("77") },
        QStringList{ QStringLiteral("Bronwyn Hawcroft"), QStringLiteral("119") },
        QStringList{ QStringLiteral("Alessandro Hanssen"), QStringLiteral("32") },
        QStringList{ QStringLiteral("Andrew John Bakken"), QStringLiteral("54") },
        QStringList{ QStringLiteral("Vanessa Weatherley"), QStringLiteral("85") },
        QStringList{ QStringLiteral("Rebecca Dickens"), QStringLiteral("17") },
        QStringList{ QStringLiteral("David Bradley"), QStringLiteral("42") },
        QStringList{ QStringLiteral("Knut Walters"), QStringLiteral("25") },
        QStringList{ QStringLiteral("Andrea Jones"), QStringLiteral("34") }
    };

    QList<QStandardItem *> items;
    for (const QStringList &row : rows) {
        items.clear();
        for (const QString &text : row)
            items.append(new QStandardItem(text));
        model.appendRow(items);
    }

    resultView->setModel(&model);
    resultView->verticalHeader()->hide();
    resultView->horizontalHeader()->setStretchLastSection(true);

模型和视图的使用在项视图示例和模型/视图编程概述中有说明。

示例项目 @ code.qt.io