Группировка элементов

Контейнер

Самый базовый элемент, который отвечает за расположение дочерних элементов — container. Элементы в нем находятся в том порядке, в котором они указаны.

В параметре orientation указываются типы расположения элементов:

  • vertical — для вертикального расположения;

    Посмотреть интерактивный пример

  • horizontal — для горизонтального расположения;

    Посмотреть интерактивный пример

  • overlap — с наложением.

    Посмотреть интерактивный пример

    Чтобы элемент занял все свободное место, его ширина должна быть match_parent. Если таких элементов несколько, они поделят место поровну или распределят его согласно значению параметра weight, если он указан.

    Чем меньше номер элемента в массиве items при orientation:"overlap", тем ниже он будет расположен. Нулевой элемент контейнера будет в самом низу.

В параметре layout_mode можно указать тип размещения элементов. Значение wrap означает перенос элементов на следующую строку, если они не поместились на предыдущей. По умолчанию layout_mode равен no_wrap.

Посмотреть интерактивный пример

Сетка

Элемент grid используется для сложной структуры табличной верстки. Он позволяет располагать элементы в нескольких столбцах и строках.

Можно объединять ячейки в строке или столбце:

  • row_span — параметр для объединения строк;
  • column_span — параметр для объединения столбцов.

Посмотреть интерактивный пример

Вес элемента (weight) определяет, сколько пространства он занимает внутри сетки. Может применяться как к ширине, так и к высоте.

Посмотреть интерактивный пример

Пейджер

Элемент pager отображает горизонтальный набор карточек, где полностью видна основная карточка, а соседние показываются частично.

Посмотреть интерактивный пример

Настроить ширину основной карточки возможно в поле layout_mode:

  • fixed — показывается фиксированная часть соседних карточек, остальное место занимает основная карточка.
  • percentage — ширина основной карточки указывается в процентах от ширины пейджера.

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

Посмотреть интерактивный пример

Картинки внутри элемента gallery могут быть любого размера и содержимого, им необязательно быть однотипными. Параметр item_spacing определяет расстояние между элементами галереи кроме первого и последнего отступа от краев — ими можно управлять с помощью paddings.

Высота галереи устанавливается по высоте самого большого элемента.

Посмотреть интерактивный пример

Табы

Элемент tabs отличается от галереи наличием строки-заголовка. Одномоментно видно только одну страницу, остальные можно переключить свайпами.

Высота табов на разных платформах отличается:

  • В Android первый таб оригинальной высоты. Высота оставшихся табов (со второго по последний) одинакова и равна максимальному из их значений.
  • В iOS все табы оригинальной высоты.

Посмотреть интерактивный пример

Разделитель

Элемент separator используется для разделения места между элементами. Ориентация разделителя определяется в параметре orientation:

  • vertical — вертикальная;
  • horizontal — горизонтальная.

Чтобы полоска, разделяющая элементы, не отображалась, сделайте цвет separator прозрачным.

Посмотреть интерактивный пример

Управление табами, пейджером и галереей

Для управления используйте действия с переключением элементов.

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru

Репозиторий DivKit

Предыдущая
Flutter
Следующая
Расположение и размеры элементов