Компонування (Layouts)

Для того. щоб розумно розмістити віджети на формі, необхідно врахувати ряд деталей:

• розмір сусідніх віджетів;

• візуальні компоненти можуть динамічно змінювати розмір, приховуватись чи з'являтись внаслідок

• роботи логіки програми;

• форма, у якій розміщують віджети, може динамічно змінювати розмір під час роботи програми (коли користувач змінює розмір вікна чи розкриває його на весь екран);

• часто буває потрібно розтягнути візуальну компоненту таким чином, щоб вона займала увесь простір форми, або ж щоб кілька компонентів займали простір форми пропорційно ( у відповідних пропорціях 1:1, 1:2, 3:5 тощо);

• часто буває потрібно розмістити віджети або групи віджетів вертикально чи горизонтально на формі, тощо.

Зрозуміло, що така логіка є досить складною для реалізації при повсякденному створенні інтерфейсів користувача різної структури та складності. На щастя, в арсеналі Qt є досить потужний інструмент для впорядковування віджетів на формі — компонування.

Як працюють компонування

Компонування дає змогу впорядкувати розміщення компонент, у той же час залишаючи інтерфейс гнучким до змін, таких як зміна розміру чи зміна кількості елементів на формі. Також компонування може забезпечувати адекватну зміну розміру самого віджета у відповідь на зміни у його наповненні чи вигляді.

Компонування не належать до віджетів, не успадковують від QWidget та є невидимі на формі. Вони лише керують розміром та розміщенням їх вмісту. Найчастіше використовують три основних компонування:

• вертикальне компонування (клас QVBoxLayout);

• горизонтальне компонування (клас QHBoxLayout);

• компонування сіткою (клас QGridLayout);

Вертикальне (QVBoxLayout) та горизонтальне (QHBoxLayout) компонування.

Для того щоб продемонструвати роботу з компонуваннями, ми створимо новий приклад, додамо кілька елементів та зробимо так, щоб розміщення елементів було пропорційне та відповідало зміні розмірів вікна. Спробуємо створити такий інтерфейс:

• мітки та поля вводу розмістимо горизонтально в одному рядку;

• створимо два таких рядка з мітками та полями;

• додамо ще один рядок з двома кнопками горизонтально, вирівняними за правим краєм вікна.

Створимо проект LayoutExample. Для цього скористаємося майстром нових проектів. Виберемо у списку Qt Gui Application. Задамо назву для проекту та налаштуємо клас головного вікна: задамо батьківський клас (у випадаючому списку Base Class встановимо QWidget) та знімемо прапорець для автоматичної генерації файла форми (Generate Form).

Малюнок 3.13 Створення програми з графічним інтерфейсом користувача.

Відкриємо файл mainwindow.cpp та змінимо код конструктора вікна:

#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
MainWindow::MainWindow(QWidget *parent)
    : QWidget(parent)
{
    // Перший горизонтальний рядок
    // Початковий текст у полі вводу
    QLineEdit *lLineEdit = new QLineEdit("Text 1");
    // Задаємо текст
    // & - означає комбінацію клавіш
    // для активації віджета
    QLabel *lLabel = new QLabel("Line Edit &1");
    // Задаємо віджет до якого буде пермикатися
    // фокус вводу при натисканні Alt+1
    lLabel->setBuddy(lLineEdit);
    // Розташовуємо поле вводу та
    // мітку у одному рядку.
    QHBoxLayout *lHBoxLayout = new QHBoxLayout;
    lHBoxLayout->addWidget(lLabel);
    lHBoxLayout->addWidget(lLineEdit);
    // Другий горизонтальний рядок
    QLineEdit *lLineEdit2 = new QLineEdit("Text 2");
    QLabel *lLabel2 = new QLabel("Line Edit &2");
    lLabel2->setBuddy(lLineEdit2);
    QHBoxLayout *lHBoxLayout2 = new QHBoxLayout;
    lHBoxLayout2->addWidget(lLabel2);
    lHBoxLayout2->addWidget(lLineEdit2);
    // Третій ряд віджетів з кнопками
    QPushButton *lPushButtonOk = new QPushButton("&Ok");
    QPushButton *lPushButtonCancel = new QPushButton("&Cancel");
    QHBoxLayout *lHBoxLayout3 = new QHBoxLayout;
    // Додаємо елемент-розтягнення
    // він займе весь можливий вільний простір
    // та "притисне" кнопки до краю
    lHBoxLayout3->addStretch();
    lHBoxLayout3->addWidget(lPushButtonOk);
    lHBoxLayout3->addWidget(lPushButtonCancel);
    // Додаємо компонування вертикально у колонку
    QVBoxLayout *lVBoxLayout = new QVBoxLayout;
    lVBoxLayout->addLayout(lHBoxLayout);
    lVBoxLayout->addLayout(lHBoxLayout2);
    lVBoxLayout->addLayout(lHBoxLayout3);
    // Задаємо компонування для вікна
    setLayout(lVBoxLayout);
}

Після запуску програми отримаємо головне вікно з розміщеними у компонуваннях віджетами.

Малюнок Приклад використання горизонтального та вертикального компонувань.