TabBar

TabBar — горизонтальный ряд вкладок: нажатие на вкладку меняет содержимое под ней. Каждая вкладка обычно соответствует разделу или категории.

Так устроены новостные приложения с рубриками, магазины с категориями товаров, соцсети с лентой, уведомлениями и сообщениями.

Как добавить

1. Перетащите TabBar из вкладки Layout Elements.
2. По умолчанию создаются три вкладки, на холсте видна первая. В дереве виджетов это Tab и TabBar Page; чтобы показать другую, выделите TabBar и установите Active Tab в панели свойств.
3. Настройка самой вкладки:
   1. Выделите Tab и откройте Properties Panel.
   2. Свойство Text задаёт подпись.
   3. Можно добавить значок, выровнять его и задать отступ. Чтобы осталась только иконка, очистите Text.
4. Внутри TabBar Page стандартный Text заменяется на любое содержимое.
5. Новая вкладка добавляется кнопкой + Add Page в Properties Panel > Active Page.

Переключение вкладки действием

Чтобы сменить вкладку по нажатию кнопки или другому событию, используйте действие Control Tab Bar.

Настройки

Внешний вид и поведение задаются в панели свойств.

Подписи

1. Выделите TabBar и откройте Properties Panel > Label Properties.
2. Selected Color и Unselected Color задают цвет подписи выбранной и остальных вкладок.
3. Label Padding добавляет отступы вокруг подписи.
4. Label Style отвечает за оформление текста. Переключатель Custom Unselected Label Style позволяет задать отдельный стиль невыбранным вкладкам.

Вид вкладок

По умолчанию текущая вкладка отмечена линией снизу. Кроме этого вкладки можно оформить как ряд кнопок или как переключатель.

1. Выделите TabBar и откройте Properties Panel > Tab Properties.

2. Выберите Tab Bar Style: Indicator, Button или Toggle Button.

3. Для Indicator задаются Color и Weight — цвет и толщина линии.

   

4. Для Button:

   1. Fill Color и Idle Fill Color — фон выбранной и невыбранной вкладки.
   2. Border Color и Idle Border Color — цвет рамки в тех же состояниях; чтобы рамка появилась, задайте Border Width.
   3. Border Radius — скругление вкладок.
   4. Elevation и Button Margin — тень и внешние отступы.

   

5. Для Toggle Button:

   1. Fill Color и Idle Fill Color — фон выбранной и невыбранной вкладки.

   2. Border Color и Border Width — общая рамка вокруг всех вкладок.

   3. Div Border Color и Border Width — разделители между вкладками.

   4. Elevation и Button Margin — тень и внешние отступы.

Вкладка при открытии

Initial Tab Index в Properties Panel > General Properties задаёт вкладку, выбранную при загрузке. Нумерация с нуля: первой соответствует 0, второй 1 и так далее.

Положение панели вкладок

Панель можно перенести сверху вниз: Properties Panel > General Properties > Tab Bar Position.

Прокрутка вкладок

Когда вкладок много, они не помещаются на экран. Переключатель Tab Bar Scrollable в Properties Panel > General Properties делает ряд прокручиваемым по горизонтали.

Внешние отступы

Tab Bar Margin в Properties Panel > General Properties отделяет панель вкладок от границ.

Переключение смахиванием

Вкладки переключаются и нажатием, и смахиванием. Чтобы оставить только нажатие, выключите Allow Swiping to Switch Tabs в Properties Panel > General Properties.

Сохранение состояния вкладки

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

Переключатель Keep Tab State Alive в Properties Panel > General Properties это предотвращает.

Действие Control Tab Bar

Действие переключает вкладки из логики приложения: перейти к следующей, вернуться к предыдущей, прыгнуть на конкретную.

Виды действия

• Previous — предыдущая вкладка.
• Next — следующая.
• First — первая.
• Last — последняя.
• Jump to — конкретная вкладка по номеру. Нумерация с нуля: первой соответствует 0, второй 1 и так далее.

Как добавить

1. Выделите виджет — контейнер, кнопку или другой.
2. Выберите Actions в панели свойств. Для первого действия нажмите + Add Action, для последующих — «+» под предыдущим блоком в Action Flow Editor и Add Action.
3. Найдите действие Control Tab Bar в группе Widget/UI Interactions.
4. В Tab Bar to Control укажите имя нужного TabBar на странице.
5. Выберите вид действия.

Видеоразбор