Хотите создать какой-то диалог в ответ на действие, но предоставленный класс Tooltip
просто не делает этого за вас? Может быть, пора подумать о реализации OverlayEntry
.
Что такое подсказка?
Всплывающая подсказка - это, как правило, статическая текстовая метка, которая появляется поверх чего-либо на вашем экране и дает больше информации о том, что это что-то делает. Некоторые виджеты поставляются из коробки с tooltip
property, которое вы можете установить:
Например, FloatingActionButton
поставляется с этим свойством и отображается, если пользователь долго нажимает на кнопку:
Без создания пользовательского FloatingActionButton
для всплывающей подсказки не так много настроек. Дополнительное примечание: если вы хотите узнать, как настроить виджет Flutter, я написал статью, в которой показано, как это сделать здесь.
Однако вы можете использовать виджет Tooltip
напрямую, обернув его поверх другого виджета. В этом случае я заключил стандартный виджет Text
в Tooltip
, чтобы создать собственное сообщение:
Tooltip( message: "Hi this is the standard tip", child: Text( 'You have pushed the button this many times:', ), ),
Когда вы нажимаете и удерживаете текст, отображается заданное вами сообщение. Использование ToolTip
дает вам гораздо больше параметров для настройки, таких как его высота, стиль, вертикальное смещение и продолжительность:
Переопределение Tooltip
parameters по умолчанию может дать довольно индивидуальное сообщение:
Возможно, что-то из вышеперечисленного соответствует вашим потребностям, но если вы хотите добавить анимацию или показать всплывающую подсказку после другого жеста, мы можем сделать это самостоятельно, используя OverlayEntry
.
Создание нашей специальной «подсказки»
Чтобы сделать то, что вы видите в верхнем видео, выполните следующие действия:
Сначала мы будем использовать виджет GestureDetector
и поместить Text
widget в качестве его дочернего элемента. Я хочу, чтобы эта подсказка появлялась, если пользователь дважды нажимает на текст, поэтому я собираюсь добавить onDoubleTap
property:
Теперь давайте создадим наш реальный OverlayEntry
. Создайте новый файл .dart и назовите его как хотите (мой называется hint_overlay.dart). В своем новом файле создайте новый StatefulWidget и назовите его в соответствии с вашими потребностями (мой называется HintOverlay). Пока вы там, добавьте реализацию SingleTickerProviderStateMixin
(потому что она нам нужна для анимации) и методы initState
и dispose
:
Нам нужно HintOverlay
, чтобы принять два параметра:
1. Ссылка на OverlayEntry
, который HintOverlay
будет вставлен в (entry
)
2. Сообщение, которое будет отображаться как подсказка (message
):
(Очевидно, вы можете установить столько параметров, сколько захотите, но вы поймете, почему нам нужна ссылка хотя бы на OverlayEntry
passed in)
Я хочу, чтобы всплывающая подсказка отображалась в виде анимации - скольжения из правой части экрана в левую, поэтому я собираюсь добавить это AnimationController
и Tween
анимацию внутри initState
HintOverlay:
Кроме того, я создаю таймер (_startTimer
), который удалит OverlayEntry
по истечении заданного времени. Я запущу его через initState
и установлю его продолжительность на одну секунду больше, чем установлено для AnimationController
, таким образом он удаляется после того, как он находится вне экрана:
Когда мы вызываем .remove()
на OverlayEntry
, который мы передали (widget.entry), dispose()
будет активирован. Вот почему мы передаем эту ссылку.
Вернемся к main.dart
файлу, мы должны создать фактический OverlayEntry
и вернуть наш новый HintOverlay
widget. После этого наше OnDoubleTap
property вернет наш вставленный OverlayEntry
.
Теперь, когда все настроено, мы можем дважды нажать на текст «Моя подсказка для ввода оверлея», и наша подсказка должна скользить по экрану в стиле выделения. И снова:
Этот тип подсказки / подсказки можно использовать для других целей, так как я использую этот стиль для создания наложений уведомлений для уведомлений в чате «хедз-ап» и т.п.
Здесь должно быть достаточно, чтобы вы двигались в своем собственном направлении. Если вам понадобится помощь, обратитесь ко мне.
Заключительное примечание. Что касается доступности, вы можете обернуть свои виджеты виджетом семантики и установить с ним свои данные. Вы можете найти более подробную информацию о специальных возможностях на странице специальных возможностей Flutter здесь.
Вот полный код файла main.dart
и файла hint_overlay.dart
(я удалил большую часть стандартного кода Flutter из main.dart):
Main.dart
hint_overlay.dart