Макеты: VerticalLayout и HorizontalLayout

Макет (layout) — контейнер, который решает, где стоят компоненты. Сам по себе он ничего не показывает, только располагает содержимое. Два основных макета Vaadin — VerticalLayout (сверху вниз) и HorizontalLayout (слева направо). Вкладывая их друг в друга, собирают почти любой экран.

Ряд внутри столбца

Расставим на экране черновика два поля в одну строку и две кнопки под ними:

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        TextField title = new TextField("Заголовок");
        TextField author = new TextField("Автор");
        TextArea content = new TextArea("Текст");
        content.setWidthFull();
 
        HorizontalLayout fields = new HorizontalLayout(title, author);
        HorizontalLayout buttons = new HorizontalLayout(new Button("Сохранить"), new Button("Отмена"));
 
        add(new H2("Новый черновик"), fields, content, buttons);
    }
}

На http://localhost:8080/draft сверху заголовок, под ним поля «Заголовок» и «Автор» рядом, затем широкое поле текста и две кнопки в ряд.

Отступы и промежутки

Метод	Что делает	По умолчанию
`setPadding(boolean)`	Отступ от краёв макета	`VerticalLayout` — есть, `HorizontalLayout` — нет
`setSpacing(boolean)`	Промежуток между компонентами	есть у обоих
`setMargin(boolean)`	Внешний отступ вокруг макета	нет
`setWidthFull()`	Ширина 100%	—
`setSizeFull()`	Ширина и высота 100%	—

Выравнивание

Выравнивание поперёк макета задаёт setAlignItems, вдоль — setJustifyContentMode:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
buttons.setWidthFull();
buttons.setJustifyContentMode(JustifyContentMode.END);
fields.setAlignItems(Alignment.BASELINE);

Кнопки уезжают к правому краю, а поля выравниваются по линии текста — удобно, если у одного из них есть подсказка снизу. Константы Alignment и JustifyContentMode доступны без импорта, потому что DraftView наследует VerticalLayout.

Растягивание

Чтобы один компонент занял всё свободное место в ряду, используйте setFlexGrow или expand:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
fields.setWidthFull();
fields.expand(title);

Поле заголовка растягивается, а поле автора остаётся обычной ширины.

Другие макеты

Класс	Когда нужен
`FormLayout`	Формы: поля в колонки, на телефоне — в одну
`AppLayout`	Каркас приложения с шапкой и меню (следующий урок)
`SplitLayout`	Две панели с перетаскиваемой границей
`Div`	Простой контейнер, если раскладку задаёте через CSS

Частая ошибка

Внутри HorizontalLayout поле с setWidthFull() вытесняет соседей или ряд вылезает за край экрана. Ширина 100% у элемента ряда означает «ширину всего ряда», а не «оставшееся место». Для растягивания в ряду используйте expand(...) вместо setWidthFull().

Спасибо, что читаете!