TabBar

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

Он может использоваться в различных приложениях, таких как новостные приложения с разными категориями, e-commerce приложения с категориями товаров или социальные приложения с различными разделами, такими как ленты, уведомления и сообщения.

Добавление виджета TabBar

Чтобы добавить виджет TabBar в ваше приложение:

1. Добавьте TabBar из вкладки Элементы макета.
2. По умолчанию добавляются три вкладки, и первая из них отображается на холсте. В дереве виджетов он представлен как Tab и TabBar Page. Чтобы просмотреть другую вкладку, выберите TabBar, перейдите в Панель свойств и установите Активная вкладка на нужную.
3. Для настройки вкладки:
   1. Выберите Tab > Перейти в панель свойств.
   2. Используйте свойство Текст, чтобы изменить метку вкладки.
   3. Вы также можете добавить значок, выровнять его по горизонтали и задать отступы. Совет: Чтобы отображался только значок, уберите текст.
4. Внутри TabBar Page можно заменить существующий виджет Текст на любой виджет по вашему выбору.
5. Чтобы добавить новую вкладку, перейдите в Панель свойств > Активная страница > нажмите + Добавить страницу.

подсказка

• Если нужно изменить высоту TabBar Page, оберните виджет TabBar в контейнер и установите высоту контейнера.
• Текущий выбранный индекс вкладки можно найти в меню установки переменных > состояние виджета > Текущий индекс TabBar.

Смена вкладки в ответ на действие виджета

Если вы хотите изменить выбор вкладки в ответ на действие виджета, например, при нажатии кнопки, вы можете сделать это, добавив действие Control Tab Bar.

Настройка

Вы можете настроить внешний вид и поведение этого виджета, используя различные свойства в панели свойств.

Настройка метки

Чтобы настроить метку вкладки:

1. Выберите виджет TabBar > перейдите в панель свойств > Свойства метки.
2. Чтобы задать разные цвета для выбранной и невыбранной вкладки, используйте Цвет при выборе и Цвет при невыборе.
3. Чтобы добавить отступ вокруг метки, используйте свойство Отступ метки.
4. Свойство Стиль метки позволяет изменить стилистику. Вы также можете задать стиль для невыбранного текста вкладки, включив Пользовательский стиль невыбранной метки.

Настройка вкладки

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

Чтобы изменить стиль вкладки:

1. Выберите виджет TabBar > перейдите в панель свойств > Свойства вкладки.

2. Выберите Стиль вкладки из Индикатор, Кнопка или Переключатель.

3. Если стиль установлен на Индикатор, вы можете задать Цвет и Вес (толщину) индикатора.

   

4. При выборе Кнопка у вас будут доступны следующие параметры:

   1. Чтобы установить цвет фона для выбранного и невыбранного состояний, используйте Цвет заполнения и Цвет заполнения при простое.
   2. Чтобы установить цвет границы для выбранного и невыбранного состояний, используйте Цвет границы и Цвет границы при простое. Также установите Ширину границы, чтобы увидеть ее.
   3. Для изменения углов используйте Радиус границы.
   4. Вы также можете задать свойства Высота и Отступ кнопки для всех вкладок.

   

5. При выборе Переключатель доступны следующие параметры:

   1. Установите цвет фона для выбранного и невыбранного состояний с помощью Цвет заполнения и Цвет заполнения при простое.

   2. Чтобы добавить границу вокруг всех вкладок, используйте свойства Цвет границы и Ширина границы.

   3. Для разделителя между вкладками используйте Цвет разделителя границы и Ширина границы.

      

Установка начального индекса вкладки

Для отображения определенной вкладки при загрузке TabBar перейдите в Панель свойств > Общие свойства > введите значение Начальный индекс вкладки. Обратите внимание, что индекс вкладок начинается с 0.

Изменение позиции TabBar

Иногда может понадобиться изменить позицию TabBar, например, с верхней на нижнюю. Перейдите в Панель свойств > Общие свойства > измените значение Позиция TabBar.

Включение прокрутки для TabBar

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

Чтобы сделать TabBar прокручиваемым, выберите виджет TabBar > перейдите в Панель свойств > Общие свойства > включите опцию Прокручиваемый TabBar.

к сведению

При небольшом количестве вкладок вы можете настроить выравнивание с помощью свойства Горизонтальное выравнивание TabBar.

Установка отступа

Отступ добавляет пространство между TabBar и его границей. Чтобы изменить отступ, выберите виджет TabBar, перейдите в Панель свойств > Общие свойства > найдите Отступ TabBar и измените значения.

Отключение перехода по свайпу

По умолчанию можно переключаться между вкладками, используя свайп и нажатие. Чтобы отключить переход по свайпу, перейдите в Панель свойств > Общие свойства > отключите Разрешить свайп для переключения вкладок.

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

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

Чтобы сохранить состояние вкладки, выберите виджет TabBar > Панель свойств > Общие свойства> включите Сохранить состояние вкладки.

Действие [Control Tab Bar]

С помощью этого действия можно более точно управлять поведением переключения вкладок в TabBar.

Типы действий

Это типы действий, которые можно добавить в TabBar:

• Previous: Переключение на предыдущую вкладку в TabBar.
• Next: Переключение на следующую вкладку в TabBar.
• First: Переключение на первую вкладку в TabBar.
• Last: Переключение на последнюю вкладку в TabBar.
• Jump to: Переключение на определенную вкладку в TabBar. Учтите, что индекс вкладки начинается с 0.

Добавление действия Control Tab Bar

Следуйте шагам ниже, чтобы добавить это действие на любой виджет.

1. Выберите Виджет (например, контейнер, кнопку и т.д.), на который хотите добавить действие.
2. В панели свойств выберите Действия. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку "+" под предыдущим действием (в Редакторе потоков действий) и выберите Добавить действие.
3. Найдите и выберите Control Tab Bar (в разделе Виджеты/Взаимодействия с UI).
4. Установите Tab Bar для управления в имя добавленного на страницу TabBar.
5. Выберите тип действия.

Видеоруководство

Если вы предпочитаете видеоуроки, вот для вас: