Перейти к основному содержимому

TabBar

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

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

TabBarDemo.avif

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

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

  1. Добавьте виджет TabBar из вкладки Layout Elements.
  2. По умолчанию он добавляет три вкладки на страницу и отображает первую из них на холсте. В дереве виджетов он представлен как Tab и TabBar Page. Чтобы увидеть другую вкладку на холсте, выберите виджет TabBar, перейдите в Properties Panel и установите Active Tab в нужную вкладку.
  3. Чтобы настроить вкладку:
    1. Выберите Tab > перейдите в Properties Panel.
    2. Используйте свойство Text, чтобы изменить подпись вкладки.
    3. Вы также можете добавить значок, выровнять его по горизонтали и установить отступ. Совет: Чтобы отобразить только значок, удалите значение Text.
  4. Внутри TabBar Page вы можете заменить существующий виджет Text на любой другой виджет по вашему выбору.
  5. Чтобы добавить новую вкладку, перейдите в Properties Panel > Active Page > нажмите + Add Page.
подсказка
  • Если вы хотите изменить высоту TabBar Page, оберните виджет TabBar в контейнер и затем установите высоту контейнера.
  • Текущий индекс выбранной вкладки можно найти в меню set from variable menu > widget state > TabBar Current Index.

Изменение вкладки в ответ на действие виджета​

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

Настройка​

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

Настройка подписи​

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

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

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

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

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

  1. Выберите виджет TabBar > перейдите в Properties Panel > Tab Properties.

  2. Выберите Tab Bar Style из вариантов Indicator, Button и Toggle Button.

  3. Когда стиль установлен в Indicator, вы можете установить Color и Weight (толщину) индикатора.

    customizing-indicator-style.png

  4. Когда стиль установлен в Button, у вас есть следующие варианты настройки:

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

    customizing-button-TabBar-style.png

  5. Когда стиль установлен в Toggle Button, у вас есть следующие варианты настройки:

    1. Чтобы установить цвет фона вкладки для выбранного и невыбранного состояний, используйте Fill Color и Idle Fill Color соответственно.

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

    3. Чтобы добавить разделитель между вкладками, используйте свойства Div Border Color и Border Width.

    4. Вы также можете установить свойства Elevation и Button Margin для всех вкладок.

      customizing-toggle-button-TabBar-style.gif

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

Возможно, вы захотите отобразить определенную вкладку как выбранную сразу после загрузки TabBar. Для этого перейдите в Properties Panel > General Properties > введите значение Initial Tab Index. Обратите внимание, что индекс вкладки начинается с 0. Таким образом, если вы хотите установить вкладку 1, введите 0. Если вы хотите установить вкладку 2, введите 1 и так далее.

tab-index.webp

setting-initial-tab-index .gif

Изменение позиции панели вкладок​

Иногда вы можете захотеть изменить стандартную позицию панели вкладок, например, с верхней на нижнюю. Вы можете сделать это, перейдя в Properties Panel > General Properties > изменив значение Tab Bar Position.

change-the-tab-bar-position.gif

Сделать TabBar прокручиваемым​

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

Чтобы сделать TabBar прокручиваемым, выберите виджет TabBar > перейдите в Properties Panel > General Properties > включите опцию Tab Bar Scrollable.

к сведению

Если вкладок мало, вы можете управлять выравниванием с помощью свойства Tab Bar Horizontal Alignment. Однако для небольшого количества вкладок прокрутка может не потребоваться, но опция доступна при необходимости.

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

Отступ добавляет пространство между TabBar и его границей. Чтобы изменить отступ, выберите виджет TabBar, перейдите в Properties Panel > General Properties > найдите свойство Tab Bar Margin и измените значения.

set-margin .gif

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

По умолчанию вы можете переключаться на другую вкладку с помощью свайпа или клика по вкладке. Если вы хотите отключить поведение свайпа, вы можете сделать это, перейдя в Properties Panel > General Properties > отключив Allow Swiping to Switch Tabs.

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

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

Чтобы сохранить состояние вкладки, выберите виджет TabBar > Properties Panel > General Properties> включите Keep Tab State Alive.

Control Tab Bar [Action]​

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

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

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

  • Previous: Переключиться на предыдущую вкладку в TabBar.
  • Next: Переключиться на следующую вкладку в TabBar.
  • First: Переключиться на первую вкладку в TabBar.
  • Last: Переключиться на последнюю вкладку в TabBar.
  • Jump to: Переключиться на конкретную вкладку в TabBar. Обратите внимание, что индекс вкладки начинается с 0. Таким образом, если вы хотите перейти к вкладке 1, введите 0. Если вы хотите перейти к вкладке 2, введите 1 и так далее.

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

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

  1. Выберите Widget (например, Container, Button и т. д.), к которому вы хотите добавить действие.
  2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
  3. Найдите и выберите действие Control Tab Bar (в разделе Widget/UI Interactions).
  4. Установите Tab Bar to Control в name панели вкладок, добавленной на вашу страницу.
  5. Выберите тип действия.

Видеоурок​

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