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

Нижняя панель

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

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

Типы действий нижней панели​

Ниже приведены типы действий нижней панели:

  1. Показать: Это открывает нижнюю панель.
  2. Закрыть: Это закрывает нижнюю панель.

Открытие нижней панели​

Следуйте шагам ниже, чтобы добавить действие, открывающее нижнюю панель:

  1. Сначала создайте компонент нижней панели компонент.
подсказка

Вы также можете создать его из шаблона 'BottomSheet' шаблоны.

  1. Выберите виджет (например, кнопку), из которого хотите открыть нижнюю панель.

  2. Выберите Действия в панели свойств (правое меню) и нажмите + Добавить действие.

  3. Найдите и выберите действие Bottom Sheet (в разделе Widget/UI Interactions).

  4. Чтобы открыть нижнюю панель, выберите Показать.

  5. Выберите компонент, который вы создали для нижней панели.

  6. (Необязательно) Установите значение Высоты. Вы должны задать высоту, если хотите, чтобы нижняя панель появлялась только на часть экрана.

  7. Вы можете установить Фон и Цвет барьера для нижней панели.

    Установка фона и цвета барьера

  8. Вы также можете передавать параметры в компонент нижней панели.

  9. По умолчанию это действие блокирует выполнение следующего действия (если оно есть), пока это действие выполняется (т. е. пока нижняя панель отображается на экране). Однако в некоторых случаях вы можете захотеть разрешить выполнение следующего действия (после этого), например, выполнить вызов API сразу после показа нижней панели. Для этого включите опцию Non Blocking.

  10. По умолчанию опция Non Dismissble закрывает нижнюю панель при клике вне её. Чтобы отключить это поведение, включите эту опцию.

  11. С опцией Enable Drag вы можете открывать и закрывать нижнюю панель с помощью свайпа.

  12. Необязательно: Если вы возвращаете какое-либо значение из нижней панели, укажите Имя переменной выходных данных действия. Результат будет сохранён в этой переменной.

Закрытие нижней панели​

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

  1. Выберите виджет (например, кнопку, ListTile, контейнер), на котором хотите добавить действие.
  2. Выберите Действия в панели свойств (правое меню) и нажмите + Добавить действие.
  3. Найдите и выберите действие Bottom Sheet (в разделе Widget/UI Interactions).
  4. Чтобы закрыть нижнюю панель, выберите Закрыть.
  5. Если вы хотите вернуть значение из текущей нижней панели, включите переключатель Has Value и передайте значение, установив его Тип данных и Источник значения.
    1. Если вы включите опцию Has Value, вы должны вернуться к действию, которое открывает эту нижнюю панель, и указать Имя переменной выходных данных действия. Это будет использовано для получения значения из нижней панели.
    2. Теперь вы можете использовать Имя переменной выходных данных действия для получения данных.

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