Ejemplo de maquetación básica

Basic Layouts muestra cómo usar los gestores de diseño estándar que están disponibles en Qt: QBoxLayout QGridLayout y QFormLayout.

La clase QBoxLayout alinea los widgets horizontal o verticalmente. QHBoxLayout y QVBoxLayout son subclases de QBoxLayout. QGridLayout dispone los widgets en celdas dividiendo el espacio disponible en filas y columnas. QFormLayout, por su parte, dispone a sus hijos en forma de dos columnas con etiquetas en la columna izquierda y campos de entrada en la columna derecha.

Para obtener más información, visite la página Gestión del diseño.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Definición de la clase 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;
};

La clase Dialog hereda de QDialog. Es un widget personalizado que muestra sus widgets hijos utilizando los gestores de geometría: QHBoxLayout, QVBoxLayout, QGridLayout, y QFormLayout.

Hay cuatro funciones privadas para simplificar el constructor de la clase: las funciones createMenu(), createHorizontalGroupBox(), createGridGroupBox(), y createFormGroupBox() crean varios widgets que el ejemplo utiliza para demostrar cómo el diseño afecta a sus apariencias.

Implementación de la clase Dialog

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

En el constructor, primero utilizamos la función createMenu() para crear y rellenar una barra de menú y la función createHorizontalGroupBox() para crear un cuadro de grupo que contiene cuatro botones con una disposición horizontal. A continuación, utilizamos la función createGridGroupBox() para crear un cuadro de grupo que contiene varias líneas de edición y un pequeño editor de texto que se muestran en un diseño de cuadrícula. Por último, utilizamos la función createFormGroupBox() para crear un cuadro de grupo con tres etiquetas y tres campos de entrada: un editor de líneas, un cuadro combinado y un cuadro giratorio.

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

También creamos un editor de texto grande y un cuadro de diálogo con botones. La clase QDialogButtonBox es un widget que presenta los botones en un diseño adecuado al estilo actual del widget. Los botones preferidos se pueden especificar como argumentos del constructor, utilizando el enum QDialogButtonBox::StandardButtons.

Ten en cuenta que no tenemos que especificar un padre para los widgets cuando los creamos. La razón es que todos los widgets que creemos aquí serán añadidos a un layout, y cuando añadimos un widget a un layout, automáticamente se reparentea al widget sobre el que está instalado el layout.

    QVBoxLayout *mainLayout = new QVBoxLayout;

El layout principal es un objeto QVBoxLayout. QVBoxLayout es una clase de conveniencia para un layout de caja con orientación vertical.

En general, la clase QBoxLayout toma el espacio que obtiene (de su layout padre o del widget padre), lo divide en una serie de cajas, y hace que cada widget gestionado llene una caja. Si la orientación de QBoxLayout es Qt::Horizontal las cajas se colocan en fila. Si la orientación es Qt::Vertical, las cajas se colocan en una columna. Las clases de conveniencia correspondientes son QHBoxLayout y QVBoxLayout, respectivamente.

    mainLayout->setMenuBar(menuBar);

Cuando llamamos a la función QLayout::setMenuBar(), el diseño coloca la barra de menú proporcionada en la parte superior del widget padre, y fuera del widget content margins. Todos los widgets hijos se colocan por debajo del borde inferior de la barra de menú.

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

Utilizamos la función QBoxLayout::addWidget() para añadir los widgets al final del diseño. Cada widget obtendrá como mínimo su tamaño mínimo y como máximo su tamaño máximo. Es posible especificar un factor de estiramiento en la función addWidget(), y cualquier espacio sobrante se comparte de acuerdo con estos factores de estiramiento. Si no se especifica, el factor de estiramiento de un widget es 0.

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

Instalamos el diseño principal en el widget Dialog utilizando la función QWidget::setLayout(), y todos los widgets del diseño se reasignan automáticamente para ser hijos del widget 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);
}

En la función privada createMenu() creamos una barra de menú, y añadimos un menú desplegable File que contiene una opción Exit.

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

Cuando creamos el cuadro de grupo horizontal, utilizamos un QHBoxLayout como diseño interno. Creamos los botones que queremos poner en la caja de grupo, los añadimos al layout e instalamos el layout en la caja de grupo.

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

En la función createGridGroupBox() utilizamos un QGridLayout que dispone los widgets en una cuadrícula. Toma el espacio disponible (por su diseño padre o por el widget padre), lo divide en filas y columnas, y coloca cada widget que gestiona en la celda correcta.

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

Para cada fila de la cuadrícula creamos una etiqueta y una línea de edición asociada, y las añadimos al diseño. La función QGridLayout::addWidget() difiere de la función correspondiente en QBoxLayout: Necesita la fila y la columna que especifican la celda de la rejilla en la que colocar el widget.

    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() puede además tomar argumentos que especifiquen el número de filas y columnas que abarcará la celda. En este ejemplo, creamos un pequeño editor que abarca tres filas y una columna.

Para las funciones QBoxLayout::addWidget() y QGridLayout::addWidget() también es posible añadir un último argumento que especifica la alineación del widget. Por defecto rellena toda la celda. Pero podríamos, por ejemplo, alinear un widget con el borde derecho especificando que la alineación sea Qt::AlignRight.

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

Cada columna de una cuadrícula tiene un factor de estiramiento. El factor de estiramiento se establece usando QGridLayout::setColumnStretch() y determina cuánto espacio disponible tendrá la columna por encima de su mínimo necesario.

En este ejemplo, establecemos los factores de estiramiento para las columnas 1 y 2. El factor de estiramiento es relativo a las otras columnas de esta cuadrícula; las columnas con un factor de estiramiento más alto ocupan más espacio disponible. Así, la columna 2 de nuestra rejilla tendrá más espacio disponible que la columna 1, y la columna 0 no crecerá en absoluto ya que su factor de estiramiento es 0 (por defecto).

Las columnas y las filas se comportan de forma idéntica; existe un factor de estiramiento equivalente para las filas, así como una función 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);
}

En la función createFormGroupBox(), utilizamos un QFormLayout para ordenar los objetos en dos columnas: nombre y campo. Hay tres objetos QLabel para los nombres con tres widgets de entrada correspondientes como campos: un QLineEdit, un QComboBox y un QSpinBox. A diferencia de QBoxLayout::addWidget() y QGridLayout::addWidget(), utilizamos QFormLayout::addRow() para añadir widgets a la disposición.

Proyecto de ejemplo @ code.qt.io