Контейнеры и компоновка Box

Разложим понятия. fyne.Container — это тоже CanvasObject, но его работа не рисоваться, а держать других: у контейнера есть поле Objects со списком детей и поле Layout с алгоритмом расстановки. Компоновка — это интерфейс fyne.Layout с двумя методами: MinSize возвращает минимальный размер контейнера по его детям, а Layout расставляет детей внутри выданного размера. Отсюда конвейер: контейнер спрашивает у каждого ребёнка MinSize, передаёт их layout, а тот назначает каждому позицию и размер по своим правилам. Виджеты по этому конвейеру ходят пассивно — приказ получили, встали. Универсальная фабрика одна: container.New(layout, объекты...) — подставляешь компоновку и получаешь контейнер. А NewVBox и NewHBox — сокращения: внутри у них тот же container.New с готовыми компоновками layout.NewVBoxLayout() и layout.NewHBoxLayout(). Когда важнее читаемость — пиши сокращения; когда компоновку нужно подменять на лету — собирай через container.New и меняй поле Layout. И помни из второго урока: SetContent ставит корневой контейнер, поэтому почти каждый экран начинается с одного верхнего бокса.

Документация формулирует поведение вертикального бокса одной фразой: каждый элемент получает высоту по минимуму, а ширины всех элементов равны — берётся наибольшая из минимальных ширин. Разберём на следствия. Первое: колонка выглядит выровненной по краям, как таблица из одной графы — узкая кнопка распухает до ширины соседа с длинным текстом. Если хочется узкую кнопку в широкой колонке — заворачивай её в горизонтальный бокс или центр, об этом ниже. Второе: вертикального растягивания нет. Каждый ребёнок занимает свою минимальную высоту, и если окно выше суммы минимумов, лишнее место остаётся снизу пустым — элементы прижаты к верху. Забрать пустоту умеет спейсер, до него дойдём. Третье: при изменении текста метки её MinSize пересчитывается, и ширина всей колонки может прыгнуть — сеттер SetText из прошлого урока триггерит перерасчёт автоматически. И четвёртое: окно не станет меньше контента — правило минимума сработало и для Resize во втором уроке, здесь тот же механизм, просто root-контейнер сообщает минимум всему окну.

Горизонтальный бокс зеркален вертикальному: элементы стоят в один ряд, каждый — на своей минимальной ширине, а высоты всех равны наибольшей из минимальных высот. Кнопки в тулбаре получаются одинаковой высоты, даже если у одной текст длиннее — визуально аккуратно. Свободное место по горизонтали, если строка уже окна, остаётся справа пустым; элементы прижаты к левому краю. Отсюда важная честность про ожидания: HBox не растягивает кнопки на всю строку и не распределяет место поровну — если нужен «резиновый» тулбар, это задача спейсера или компоновок из следующих уроков. Сумма минимумов по горизонтали и по вертикали работает и вложенно: строка внутри колонки занимает в ней ширину всей колонки, но сами кнопки останутся узкими и прижмутся влево. Кстати, в документации встречается и виджетный вариант бокса — widget.NewHBox из ранних версий; актуальный путь — именно контейнеры пакета container, к виджетам бокс не относится: он ничего не рисует, только расставляет.

Сила Box-подхода — вложенность: бокс — обычный CanvasObject, поэтому встаёт ребёнком в другой бокс без церемоний. Типовой скелет выглядит так: корневой VBox держит сверху HBox-панель инструментов, под ней строку заголовка, ниже — рабочую область. Рабочая область, в свою очередь, может быть VBox'ом из полей, а поля с кнопками — HBox'ами. Читается такой код сверху вниз как схема экрана: строка — полоса интерфейса, вложение — уровень. Полезный приём: одноэлементный HBox сохраняет ребёнку его собственную ширину — узкая кнопка под широкой меткой перестанет распухать, потому что в строке ширина ребёнка всегда его собственный минимум. Не увлекайся глубиной: три-четыре уровня вложенности читаются легко, дальше начинает путаться сам автор. Для более сложных зон — сеток плиток и настоящих форм — есть GridLayout и Form, их разберёт следующий урок; Box остаётся каркасом, к которому всё это прикрепляется.

layout.NewSpacer() возвращает специальный объект-распорку, чья работа — расширяться и занимать всё свободное место бокса. Документация описывает его ровно для box-компоновок — в других раскладках спейсер смысла не имеет. Приёмы стоит выучить как таблицу умножения. Спейсер перед кнопкой в HBox прижимает кнопку вправо: всё место слева съедает распорка. Два спейсера по бокам от элемента центрируют его в строке. Спейсер первым элементом VBox прижимает всё содержимое колонки к низу — редкий, но полезный приём для панелей состояния. Спейсер между блоками VBox растягивается вертикально и раздвигает их по краям окна. Учти эффект на минимум: спейсер не имеет минимального размера, поэтому сам по себе окно не распирает — работает только когда есть излишек. И не путай с отступами: спейсер — про свободное место и выравнивание, фиксированные зазоры между элементами задаёт тема своим паддингом; для произвольных зазоров есть и другие приёмы, но о них — в разговоре о темах.

Два коротких контейнера из той же семьи решают бытовые вопросы оформления. container.NewPadded(obj) оборачивает содержимое стандартным отступом темы со всех сторон — тот самый padding, равный четырём единицам, о котором говорилось в первом уроке. Он полезен, когда ты собираешь панель вручную и хочешь, чтобы она не прилипала к краям. Между прочим, окно уже делает это за тебя: SetContent оборачивает содержимое во внутренний отступ, и SetPadded(false) из второго урока как раз выключает это поведение — теперь ты знаешь, что именно выключаешь. container.NewCenter(obj) размещает элемент в центре доступного пространства на его минимальном размере — идеален для заглушек «Нет данных», карточек и стартовых экранов. Знай и соседей, чтобы не изобретать: NewMax растягивает единственного ребёнка на всё место, NewStack кладёт детей друг на друга стопкой, а NewBorder выделяет зоны сверху, снизу и по бокам, отдавая середину остатку — Border мы упоминали в первом уроке и вернёмся к нему, когда дойдём до панелей и форм.

Компоновка — не приговор: содержимое контейнера можно менять после запуска. У fyne.Container есть методы Add (с версии 1.4) и Remove — добавить ребёнка в конец или убрать конкретный объект; RemoveAll (с версии 2.2) чистит контейнер разом. Метод Remove даже документирован с оговоркой: для массового удаления он не предназначен — в цикле вызывай RemoveAll. Дети лежат в публичном поле Objects, и прямая правка среза тоже допустима — но помни правило сеттеров из третьего урока в применении к контейнерам: изменил содержимое — сообщи об этом. После прямой правки Objects нужен Refresh() у контейнера: он пересчитает минимумы и заставит layout расставить детей заново. Add и Remove сами перерисовку запускают, поэтому предпочтительны. Практический сценарий: список строк, который растёт по кнопке «Добавить» — каждая строка это HBox с меткой и кнопкой удаления, а корень держит их в VBox. Когда строк станет сотни, смени VBox на List из десятого урока: виртуализация для того и придумана.

Каркас из боксов держит любые зоны, но таблицы плитками и формы с подписями Box'ом делать тесновато. Пятый урок 05-grid-form добавит Grid — сетку равных ячеек и GridWrap для плиток любого числа строк — и Form, который раскладывает пары «подпись — поле» и подключает валидацию из восемнадцатого урока. Виджеты для этих сеток бери из третьего урока про базовые виджеты — Label, Button и Entry сейчас лягут в форму. Напомнить каркас запуска можно во втором уроке про первое окно, а словарь CanvasObject и MinSize — в дебютном уроке. Полный план курса из двадцати пяти уроков живёт на странице курса Fyne. Домашнее задание — собрать настоящий каркас приложения из трёх зон; он ещё пригодится: на его базе мы будем делать диалоги, вкладки и итоговый менеджер задач.