Grid и формы

container.NewGridWithColumns(число, объекты...) — самый ходовой грид. Он делит ширину контейнера на равные колонки, высоту — на равные ряды и растягивает каждый объект на всю его ячейку. Проговорим три следствия. Первое: ячейки по-настоящему равные — ширина каждой колонки равна доступной ширине, поделённой на число колонок, поэтому кнопки калькулятора получаются идеально ровными без единого ручного измерения. Второе: лишнее место не остаётся внизу — если контейнер выше минимума, ряды растягиваются; грид не прижимает содержимое к верху, а заполняет отведённое пространство целиком. Третье: ряды считаются автоматически — объектов больше, чем колонок, лишние переносятся на следующий ряд, а число рядов равно округлённому вверх частному от деления. Минимальный размер грида считается от самого крупного ребёнка: каждый элемент просит свой MinSize (четвёртый урок о MinSize помнит), грид берёт максимум и умножает на число колонок и рядов. Отсюда практический вывод: один огромный виджет растянет все ячейки разом — крупные элементы лучше выносить в соседние зоны Border или в прокрутку, а грид оставлять элементам примерно равного калибра.

Что делать, если в последнем ряду не хватает элементов? Грид молча оставит ячейки пустыми — визуально это дырки, в которых просвечивает фон окна. Если пустоты не нужны, есть два приёма. Первый — layout.NewSpacer(): добавь его в список объектов как обычный элемент, он займёт свою долю места и исчезнет визуально, потому что спейсер — это CanvasObject без рисунка. Второй — вообще не поручать такой ряд гриду: кнопки согласия и отказа часто кладут в отдельный HBox и размещают под сеткой в зоне Border. Отдельно запомни, что layout.NewSpacer ведёт себя по-разному у разных хозяев: в VBox он раздвигает соседей, а в грид просто съедает ячейку — это один и тот же объект, поведение определяется компоновкой-владельцем. И ещё одна честная оговорка: грид Fyne не умеет объединять ячейки, аналогов colspan и rowspan из HTML-таблиц здесь нет. Сложную раскладку собирают вложенными контейнерами: грид внутри ячейки Border, Box внутри ячейки грида, Stack поверх обоих. Вкладывать контейнеры друг в друга — не костыль, а нормальная практика: дерево содержимого в Fyne так и растёт вниз.

container.NewGridWithRows(число, объекты...) — зеркальный вариант: задаёшь число рядов, а колонки считаются сами. Это удобно для панелей, которые делят окно по высоте: два ряда — зона ввода и зона истории переписки. container.NewAdaptiveGrid(n, объекты...) — грид-хамелеон для кроссплатформенности: если контейнер шире, чем выше, объекты встают в один ряд из n колонок; если контейнер уже — в одну колонку из n рядов. Это ровно тот приём, которым делают панель инструментов, одинаково живущую на десктопе и на телефоне: на широком экране четыре кнопки идут линией, на узком — столбиком. Быстрый способ увидеть обе ветки — мобильная симуляция из второго урока: go run -tags mobile, а затем просто сожми окно и посмотри, как панель перестроилась. Помни и про ограничение: AdaptiveGrid смотрит на пропорции контейнера, а не на ориентацию всего окна. Если панель живёт в узкой колонке Border, она останется вертикальной даже на широком мониторе. Иногда это именно то, что нужно; иногда — повод выбрать другую сетку или переставить зоны Border.

container.NewGridWrap(размер, объекты...) — вторая большая сетка. Каждому объекту выдаётся строго заданный размер, а укладываются они рядами: заполняют строку по ширине и переносятся на следующую — как плитки в файловом менеджере или миниатюры галереи. Разница с GridWithColumns принципиальная. Там размер ячейки определяет контейнер: растянул окно — клетки выросли вместе с ним. В GridWrap размер задаёшь ты, и он не меняется: растянул окно — плитки остались 120 на 90, но их в ряду стало больше. Именно поэтому GridWrap — выбор для галерей, списков превью и наборов файлов: предсказуемый размер каждого элемента важнее равного деления площади. Второе отличие — вертикальное поведение: строки прижимаются к верху, и если контейнер выше, лишнее место остаётся пустым снизу — грид-wrap, в отличие от обычного, ряды не растягивает. Хочешь прокрутку — оберни сетку в container.NewScroll: сетка посчитает свой размер под текущую ширину, а прокрутка добавит недостающую высоту. В этом же прячется ловушка новичка: задал размер плитки больше ширины окна — получишь по одной плитке в ряду. Тулкит не будет ужимать твои 200 пикселей до 150: размер в GridWrap — закон.

Форма входа — самая частая сборка в GUI, и Fyne даёт для неё готовый виджет: widget.Form. Ты передаёшь список пар «подпись — поле», а Form сам раскладывает их столбцом, рисует подписи, выравнивает поля и добавляет снизу две кнопки — Submit и Cancel. Тебе остаётся заполнить поля OnSubmit и OnCancel, и обработчики сразу живут на своих местах. Значения полей читаются обычным способом: entry.Text внутри OnSubmit. Дефолтные подписи кнопок английские — свойства SubmitText и CancelText меняют их на твои. Собирается форма литералом структуры &widget.Form{...}: так все обработчики видны одним взглядом. Элемент списка — widget.NewFormItem(label, field), он возвращает готовую FormItem. Есть и ручной способ: form.Append("Имя", entry) добавляет пару в живую форму — им удобно дорисовывать поля по ходу работы, например когда состав полей зависит от данных. Форма — полноценный CanvasObject: её кладут в SetContent, в зоны Border, в прокрутку, как и любой другой виджет. Валидация подключается к форме одной строкой на поле — этим займёмся прямо сейчас. Под капотом подписи и поля раскладывает компоновка Form из пакета layout — если когда-нибудь понадобится та же раскладка без кнопок, возьми именно её.

Красота Form раскрывается с валидацией. Каждому полю назначается проверка: entry.SetValidator(func(s string) error). Вернул nil — поле в порядке; вернул ошибку — Fyne рисует её красным прямо под полем, с тем текстом, который ты написал в errors.New. Проверка срабатывает по мере ввода — это событие OnChanged поля, о нём подробнее в шестом уроке, — и при потере фокуса, а все поля разом — при нажатии Submit. И вот главное правило формы: если хотя бы одно поле невалидно, OnSubmit не вызывается вовсе — кнопка как будто не работает. Это сознательная защита: обработчик отправки гарантированно получает данные, прошедшие проверку. Отсюда два практических вывода. Первый: не дублируй проверки в OnSubmit — там место только для того, чего валидатор знать не может, например занят ли логин на сервере. Второй: если заполняешь поля кодом, а не руками, проверь их сам — у Entry есть метод Validate(), который запускает валидатор и рисует ошибку. Для нестандартных правил описывай обычную func(string) error: хоть с regexp для почты, хоть со strconv для чисел. Это и есть валидация формы в чистом виде: одна функция на поле и ноль проверок в обработчике отправки. Полный разбор пакетных валидаторов — тема восемнадцатого урока, здесь нам хватит функций.

Окно с формой уже живое, но пока всё в нём делает только кнопка Submit. А что вообще происходит, когда ты нажимаешь любую кнопку? Как Fyne решает, кому отдать клик, и можно ли повесить действие на правую кнопку мыши или на Ctrl+N? Шестой урок — события и обработчики — разбирает всю вертикаль ввода от OnTapped до горячих клавиш. Если хочется освежить виджеты, из которых собраны поля формы, — вернись к каталогу базовых виджетов; а про то, как Box делит место и зачем нужен Spacer, напомнит четвёртый урок. Сетки сегодня встретились с примитивом canvas.NewRectangle — по-настоящему рисовать им научит седьмой урок. Полный план из двадцати пяти уроков лежит на странице курса Fyne. Домашнее задание ниже соберёт из этого урока маленький, но настоящий инструмент — форма с плитками настроек и прокруткой.