Управление макетом

Система макетов Qt предоставляет простой и мощный способ автоматического размещения дочерних виджетов внутри виджета, гарантируя, что они эффективно используют доступное пространство.

Введение

Qt включает набор классов управления макетом, используемых для описания того, как виджеты расположены в пользовательском интерфейсе приложения. Эти макеты автоматически позиционируют и изменяют размер виджетов при изменении доступного для них пространства, обеспечивая согласованное расположение и сохранение удобства использования пользовательского интерфейса в целом.

Все подклассы QWidget могут использовать макеты для управления своими дочерними элементами. Функция QWidget::setLayout() применяет макет к виджету. Когда макет установлен на виджете таким образом, он берет на себя следующие задачи:

• Позиционирование дочерних виджетов
• Установление разумных размеров по умолчанию для окон
• Установление разумных минимальных размеров для окон
• Обработка изменения размеров
• Автоматические обновления при изменении содержимого:
  • Размер шрифта, текст или другое содержимое дочерних виджетов
  • Скрытие или показ дочернего виджета
  • Удаление дочерних виджетов

Классы макетов Qt

Классы макетов Qt были разработаны для написания кода на C++, позволяя указывать измерения в пикселях для простоты, поэтому они просты в понимании и использовании. Код, сгенерированный для форм, созданных с помощью Qt Designer, также использует классы макетов. Qt Designer полезен для экспериментов с дизайном формы, поскольку он избегает цикла компиляции, компоновки и запуска, обычно связанного с разработкой пользовательского интерфейса.

Горизонтальные, вертикальные, сетчатые и формулярные макеты

Самый простой способ дать виджетам хороший макет — использовать встроенные менеджеры макетов: QHBoxLayout, QVBoxLayout, QGridLayout и QFormLayout. Эти классы наследуют от QLayout, который в свою очередь наследуется от QObject (а не QWidget). Они занимаются управлением геометрией набора виджетов. Для создания более сложных макетов можно вкладывать менеджеры макетов друг в друга.

• QHBoxLayout выстраивает виджеты в горизонтальную строку слева направо (или справа налево для языков с направлением письма справа налево).

  

• QVBoxLayout выстраивает виджеты в вертикальную колонку сверху вниз.

  

• QGridLayout выстраивает виджеты в двумерную сетку. Виджеты могут занимать несколько ячеек.

  

• QFormLayout выстраивает виджеты в макет 2 столбца, стиль меток-полей.

  

Размещение виджетов в коде

Следующий код создает QHBoxLayout, который управляет геометрией пяти QPushButtons, как показано на первом снимке экрана выше:

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout(window);
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    window->show();

Код для QVBoxLayout идентичен, за исключением строки создания макета. Код для QGridLayout немного отличается, потому что нам нужно указать строку и столбец расположения дочернего виджета:

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QGridLayout *layout = new QGridLayout(window);
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 1, 0, 1, 2);
    layout->addWidget(button4, 2, 0);
    layout->addWidget(button5, 2, 1);

    window->show();

Третья кнопка QPushButton занимает 2 столбца. Это возможно, указав 2 в качестве пятого аргумента для QGridLayout::addWidget().

QFormLayout добавит два виджета в строку, обычно QLabel и QLineEdit для создания форм. Добавление QLabel и QLineEdit в одну строку установит QLineEdit в качестве партнера QLabel. Следующий код будет использовать QFormLayout для размещения трех QPushButtons и соответствующего QLineEdit в строке.

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QLineEdit *lineEdit1 = new QLineEdit();
    QPushButton *button2 = new QPushButton("Two");
    QLineEdit *lineEdit2 = new QLineEdit();
    QPushButton *button3 = new QPushButton("Three");
    QLineEdit *lineEdit3 = new QLineEdit();

    QFormLayout *layout = new QFormLayout(window);
    layout->addRow(button1, lineEdit1);
    layout->addRow(button2, lineEdit2);
    layout->addRow(button3, lineEdit3);

    window->show();

Рекомендации по использованию макетов

При использовании макета вам не нужно передавать родительский элемент при построении дочерних виджетов. Макет автоматически сменит родительский элемент виджетов (используя QWidget::setParent()), чтобы они стали дочерними элементами виджета, на котором установлен макет.

Примечание: Виджеты в макете являются дочерними элементами виджета, на котором установлен макет, а не самого макета. Виджеты могут иметь только другие виджеты в качестве родителя, а не макеты.

Можно вложить макеты, используя addLayout() на макете; внутренний макет затем становится дочерним элементом макета, в который он вставлен.

Добавление виджетов в макет

Когда вы добавляете виджеты в макет, процесс макетирования работает следующим образом:

1. Все виджеты изначально получают пространство в соответствии с их QWidget::sizePolicy() и QWidget::sizeHint().
2. Если у каких-либо виджетов установлены коэффициенты растяжения с значением больше нуля, то им выделяется пространство пропорционально их коэффициенту растяжения (объясняется ниже).
3. Если у каких-либо виджетов установлены коэффициенты растяжения, равные нулю, они получат больше места только в том случае, если другие виджеты не хотят этого места. Из этих виджетов место выделяется виджетам с политикой размера Expanding в первую очередь.
4. Любые виджеты, которым выделяется меньше места, чем их минимальный размер (или минимальная подсказка размера, если минимальный размер не задан), получают этот минимальный требуемый размер. (Виджеты не должны иметь минимальный размер или минимальную подсказку размера, в этом случае коэффициент растяжения является определяющим фактором).
5. Любые виджеты, которым выделяется больше места, чем их максимальный размер, получают максимальное требуемое пространство. (Виджеты могут не иметь максимального размера, в этом случае коэффициент растяжения является определяющим фактором).

Коэффициенты растяжения

Виджеты обычно создаются без установленного коэффициента растяжения. При размещении в макете виджетам выделяется часть пространства в соответствии с их QWidget::sizePolicy() или их минимальной подсказкой размера, в зависимости от того, что больше. Коэффициенты растяжения используются для изменения того, сколько места виджетам выделяется по отношению друг к другу.

Если у нас есть три виджета, расположенные в QHBoxLayout без установленных коэффициентов растяжения, мы получим макет, подобный этому:

Если мы установим коэффициенты растяжения для каждого виджета, они будут размещены пропорционально (но никогда меньше их минимальной подсказки размера), например:

Пользовательские виджеты в макетах

Когда вы создаете свой собственный класс виджета, вы также должны передать его свойства макета. Если виджет использует макеты Qt, это уже сделано. Если виджет не имеет дочерних виджетов или использует ручной макет, вы можете изменить поведение виджета с помощью одного или всех следующих механизмов:

• Переопределите QWidget::sizeHint(), чтобы вернуть предпочтительный размер виджета.
• Переопределите QWidget::minimumSizeHint(), чтобы вернуть наименьший размер, который может иметь виджет.
• Вызовите QWidget::setSizePolicy(), чтобы указать требования к пространству виджета.

Вызовите QWidget::updateGeometry() всякий раз, когда меняется подсказка размера, минимальная подсказка размера или политика размера. Это вызовет перерасчет макета. Несколько последовательных вызовов QWidget::updateGeometry() вызовут только один перерасчет макета.

Если предпочтительная высота вашего виджета зависит от его фактической ширины (например, метка с автоматическим разрывом слов), установите флаг height-for-width в политике размера виджета и переопределите QWidget::heightForWidth().

Даже если вы реализовали QWidget::heightForWidth(), все равно рекомендуется предоставить разумный размер подсказки (sizeHint).

Для получения дополнительных рекомендаций при реализации этих функций см. статью Qt Quarterly Торговля высотой на ширину.

Проблемы с макетом

Использование форматированного текста в виджете метки может создать некоторые проблемы с макетом его родительского виджета. Проблемы возникают из-за того, как менеджеры макета Qt обрабатывают форматированный текст, когда метка имеет перенос слов.

В некоторых случаях родительский макет переходит в режим QLayout::FreeResize, что означает, что он не будет адаптировать макет своего содержимого для размещения в окнах малого размера или даже предотвратит уменьшение размера окна до состояния, непригодного для использования. Это можно обойти, создав подкласс проблемных виджетов и реализовав подходящие функции sizeHint() и minimumSizeHint().

В некоторых случаях это актуально, когда макет добавляется в виджет. Когда вы устанавливаете виджет QDockWidget или QScrollArea (с помощью QDockWidget::setWidget() и QScrollArea::setWidget()), макет должен быть уже установлен на виджете. В противном случае виджет не будет отображаться.

Ручной макет

Если вы создаете уникальный специальный макет, вы также можете создать пользовательский виджет, как описано выше. Переопределите QWidget::resizeEvent(), чтобы вычислить необходимое распределение размеров и вызвать setGeometry() для каждого дочернего элемента.

Виджет получит событие типа QEvent::LayoutRequest, когда макет необходимо пересчитать. Переопределите QWidget::event(), чтобы обработать события QEvent::LayoutRequest.

Как написать собственный менеджер макета

Альтернативой ручному макету является создание собственного менеджера макета, унаследовав от QLayout. Примеры Border Layout и Flow Layout демонстрируют, как это сделать.

Здесь мы подробно представим пример. Класс CardLayout вдохновлен одноименным менеджером макета Java. Он размещает элементы (виджеты или вложенные макеты) друг над другом, смещая каждый элемент на расстояние QLayout::spacing().

Чтобы написать свой собственный класс макета, вы должны определить следующее:

• Структуру данных для хранения элементов, обрабатываемых макетом. Каждый элемент — это QLayoutItem. В этом примере мы будем использовать QList.
• addItem(), как добавлять элементы в макет.
• setGeometry(), как выполнять макетирование.
• sizeHint(), предпочтительный размер макета.
• itemAt(), как перебирать макет.
• takeAt(), как удалять элементы из макета.

В большинстве случаев вы также реализуете minimumSize().

Заголовочный файл (card.h)

#ifndef CARD_H
#define CARD_H

#include <QtWidgets>
#include <QList>

class CardLayout : public QLayout
{
public:
    CardLayout(int spacing): QLayout()
    { setSpacing(spacing); }
    CardLayout(int spacing, QWidget *parent): QLayout(parent)
    { setSpacing(spacing); }
    ~CardLayout();

    void addItem(QLayoutItem *item) override;
    QSize sizeHint() const override;
    QSize minimumSize() const override;
    int count() const override;
    QLayoutItem *itemAt(int) const override;
    QLayoutItem *takeAt(int) override;
    void setGeometry(const QRect &rect) override;

private:
    QList<QLayoutItem *> m_items;
};
#endif

Файл реализации (card.cpp)

//#include "card.h"

Сначала мы определяем count() для извлечения количества элементов в списке.

int CardLayout::count() const
{
    // QList::size() returns the number of QLayoutItems in m_items
    return m_items.size();
}

Затем мы определяем две функции, которые перебирают макет: itemAt() и takeAt(). Эти функции используются внутри системы макета для обработки удаления виджетов. Они также доступны программистам приложений.

itemAt() возвращает элемент по заданному индексу. takeAt() удаляет элемент по заданному индексу и возвращает его. В этом случае мы используем индекс списка в качестве индекса макета. В других случаях, когда у нас есть более сложная структура данных, нам может потребоваться больше усилий для определения линейного порядка элементов.

QLayoutItem *CardLayout::itemAt(int idx) const
{
    // QList::value() performs index checking, and returns nullptr if we are
    // outside the valid range
    return m_items.value(idx);
}

QLayoutItem *CardLayout::takeAt(int idx)
{
    // QList::take does not do index checking
    return idx >= 0 && idx < m_items.size() ? m_items.takeAt(idx) : 0;
}

addItem() реализует стратегию размещения элементов макета по умолчанию. Эта функция должна быть реализована. Она используется QLayout::add(), конструктором QLayout, принимающим макет в качестве родительского элемента. Если ваш макет имеет расширенные параметры размещения, требующие параметров, вы должны предоставить дополнительные функции доступа, такие как перегрузки row и column spanning для QGridLayout::addItem(), QGridLayout::addWidget() и QGridLayout::addLayout().

void CardLayout::addItem(QLayoutItem *item)
{
    m_items.append(item);
}

Макет берет на себя ответственность за добавленные элементы. Поскольку QLayoutItem не наследует от QObject, мы должны удалять элементы вручную. В деструкторе мы удаляем каждый элемент из списка, используя takeAt(), а затем удаляем его.

CardLayout::~CardLayout()
{
     QLayoutItem *item;
     while ((item = takeAt(0)))
         delete item;
}

Функция setGeometry() фактически выполняет макетирование. Прямоугольник, переданный в качестве аргумента, не включает margin(). При необходимости используйте spacing() в качестве расстояния между элементами.

void CardLayout::setGeometry(const QRect &r)
{
    QLayout::setGeometry(r);

    if (m_items.size() == 0)
        return;

    int w = r.width() - (m_items.count() - 1) * spacing();
    int h = r.height() - (m_items.count() - 1) * spacing();
    int i = 0;
    while (i < m_items.size()) {
        QLayoutItem *o = m_items.at(i);
        QRect geom(r.x() + i * spacing(), r.y() + i * spacing(), w, h);
        o->setGeometry(geom);
        ++i;
    }
}

sizeHint() и minimumSize() обычно очень похожи по реализации. Возвращаемые размерами обеих функций должны включать spacing(), но не margin().

QSize CardLayout::sizeHint() const
{
    QSize s(0, 0);
    int n = m_items.count();
    if (n > 0)
        s = QSize(100, 70); //start with a nice default size
    int i = 0;
    while (i < n) {
        QLayoutItem *o = m_items.at(i);
        s = s.expandedTo(o->sizeHint());
        ++i;
    }
    return s + n * QSize(spacing(), spacing());
}

QSize CardLayout::minimumSize() const
{
    QSize s(0, 0);
    int n = m_items.count();
    int i = 0;
    while (i < n) {
        QLayoutItem *o = m_items.at(i);
        s = s.expandedTo(o->minimumSize());
        ++i;
    }
    return s + n * QSize(spacing(), spacing());
}

Дополнительные замечания

• Этот пользовательский макет не обрабатывает высоту по ширине.
• Мы игнорируем QLayoutItem::isEmpty(); это означает, что макет будет рассматривать скрытые виджеты как видимые.
• Для сложных макетов скорость можно значительно повысить с помощью кеширования вычисленных значений. В этом случае реализуйте QLayoutItem::invalidate(), чтобы отметить, что кэшированные данные недействительны.
• Вызов QLayoutItem::sizeHint() и т. д. может быть дорогим. Поэтому вам следует сохранять значение в локальной переменной, если вам нужно использовать его снова позже в рамках той же функции.
• Не следует вызывать QLayoutItem::setGeometry() дважды для одного и того же элемента в одной и той же функции. Этот вызов может быть очень дорогим, если элемент имеет несколько дочерних виджетов, поскольку менеджер макета должен выполнять полное макетирование каждый раз. Вместо этого вычислите геометрию и затем установите ее. (Это относится не только к макетам, вы должны делать то же самое, если реализуете собственный resizeEvent(), например.)

Примеры макетов

Многие примеры Qt Widgets примеров уже используют макеты, однако существуют несколько примеров, демонстрирующих различные макеты.