Классический подход к выравниванию компонентов в VCL и FMX прост в использовании и отлично годится для настольных операционных систем, таких как Windows и macOS.  Прежде всего за счет относительно небольших отличий в размерах используемых мониторов. Где нет проблемы с отображением сложной информации в условиях ограниченного пространства. Однако, он плохо сочетается с миром мобильных устройств, где большая вариативность устройств с различными форм-факторами и размерами экрана. С одной стороны, мобильные телефоны с маленькими экранами, с другой - планшеты с большими экранами.

Все это порождает необходимость иметь инструменты для построения адаптивных интерфейсов приложений. Именно с этой целью был выбран Flexbox, как основная система выравнивания в FGX Native. 

Основные преимущества

1. Любой визуальный компонент в FGX Native легко делается "резиновым". Компоненты могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
2. Выравнивание по вертикальной и/или горизонтальной осям.
3. Компоненты могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
4. Поддержка языков с написанием справа налево rtl (right-to-left).
5. Внешние/внутренние отступы, пропорциональные размеры, якоря и т.д.

В данном руководстве нет описания стандарта Flexbox. Вы можете изучить его самостоятельно по представленным ниже ссылкам:

• Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
• CSS 3 Flexbox
• Стандарт CSS Flexbox
• Flexbox

Здесь можно потренироваться:

• Практические упражнения с лягушками
• Площадка для проведения экспериментов

Адаптация FlexBox в FGX Native

В этом разделе собрана базовая информация об использовании Flexbox в библиотеке. С точки зрения Flexbox в библиотеке введены два типа компонентов:

• Контейнер (Реализует IFGXFlexContainer) может содержать внутри себя другие компоненты и отвечает за выравнивание дочерних компонентов по правилам Flexbox.
• Конечный компонент (TfgControl) - не может содержать внутри себя другие компоненты.

Несмотря на то, что Flexbox внедрен на уровне TfgControl, библиотека допускает использование других систем выравнивания, которые необходимы для реализации специфичного поведения.

Flexbox в CSS работает с набором дополнительных свойств в атрибуте style. В FGX Native эти свойства разнесены в разные логические группы свойств компонентов:

• Настройки выравнивания конечного компонента в рамках родителя:
  • TfgControl.PositionMode - режим позиционирования (абсолютное или относительное)
  • TfgControl.Alignment - базовые настройки выравнивания в рамках родителя, отвечающие за поведение компонента при выравнивании (по вертикали, по горизонтали, сетка и тд.)
  • TfgControl.Margins - внешние отступы
  • TfgControl.Position - позиция контрола в абсолютных координатах (актуально только для PositionMode = Absolute)
  • TfgControl.RelativePosition - относительное позиционирование компонента в рамках родителя относительно его сторон (аналог якорей, актуально только для PositionMode = Absolute)
  • TfgControl.Size - размер компонента
  • TfgControl.Constraints - ограничения на размер (максимальный/минимальный размер)
• Настройки выравнивания Контейнер FlexBox в рамках родителя:
  • TfgLayout.AlignmentChildren - настройки выравнивания дочерних компонентов
  • TfgLayout.Padding - внутренние отступы

Видео с наглядной демонстрацией работы выравнивания в дизайнере: https://youtu.be/1ISJbMU-s2Q?t=1763

Отладка разметки

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

В любой момент времени, как в runtime, так и в designtime, можно снять дамп разметки. Дамп представляет собой HTML разметку с CSS свойствами. В атрибуте style содержится набор заданных свойств (по стандарту CSS FlexBox), в layout - окончательный размер и позиция компонента.

Пример разметки:

<div layout="width: 360; height: 590; top: 0; left: 0;" style="align-content: stretch; width: 360px; height: 590px; position: absolute; left: 0px; top: 0px; " >
  <div layout="width: 360; height: 80; top: 0; left: 0;" style="align-self: stretch; height: 80px; " ></div>
  <div layout="width: 360; height: 510; top: 80; left: 0;" style="flex-grow: 1; " ></div>
</div>

Runtime

В режиме выполнения вашего приложения, разметку можно получить, вызвав метод DumpLayout TfgYogaTreeManager и передав туда интересуемый компонент. Обратите внимание, что разметка выдается в этом случае для всего дерева контролов, корнем которого является ваш переданный компонент. Далее строковое представление разметки можно вывести в лог устройства через TfgLog для дальнейшего анализа.

Designtime

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

Обратите внимание, что в примере выше, для TfgCollectionView не отображаются вложенные стили элементов. Это связано с тем, что TfgCollectionView использует свою собственную подсистему выравнивания компонентов. Именно поэтому в этом месте происходит "разрыв" разметки FlexBox. Однако, для TfgCollectionViewStyle разметка FlexBox отображается в стандартном режиме.