基本レイアウトの例

「基本的なレイアウト」では、Qt で利用可能な標準のレイアウトマネージャー（QBoxLayout 、QGridLayout 、QFormLayout ）の使用方法を示しています。

QBoxLayout クラスは、ウィジェットを水平または垂直に並べるものです。QHBoxLayout およびQVBoxLayout は、QBoxLayout の便利なサブクラスです。QGridLayout は、利用可能なスペースを行と列に分割して、ウィジェットをセル内に配置します。一方、QFormLayout は、子要素を 2 列の形式で配置し、左の列にラベル、右の列に入力フィールドを配置します。

詳細については、「レイアウト管理」ページをご覧ください。

例の動作確認

以下の手順でサンプルを実行できます。

• Qt Creator

  Welcome モードを開き、Examples からサンプルを選択してください。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル：ビルドと実行」を参照してください。

Dialogクラスの定義

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:
    void createMenu();
    void createHorizontalGroupBox();
    void createGridGroupBox();
    void createFormGroupBox();

    enum { NumGridRows = 3, NumButtons = 4 };

    QMenuBar *menuBar;
    QGroupBox *horizontalGroupBox;
    QGroupBox *gridGroupBox;
    QGroupBox *formGroupBox;
    QTextEdit *smallEditor;
    QTextEdit *bigEditor;
    QLabel *labels[NumGridRows];
    QLineEdit *lineEdits[NumGridRows];
    QPushButton *buttons[NumButtons];
    QDialogButtonBox *buttonBox;

    QMenu *fileMenu;
    QAction *exitAction;
};

Dialog クラスはQDialog を継承しています。これは、ジオメトリマネージャ（QHBoxLayout 、QVBoxLayout 、QGridLayout 、QFormLayout ）を使用して子ウィジェットを表示するカスタムウィジェットです。

クラスのコンストラクタを簡略化するために、4つのプライベート関数が用意されています。createMenu() 、createHorizontalGroupBox() 、createGridGroupBox() 、およびcreateFormGroupBox() の各関数は、レイアウトがウィジェットの外観にどのように影響するかを示すために、この例で使用されるいくつかのウィジェットを作成します。

Dialog クラスの実装

Dialog::Dialog()
{
    createMenu();
    createHorizontalGroupBox();
    createGridGroupBox();
    createFormGroupBox();

コンストラクタでは、まずcreateMenu() 関数を使用してメニューバーを作成・初期化し、createHorizontalGroupBox() 関数を使用して、水平レイアウトで4つのボタンを含むグループボックスを作成します。 次に、createGridGroupBox() 関数を使用して、グリッドレイアウトで表示される複数のラインエディットと小さなテキストエディタを含むグループボックスを作成します。最後に、createFormGroupBox() 関数を使用して、3つのラベルと3つの入力フィールド（ラインエディット、コンボボックス、スピンボックス）を持つグループボックスを作成します。

    bigEditor = new QTextEdit;
    bigEditor->setPlainText(tr("This widget takes up all the remaining space "
                               "in the top-level layout."));

    buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok
                                     | QDialogButtonBox::Cancel);

    connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept);
    connect(buttonBox, &QDialogButtonBox::rejected, this, &QDialog::reject);

また、大きなテキストエディタとダイアログボタンボックスも作成します。QDialogButtonBox クラスは、現在のウィジェットスタイルに適したレイアウトでボタンを表示するウィジェットです。使用するボタンは、QDialogButtonBox::StandardButtons 列挙型を使用して、コンストラクタの引数として指定できます。

なお、ウィジェットを作成する際に親を指定する必要はありません。その理由は、ここで作成するすべてのウィジェットがレイアウトに追加されるためです。ウィジェットをレイアウトに追加すると、そのウィジェットは自動的に、レイアウトが配置されているウィジェットを親として再設定されます。

    QVBoxLayout *mainLayout = new QVBoxLayout;

メインのレイアウトは `QVBoxLayout ` オブジェクトです。`QVBoxLayout ` は、垂直方向のボックスレイアウト用の利便性クラスです。

一般的に、QBoxLayout クラスは（親レイアウトまたは親ウィジェットから）割り当てられたスペースを、一連のボックスに分割し、管理対象の各ウィジェットが1つのボックスを埋めるようにします。QBoxLayout のorientationがQt::Horizontal の場合、ボックスは行（row）に配置されます。orientationがQt::Vertical の場合、ボックスは列（column）に配置されます。 これに対応する利便性クラスは、それぞれQHBoxLayout およびQVBoxLayout です。

    mainLayout->setMenuBar(menuBar);

QLayout::setMenuBar() 関数を呼び出すと、レイアウトは指定されたメニューバーを親ウィジェットの上部、かつウィジェットのcontent margins の外側に配置します。すべての子ウィジェットは、メニューバーの下端より下に配置されます。

    mainLayout->addWidget(horizontalGroupBox);
    mainLayout->addWidget(gridGroupBox);
    mainLayout->addWidget(formGroupBox);
    mainLayout->addWidget(bigEditor);
    mainLayout->addWidget(buttonBox);

QBoxLayout::addWidget() 関数を使用して、ウィジェットをレイアウトの末尾に追加します。各ウィジェットには、最小サイズ以上、最大サイズ以下の領域が割り当てられます。addWidget() 関数でストレッチ係数を指定することができ、余剰スペースはこれらのストレッチ係数に従って分配されます。指定がない場合、ウィジェットのストレッチ係数は 0 となります。

    setLayout(scrollLayout);
    setWindowTitle(tr("Basic Layouts"));
}

QWidget::setLayout() 関数を使用して、Dialog ウィジェットにメインレイアウトを配置します。これにより、レイアウト内のすべてのウィジェットは自動的に親ウィジェットを変更され、Dialog ウィジェットの子となります。

void Dialog::createMenu()
{
    menuBar = new QMenuBar;

    fileMenu = new QMenu(tr("&File"), this);
    exitAction = fileMenu->addAction(tr("E&xit"));
    menuBar->addMenu(fileMenu);

    connect(exitAction, &QAction::triggered, this, &QDialog::accept);
}

createMenu() のプライベート関数内で、メニューバーを作成し、Exit オプションを含むプルダウンFile メニューを追加します。

void Dialog::createHorizontalGroupBox()
{
    horizontalGroupBox = new QGroupBox(tr("Horizontal layout"));
    QHBoxLayout *layout = new QHBoxLayout;

    for (int i = 0; i < NumButtons; ++i) {
        buttons[i] = new QPushButton(tr("Button %1").arg(i + 1));
        layout->addWidget(buttons[i]);
    }
    horizontalGroupBox->setLayout(layout);
}

水平グループボックスを作成する際は、内部レイアウトとしてQHBoxLayout を使用します。グループボックス内に配置したいボタンを作成し、それらをレイアウトに追加した上で、そのレイアウトをグループボックスに適用します。

void Dialog::createGridGroupBox()
{
    gridGroupBox = new QGroupBox(tr("Grid layout"));

createGridGroupBox() 関数内では、ウィジェットをグリッド状に配置するQGridLayout を使用します。これは、割り当てられたスペース（親レイアウトまたは親ウィジェットによって）を横列と縦列に分割し、管理する各ウィジェットを適切なセルに配置します。

    for (int i = 0; i < NumGridRows; ++i) {
        labels[i] = new QLabel(tr("Line %1:").arg(i + 1));
        lineEdits[i] = new QLineEdit;
        layout->addWidget(labels[i], i + 1, 0);
        layout->addWidget(lineEdits[i], i + 1, 1);
    }

グリッドの各行について、ラベルとそれに対応するラインエディットを作成し、それらをレイアウトに追加します。QGridLayout::addWidget() 関数は、QBoxLayout の対応する関数とは異なります。この関数では、ウィジェットを配置するグリッドセルを指定する行と列が必要です。

    smallEditor = new QTextEdit;
    smallEditor->setPlainText(tr("This widget takes up about two thirds of the "
                                 "grid layout."));
    layout->addWidget(smallEditor, 0, 2, 4, 1);

QGridLayout::addWidget() 関数には、さらに、セルが横断する行数と列数を指定する引数を渡すこともできます。この例では、3 行 1 列にまたがる小さなエディタを作成します。

QBoxLayout::addWidget() 関数とQGridLayout::addWidget() 関数の両方において、ウィジェットの配置を指定する最後の引数を追加することも可能です。デフォルトでは、ウィジェットはセル全体を埋めます。しかし、例えば、配置をQt::AlignRight と指定することで、ウィジェットを右端に揃えることができます。

    layout->setColumnStretch(1, 10);
    layout->setColumnStretch(2, 20);
    gridGroupBox->setLayout(layout);
}

グリッドレイアウトの各列には、ストレッチ係数が設定されています。ストレッチ係数はQGridLayout::setColumnStretch() を使用して設定され、列に必要な最小幅を超えて、利用可能なスペースのうちどの程度の領域を割り当てるかを決定します。

この例では、列1と列2のストレッチ係数を設定しています。ストレッチ係数は、このグリッド内の他の列に対する相対的な値であり、ストレッチ係数の高い列ほど、利用可能なスペースをより多く占めます。 したがって、このグリッドレイアウトでは、列2が列1よりも多くの利用可能なスペースを割り当てられ、列0はストレッチ係数が0（デフォルト）であるため、まったく拡大しません。

列と行の挙動は同じです。行にも同等のストレッチ係数があり、QGridLayout::setRowStretch() 関数も用意されています。

void Dialog::createFormGroupBox()
{
    formGroupBox = new QGroupBox(tr("Form layout"));
    QFormLayout *layout = new QFormLayout;
    layout->addRow(new QLabel(tr("Line 1:")), new QLineEdit);
    layout->addRow(new QLabel(tr("Line 2, long text:")), new QComboBox);
    layout->addRow(new QLabel(tr("Line 3:")), new QSpinBox);
    formGroupBox->setLayout(layout);
}

createFormGroupBox() 関数では、QFormLayout を使用して、オブジェクトを「名前」と「フィールド」の2つの列に整然と配置します。名前用のQLabel オブジェクトが3つあり、それに対応するフィールド用の入力ウィジェットが3つあります。QLineEdit 、QComboBox 、QSpinBox です。QBoxLayout::addWidget()やQGridLayout::addWidget()とは異なり、QFormLayout::addRow()を使用してウィジェットをレイアウトに追加します。

サンプルプロジェクト @ code.qt.io