Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
6.2 KiB
| title | description |
|---|---|
| Авто-раскладка | Авто-раскладка на основе flexbox в OpenPencil — направление, отступы, выравнивание и размеры дочерних элементов. |
Авто-раскладка
Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма по правилам flexbox. Она управляет направлением, отступами, выравниванием и адаптивными размерами.
Включение авто-раскладки
- Выделите фрейм и нажмите ⇧A (Shift + A), чтобы включить или выключить авто-раскладку
- Выделите свободные узлы (без родительского фрейма) и нажмите ⇧A, чтобы обернуть их в новый фрейм с авто-раскладкой
При оборачивании выделения узлы сортируются по визуальному положению: слева направо для горизонтальной раскладки, сверху вниз для вертикальной.
Направление раскладки
Выберите, как располагаются дочерние элементы:
- Горизонтально — элементы выстраиваются слева направо
- Вертикально — элементы выстраиваются сверху вниз
- Перенос — элементы переносятся на следующую строку/столбец, когда заканчивается место
Отступы
Промежуток
Расстояние между соседними дочерними элементами. Задаётся одним значением, которое применяется между всеми элементами.
Внутренние отступы
Расстояние между краем фрейма и его дочерними элементами. Задайте одинаковое значение для всех сторон или разверните для настройки каждой стороны отдельно (верхняя, правая, нижняя, левая).
Выравнивание
Выравнивание по основной оси
Определяет, как дочерние элементы распределяются вдоль направления раскладки:
- Начало — элементы прижимаются к началу
- Центр — элементы по центру
- Конец — элементы прижимаются к концу
- Равномерно — элементы распределяются с равными промежутками между ними
Выравнивание по поперечной оси
Определяет, как дочерние элементы позиционируются перпендикулярно направлению раскладки:
- Начало — элементы выравниваются по началу
- Центр — элементы по центру
- Конец — элементы выравниваются по концу
- Растянуть — элементы растягиваются, заполняя поперечную ось
Размеры дочерних элементов
Каждый дочерний элемент в фрейме с авто-раскладкой может иметь собственный режим размера:
- Фиксированный — использует заданные ширину/высоту элемента
- Заполнить — растягивается, заполняя доступное пространство в родителе
- Обнять — сжимается под размер содержимого элемента
Перетаскивание для изменения порядка
Внутри фрейма с авто-раскладкой перетащите дочерний элемент, чтобы изменить его порядок среди соседних элементов. Визуальный индикатор вставки показывает, куда будет помещён элемент.
Панель свойств
Когда выделен фрейм с авто-раскладкой, в разделе «Раскладка» панели свойств отображаются все элементы управления: направление, промежуток, внутренние отступы, выравнивание по основной и поперечной осям.
Сочетания клавиш
| Действие | Mac | Windows / Linux |
|---|---|---|
| Переключить авто-раскладку | ⇧A | Shift + A |
Советы
- Авто-раскладка пересчитывается сразу после создания, поэтому границы выделения обновляются немедленно.
- Вкладывайте фреймы с авто-раскладкой для создания сложных адаптивных макетов (например, вертикальный фрейм, содержащий горизонтальные строки).
- Используйте размер «Заполнить», чтобы элемент занял оставшееся пространство, аналогично flex-grow: 1 в CSS.
- См. Рисование фигур для создания фреймов, к которым применяется авто-раскладка.
- См. Компоненты для использования авто-раскладки внутри переиспользуемых компонентов.