QT布局管理详解QVBoxLayout与QHBoxLayout及QGridLayout的使用

下面是关于“QT布局管理详解QVBoxLayout与QHBoxLayout及QGridLayout的使用”的完整攻略。

布局管理器简介

QT布局管理器是QT GUI 设计界面中最重要的一部分，用于帮助开发者处理 Widget（QWidget）之间的布局关系，控制控件在可用空间中的大小、位置、对齐方式等。

在 QT 中，布局管理器主要由 QVBoxLayout、QHBoxLayout、QGridLayout 等基类实现。

QVBoxLayout

QVBoxLayout 管理的 Widget 视为一个垂直列的流式布局。它的 Widget 是从上到下排列的，各个 Widget 与 Widget 之间靠近一定的空间进行分隔。

QVBoxLayout* layout = new QVBoxLayout();
layout->addWidget(w1);
layout->addWidget(w2);
layout->addWidget(w3);
this->setLayout(layout);

这个例子创建了一个 QVBoxLayout 对象，将 w1、w2 和 w3 三个 Widget 纵向排列。 第四行代码将 QVBoxLayout 布局方式应用到 QWidget 对象上。

QHBoxLayout

QHBoxLayout 管理的 Widget 视为一个水平行的流式布局。它的 Widget 是从左到右排列的，各个 Widget 之间靠近一定的空间进行分隔。

QHBoxLayout* layout = new QHBoxLayout();
layout->addWidget(w1);
layout->addWidget(w2);
layout->addWidget(w3);
this->setLayout(layout);

这个例子创建了一个 QHBoxLayout 对象，将 w1，w2 和 w3 三个 Widget 横向排列。 第四行代码将 QHBoxLayout 布局方式应用到 QWidget 对象上。

QGridLayout

QGridLayout 管理的 Widget 视为一个网格布局。它的 Widget 是按照行列放置的。这就允许您比使用 QVBoxLayout 或 QHBoxLayout 提供更精细的控件位置。

QGridLayout* layout = new QGridLayout();
layout->addWidget(w1, 0, 0);
layout->addWidget(w2, 0, 1);
layout->addWidget(w3, 1, 0, 1, 2);
this->setLayout(layout);

这个例子创建了一个 QGridLayout 对象，并将其应用于当前的 QWidget 对象。 addWidget() 方法用于添加 Widget，并制定该 Widget 在网格中的位置。 上述例子将 w1 和 w2 放在第一行的第一列和第二列上，并将 w3 放在第二行的第一列上，它横跨网格的第二行和第三列。

布局管理器示例

简单的 QVBoxLayout 示例

下面是一个简单的 QVBoxLayout 示例，该示例将按钮添加到窗口，并将所有按钮垂直排列。

#include <QApplication>
#include <QVBoxLayout>
#include <QPushButton>
#include <QLabel>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget window;
    QVBoxLayout *vBox = new QVBoxLayout(&window);
    QVBoxLayout *vBox2 = new QVBoxLayout();
    QHBoxLayout *hBox = new QHBoxLayout();

    vBox->addWidget(new QLabel("Examples of various Qt-based UI layouts"));
    vBox->addLayout(vBox2);

    vBox2->addWidget(new QPushButton("OK"));
    vBox2->addWidget(new QPushButton("Cancel"));

    hBox->addWidget(new QPushButton("About"));
    hBox->addWidget(new QPushButton("Help"));

    vBox->addLayout(hBox);

    window.setLayout(vBox);
    window.setWindowTitle("Layout Example");
    window.show();

    return a.exec();
}

复杂的 QGridLayout 示例

下面是一个使用 QGridLayout 的示例，该示例以栅格形式呈现一个简单的计算器。

#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // Create a widget to hold everything
    QWidget *window = new QWidget;
    window->setWindowTitle("Calculator");

    // Create the UI's buttons
    QPushButton *numButton[10];
    for (int i = 0; i < 10; ++i) {
        QString buttonName = QString::number(i);
        numButton[i] = new QPushButton(buttonName);
    }
    QPushButton *addButton = new QPushButton("+");
    QPushButton *subtractButton = new QPushButton("-");
    QPushButton *multiplyButton = new QPushButton("*");
    QPushButton *divideButton = new QPushButton("/");

    // Create the textbox that shows the result
    QLabel *display = new QLabel("0");
    display->setAlignment(Qt::AlignRight);
    display->setMinimumSize(display->sizeHint());

    // Create the grid layout
    QGridLayout *layout = new QGridLayout;
    layout->setSizeConstraint(QLayout::SetFixedSize);
    layout->addWidget(display, 0, 0, 1, 4);
    layout->addWidget(addButton, 1, 3);
    layout->addWidget(subtractButton, 2, 3);
    layout->addWidget(multiplyButton, 3, 3);
    layout->addWidget(divideButton, 4, 3);
    for (int i = 1; i < 10; ++i) {
        int row = ((9 - i) / 3) + 1;
        int column = ((i - 1) % 3);
        layout->addWidget(numButton[i], row, column);
    }
    layout->addWidget(numButton[0], 4, 1);
    layout->addWidget(new QLabel(""), 4, 2);
    layout->addWidget(new QLabel(""), 4, 0);

    // Add the widget to the main window
    window->setLayout(layout);

    // Show the window and run the app
    window->show();
    return app.exec();
}

总之，了解 QT 布局管理器非常重要，因为它们提供了一种方便且一致的方式来管理和控制 Widget 之间的布局关系。无论您是开发新的应用程序，还是修改现有的应用程序，都可以在 QT 中获得最佳的布局管理器解决方案。