Урок №8. Управление компоновкой виджетов в Qt5

  Дмитрий Бушуев  | 

  Обновл. 1 Дек 2019  | 

 313

В этом уроке мы поговорим об управлении компоновкой виджетов в Qt5.

Система компоновки в Qt5

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

   QHBoxLayout

   QVBoxLayout

   QFormLayout

   QGridLayout

Из предыдущих уроков мы уже знаем, что типичное Qt-приложение состоит из различных виджетов, позиционированием которых занимается программист, пишущий программу. Библиотека Qt поддерживает два способа размещения элементов управления на форме приложения:

   Абсолютное позиционирование.

   Позиционирование с помощью менеджеров компоновки.

Абсолютное позиционирование


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

   размер и положение виджета не изменяются при изменении размера окна;

   приложения выглядят по-разному (часто плохо) на разных платформах;

   изменение шрифтов в приложении может испортить компоновку;

   если мы решим изменить расположение элементов на форме, то должны будем полностью переделать всю компоновку, что, в свою очередь, является довольно утомительным и трудоёмким процессом.

Несомненно, есть примеры, в которых нам никто не запрещает использовать способ абсолютного позиционирования элементов. Но в основном, в реальных проектах, программисты стараются вместо этого использовать менеджеры компоновки.

Перейдём к рассмотрению примера, в котором задействован метод setGeometry() для размещения виджета в окне с использованием абсолютных координат.

Файл реализации — absolute.cpp:

Здесь мы создаём виджет QTextEdit и вручную размещаем его. Метод setGeometry() выполняет две функции: позиционирует виджет в абсолютных координатах и изменяет его размер.

Результат выполнения программы выше:


Класс QVBoxLayout

Класс QVBoxLayout предназначен для создания вертикального ряда из выравниваемых объектов. Добавление виджетов в компоновку осуществляется с помощью метода addWidget().

Заголовочный файл — verticalbox.h:

В нашем примере у нас есть один менеджер вертикальный компоновки, в который мы устанавливаем пять кнопок. При этом параметры кнопок задаются так, чтобы они имели возможность расширяться в обоих направлениях.

Файл с реализацией — verticalbox.cpp:

Создаём объект класса QVBoxLayout и устанавливаем интервал между дочерними виджетами в 1 пиксель:

Теперь мы создаём кнопку и устанавливаем для неё политику размера QSizePolicy::Expanding. Дочерние виджеты управляются менеджером компоновки. По умолчанию кнопка растягивается по горизонтали и имеет фиксированный размер по вертикали. Если мы хотим изменить его, мы должны и для вертикали установить новую политику размера (QSizePolicy::Expanding). Как видите, в нашем случае кнопка будет расширяться в обоих направлениях:

Добавляем дочерние виджеты в менеджер компоновки при помощи метода addWidget():

Сообщаем нашей программе использовать QVBoxLayout в качестве менеджера компоновки:

Главный файл приложения — main.cpp:

Результат:


Добавление кнопок


В следующем примере мы создадим две кнопки в правом нижнем углу клиентской области окна.

Заголовочный файл — buttons.h:

Файл с реализацией — buttons.cpp:

Нам потребуются два менеджера компоновки: один вертикальный и один горизонтальный.

Создаём две кнопки:

Данные кнопки с помощью метода addWidget() располагаются внутри горизонтального менеджера компоновки. При этом они выравниваются по правому краю.

   Первый параметр — это дочерний виджет.

   Второй параметр — это коэффициент (фактор) растяжения.

   Последний параметр — это выравнивание.

Установив коэффициент растяжения равным 1 для кнопки OK, виджет не будет растягиваться на всё выделенное ему пространство, тем самым остается свободное место от левой до правой стороны окна. Наконец, константа Qt::AlignRight выравнивает виджет по правому краю:

При помощи метода addStretch() вставляем между виджетами промежуток динамического размера. Затем мы добавляем менеджер горизонтальной компоновки внутрь менеджера вертикальной компоновки:

Главный файл приложения — main.cpp:

Результат:


Вложенные компоновки

Идея следующего примера состоит в том, чтобы показать, что менеджеры компоновки могут быть вложены друг в друга. Комбинируя даже простые способы размещения элементов на форме, мы можем создавать сложные формы и окна. Для того, чтобы вложить одну компоновку в другую, используется метод addLayout().

В следующем примере мы создадим окно, состоящее из четырёх кнопок и одного виджета QListWidget. Кнопки сгруппированы в вертикальный столбец и расположены справа от виджета-списка. Если мы изменим размер окна, размеры QListWidget также изменятся.

Заголовочный файл — nesting.h:

Файл с реализацией — nesting.cpp:

QVBoxLayout будет столбцом для кнопок:

QHBoxLayout будет базовой компоновкой для виджетов:

Создаём QListWidget и наполняем его данными:

А теперь создаём наши кнопки:

Создаётся вертикальная компоновка с четырьмя кнопками. Мы вставили немного свободного места между нашими кнопками. Обратите внимание, что мы добавляем коэффициент растяжения к верхней и нижней части вертикальной компоновки. Таким образом, кнопки расположены вертикально по центру:

Виджет списка и вертикальный блок кнопок помещаются в блок горизонтальной компоновки. Метод addLayout() используется для вложения одной компоновки в другую:

Устанавливаем базовую компоновку для родительского окна:

Главный файл приложения — main.cpp:

Результат:


Класс QFormLayout


Класс QFormLayout является вспомогательным классом компоновки, который размещает свои дочерние элементы в двух столбцах. Левый столбец содержит метки, а правый столбец содержит виджеты ввода (однострочные редакторы, счётчики и т.д.).

В следующем примере мы создадим форму, которая будет состоять из трёх меток и трёх полей для ввода.

Заголовочный файл — form.h:

Файл реализации — form.cpp:

Создаётся экземпляр класса QFormLayout:

С помощью метода setLabelAlignment() мы устанавливаем выравнивание виджетов-меток:

Метод addRow() добавляет новую строку в нижнюю часть компоновки формы с заданной меткой и виджетом ввода:

Главный файл приложения — main.cpp:

Результат:


Класс QGridLayout

Класс QGridLayout размещает виджеты в сетке. Механизм работы QGridLayout следующий: он занимает отведенное ему место (отведенное родительским компоновщиком или parentWidget()), разбивает его на строки и столбцы и помещает каждый подконтрольный виджет в соответствующую ячейку.

Заголовочный файл — calculator.h:

Файл реализации — calculator.cpp:

Мы создаём компоновку по сетке и устанавливаем 2 пикселя пространства между дочерними виджетами:

А вот символы, которые отображаются на кнопках:

Далее помещаем шестнадцать виджетов в компоновку. Все кнопки имеют фиксированный размер:

Главный файл приложения — main.cpp:

Результат:


Ещё один пример


Теперь мы постараемся создать более сложное окно с помощью менеджера QGridLayout. В следующем примере мы создадим приложение, в котором можно будет написать отзыв о литературных произведениях авторов.

Заголовочный файл — review.h:

Файл реализации — review.cpp:

Создаём менеджер QGridLayout:

Добавляем вертикальный интервал с помощью метода setVerticalSpacing() и горизонтальный интервал с помощью метода setHorizontalSpacing():

Эти строки кода создают виджет-метку и помещают его в компоновку. Метод addWidget() имеет пять параметров:

   первый параметр — это дочерний виджет, метка в нашем случае;

   следующие два параметра — это строка и столбец в сетке компоновки, куда мы помещаем наш виджет;

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

Код:

Метод setAlignment() задает выравнивание метки-заголовка в своей ячейке. По горизонтали — выравнивание по правому краю, по вертикали — выравнивание по центру:

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

Главный файл приложения — main.cpp:

Результат:


Заключение

Мы разобрали несколько примеров с использованием различных менеджеров компоновки. Теперь вы можете самостоятельно попробовать изменить параметры компоновок и понаблюдать за результатом. Посмотрите, как будут перестраиваться виджеты в форме при изменении размеров формы. Вспомните, как задать минимальный размер формы и задайте его так, чтобы не допускать искажения виджетов. Попробуйте сделать собственные проекты с использованием рассмотренных менеджеров компоновки. Используя данную статью, расширяйте своё знакомство с виджетами, самостоятельно устанавливая их в ячейки компоновщика.

Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (5 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш E-mail не будет опубликован. Обязательные поля помечены *