MouseRegion
MouseRegion сообщает, когда курсор входит в область, которую занимает его дочерний виджет, и когда покидает её. На эти события можно повесить анимацию, показать дополнительный блок или обновить другую часть интерфейса, пока курсор находится над виджетом.
Наведение существует только там, где есть мышь или тачпад, то есть в вебе и на десктопе. На телефоне курсора нет, поэтому для сенсорных экранов нужен вариант с нажатием. Важные действия не прячьте за наведением: пользователь телефона до них просто не доберётся.
Вот как виджет может реагировать на вход и выход курсора:
Как добавить MouseRegion
- Откройте палитру виджетов (Widget Palette) и добавьте MouseRegion из раздела Base Elements.
- Вложите в него виджет, который должен реагировать на наведение.
- Задайте дочернему виджету размер и положение. MouseRegion занимает ровно ту площадь, что и его дочерний виджет.
- Выделите MouseRegion и откройте вкладку Actions, чтобы настроить события курсора.
Как это выглядит в редакторе:
События MouseRegion
На вкладке Actions у MouseRegion два события.
On Mouse Enter
Срабатывает, когда курсор заходит в область MouseRegion. Сюда ставят показ блока, запуск анимации виджета или изменение переменной состояния.
On Mouse Exit
Срабатывает, когда курсор выходит из области. Здесь обычно делают обратное: прячут блок, останавливают или откатывают анимацию, сбрасывают переменную.
Настройки
Выделите MouseRegion и откройте раздел MouseRegion Properties в панели свойств (Properties Panel).
Вид курсора
Свойство Mouse Cursor задаёт, как выглядит курсор, пока он находится внутри MouseRegion.
Если дочерний виджет кликабельный, выберите курсор, который это показывает, например руку-указатель. Пользователь ещё до нажатия поймёт, что с элементом можно что-то сделать.
Наложенные друг на друга области
Включите Opaque, если этот MouseRegion должен перекрывать собой те, что лежат под ним: тогда нижние области перестают реагировать на курсор. Это нужно, когда области накладываются друг на друга, например внутри Stack, и события наведения должна получать только верхняя.
Выключите Opaque, если нижние MouseRegion должны по-прежнему откликаться на курсор.
Пример: значок поверх карточки
В Stack лежит карточка товара, которая при наведении приподнимается (меняет тень, elevation). Поверх неё — значок «В избранное». У карточки и у значка свой MouseRegion.
- Opaque на MouseRegion значка включён: при наведении на значок появляется только его подсказка, карточка остаётся как была.
- Opaque выключен: наведение на значок срабатывает и для значка, и для карточки под ним.
Советы
- Считайте наведение приятным дополнением, а не единственным способом что-то сделать. На сенсорных экранах дублируйте его нажатием.
- Всё важное — действия и информация — должно быть доступно без наведения.
- Пока курсор внутри MouseRegion, размер области не должен меняться. Если виджет при наведении сжимается, курсор оказывается снаружи, и события входа и выхода начинают срабатывать по кругу.
- Подбирайте курсор под действие: указатель для кликабельного, текстовый для поля ввода.
- Проверяйте наведение и мышью, и тачпадом. Отдельно проверьте запасные варианты с нажатием и с клавиатуры для тех, кто наводить не может.