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

MouseRegion

Виджет MouseRegion уведомляет вас всякий раз, когда указатель мыши входит в виджет или выходит из него. Вы можете использовать его для создания пользовательского опыта (UX), например, для анимации кнопок при наведении на них курсора или для отображения/скрытия пунктов меню при наведении на значок меню.

На этой странице вы узнаете, как добавить виджет MouseRegion, использовать его для отображения/скрытия элементов и настроить.

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

Вот пошаговые инструкции по созданию такого примера:

  1. Сначала нажмите + Add Widget и перетащите виджет MouseRegion из вкладки Base Elements или добавьте его напрямую в дерево виджетов.
  2. Добавьте Button (внутри MouseRegion) с анимацией On Action Trigger.
  3. Выберите виджет MouseRegion, перейдите в раздел Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор Action flow Editor в новом всплывающем окне.
  4. Выберите вкладку On Mouse Enter. Действия, добавленные здесь, будут запускаться всякий раз, когда мышь входит в виджет MouseRegion.
    1. Добавьте действие Widget Animation, чтобы запустить анимацию на кнопке.
  5. Выберите вкладку On Mouse Exit. Действия, добавленные здесь, будут запускаться всякий раз, когда мышь покидает виджет MouseRegion.
    1. Добавьте действие Widget Animation, чтобы остановить анимацию на кнопке.

Отображение/скрытие элементов с помощью MouseRegion​

Используя обратные вызовы, предоставляемые виджетом MouseRegion, вы можете отображать или скрывать виджет. Идея заключается в обновлении переменной App State при входе или выходе указателя мыши из виджета. Затем используйте ту же переменную состояния приложения для добавления Conditional Visibility к виджету.

Давайте разберем, как создать следующий пример:

Вот пошаговые инструкции:

  1. Сначала добавьте Stack > Container > MouseRegion > IconButton, чтобы отобразить значок меню.
  2. Добавьте Container > MouseRegion > Column (с некоторыми пунктами меню/опциями) внутри того же виджета Stack.
Примечание

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

img_9.png

  1. Создайте булевую переменную App State и используйте ее для добавления условной видимости к опциям меню.
  2. На обоих виджетах MouseRegion добавьте действие update app state variable, чтобы установить True при входе мыши и False при выходе мыши.
Использование переменной состояния приложения и MouseRegion для отображения/скрытия виджета

Настройка​

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

Настройка курсора мыши​

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

Чтобы настроить курсор мыши, выберите виджет MouseRegion, перейдите в панель свойств, найдите выпадающий список Mouse Cursor и выберите подходящий вариант.