Beispiel für grundlegende Layouts

„Grundlegende Layouts“ zeigt, wie man die in Qt verfügbaren Standard-Layout-Manager verwendet: QBoxLayout, QGridLayout und QFormLayout.

Die Klasse „ QBoxLayout “ ordnet Widgets horizontal oder vertikal an. „ QHBoxLayout “ und „ QVBoxLayout “ sind praktische Unterklassen von „ QBoxLayout “. „ QGridLayout “ ordnet Widgets in Zellen an, indem der verfügbare Platz in Zeilen und Spalten unterteilt wird. „ QFormLayout “ hingegen ordnet seine untergeordneten Elemente in einer zweispaltigen Anordnung an, wobei sich Beschriftungen in der linken Spalte und Eingabefelder in der rechten Spalte befinden.

Weitere Informationen finden Sie auf der Seite „Layout-Verwaltung “.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator “: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Definition der Dialog-Klasse

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;
};

Die Klasse „ Dialog “ erbt von „ QDialog “. Es handelt sich um ein benutzerdefiniertes Widget, das seine untergeordneten Widgets mithilfe der Geometrie-Manager „ QHBoxLayout “, „ QVBoxLayout “, „ QGridLayout “ und „ QFormLayout “ anzeigt.

Es gibt vier private Funktionen zur Vereinfachung des Klassenkonstruktors: Die Funktionen „ createMenu() “, „ createHorizontalGroupBox() “, „ createGridGroupBox() “ und „ createFormGroupBox() “ erstellen mehrere Widgets, anhand derer das Beispiel veranschaulicht, wie sich das Layout auf deren Erscheinungsbild auswirkt.

Implementierung der Dialog-Klasse

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

Im Konstruktor verwenden wir zunächst die Funktion ` createMenu() `, um eine Menüleiste zu erstellen und zu füllen, sowie die Funktion ` createHorizontalGroupBox() `, um eine Gruppenbox mit vier Schaltflächen in einem horizontalen Layout zu erstellen. Anschließend verwenden wir die Funktion „ createGridGroupBox() “, um eine Gruppenbox mit mehreren Zeileneingabefeldern und einem kleinen Texteditor zu erstellen, die in einem Rasterlayout angezeigt werden. Schließlich verwenden wir die Funktion „ createFormGroupBox() “, um eine Gruppenbox mit drei Beschriftungen und drei Eingabefeldern zu erstellen: ein Zeileneingabefeld, ein Kombinationsfeld und ein Drehfeld.

    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);

Außerdem erstellen wir einen großen Texteditor und eine Dialogschaltflächenbox. Die Klasse „ QDialogButtonBox “ ist ein Widget, das Schaltflächen in einem Layout darstellt, das dem aktuellen Widget-Stil entspricht. Die gewünschten Schaltflächen können als Argumente für den Konstruktor unter Verwendung der Enumeration „ QDialogButtonBox::StandardButtons “ angegeben werden.

Beachten Sie, dass wir beim Erstellen der Widgets kein übergeordnetes Widget angeben müssen. Der Grund dafür ist, dass alle Widgets, die wir hier erstellen, einem Layout hinzugefügt werden, und wenn wir ein Widget zu einem Layout hinzufügen, wird es automatisch dem Widget untergeordnet, auf dem das Layout installiert ist.

    QVBoxLayout *mainLayout = new QVBoxLayout;

Das Hauptlayout ist ein „ QVBoxLayout “-Objekt. „ QVBoxLayout “ ist eine Komfortklasse für ein Box-Layout mit vertikaler Ausrichtung.

Im Allgemeinen nimmt die Klasse „ QBoxLayout “ den ihr zur Verfügung stehenden Platz (von ihrem übergeordneten Layout oder vom übergeordneten Widget) ein, unterteilt ihn in eine Reihe von Boxen und sorgt dafür, dass jedes verwaltete Widget eine Box ausfüllt. Wenn die Ausrichtung des „ QBoxLayout “ auf „ Qt::Horizontal “ gesetzt ist, werden die Boxen in einer Reihe angeordnet. Wenn die Ausrichtung auf „ Qt::Vertical “ gesetzt ist, werden die Boxen in einer Spalte angeordnet. Die entsprechenden Hilfs-Klassen sind „ QHBoxLayout “ bzw. „ QVBoxLayout “.

    mainLayout->setMenuBar(menuBar);

Wenn wir die Funktion ` QLayout::setMenuBar()` aufrufen, platziert das Layout die bereitgestellte Menüleiste am oberen Rand des übergeordneten Widgets und außerhalb des ` content margins` des Widgets. Alle untergeordneten Widgets werden unterhalb der Unterkante der Menüleiste platziert.

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

Wir verwenden die Funktion ` QBoxLayout::addWidget()``, um die Widgets am Ende des Layouts hinzuzufügen. Jedes Widget erhält mindestens seine Mindestgröße und höchstens seine Höchstgröße. In der Funktion ` addWidget()`` kann ein Dehnungsfaktor angegeben werden, und überschüssiger Platz wird entsprechend diesen Dehnungsfaktoren aufgeteilt. Wird kein Dehnungsfaktor angegeben, beträgt der Dehnungsfaktor eines Widgets 0.

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

Wir fügen das Hauptlayout mithilfe der Funktion ` QWidget::setLayout()` in das Widget ` Dialog ` ein, und alle Widgets des Layouts werden automatisch als untergeordnete Elemente des Widgets ` Dialog ` neu zugeordnet.

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

In der privaten Funktion „ createMenu() “ erstellen wir eine Menüleiste und fügen ein Pulldown-Menü „ File “ hinzu, das die Option „ Exit “ enthält.

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

Beim Erstellen des horizontalen Gruppenfelds verwenden wir ein „ QHBoxLayout “ als internes Layout. Wir erstellen die Schaltflächen, die wir in das Gruppenfeld einfügen möchten, fügen sie dem Layout hinzu und weisen das Layout dem Gruppenfeld zu.

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

In der Funktion „ createGridGroupBox() “ verwenden wir ein „ QGridLayout “, das Widgets in einem Raster anordnet. Es nimmt den ihm zur Verfügung gestellten Platz (durch sein übergeordnetes Layout oder das übergeordnete Widget) ein, unterteilt ihn in Zeilen und Spalten und platziert jedes von ihm verwaltete Widget in die richtige Zelle.

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

Für jede Zeile im Raster erstellen wir ein Label und ein zugehöriges Line-Edit-Feld und fügen diese dem Layout hinzu. Die Funktion ` QGridLayout::addWidget()` unterscheidet sich von der entsprechenden Funktion in ` QBoxLayout`: Sie benötigt die Zeilen- und Spaltenangabe, die die Rasterzelle spezifizieren, in die das Widget eingefügt werden soll.

    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() kann zusätzlich Argumente entgegennehmen, die die Anzahl der Zeilen und Spalten angeben, über die sich die Zelle erstrecken soll. In diesem Beispiel erstellen wir einen kleinen Editor, der sich über drei Zeilen und eine Spalte erstreckt.

Sowohl bei der Funktion ` QBoxLayout::addWidget()` als auch bei ` QGridLayout::addWidget()` ist es außerdem möglich, ein letztes Argument hinzuzufügen, das die Ausrichtung des Widgets festlegt. Standardmäßig füllt es die gesamte Zelle aus. Wir könnten ein Widget jedoch beispielsweise am rechten Rand ausrichten, indem wir die Ausrichtung auf ` Qt::AlignRight` festlegen.

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

Jede Spalte in einem Rasterlayout verfügt über einen Dehnungsfaktor. Der Dehnungsfaktor wird mit ` QGridLayout::setColumnStretch()` festgelegt und bestimmt, wie viel des verfügbaren Platzes die Spalte über ihr erforderliches Minimum hinaus einnimmt.

In diesem Beispiel legen wir die Stretch-Faktoren für die Spalten 1 und 2 fest. Der Stretch-Faktor ist relativ zu den anderen Spalten in diesem Raster; Spalten mit einem höheren Stretch-Faktor nehmen mehr vom verfügbaren Platz ein. Somit erhält Spalte 2 in unserem Rasterlayout mehr vom verfügbaren Platz als Spalte 1, und Spalte 0 wird sich überhaupt nicht ausdehnen, da ihr Dehnungsfaktor 0 ist (Standardwert).

Spalten und Zeilen verhalten sich identisch; es gibt einen entsprechenden Dehnungsfaktor für Zeilen sowie eine Funktion „ 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);
}

In der Funktion ` createFormGroupBox() ` verwenden wir ein ` QFormLayout `, um Objekte übersichtlich in zwei Spalten – „name“ und „field“ – anzuordnen. Es gibt drei ` QLabel `-Objekte für Namen mit drei entsprechenden Eingabe-Widgets als Felder: ein ` QLineEdit`, ein ` QComboBox ` und ein ` QSpinBox`. Im Gegensatz zu ` QBoxLayout::addWidget()` und ` QGridLayout::addWidget()` verwenden wir ` QFormLayout::addRow()`, um Widgets zum Layout hinzuzufügen.

Beispielprojekt @ code.qt.io