Область наведения мыши

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

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

Давайте создадим пример, который анимирует кнопку при наведении на нее курсора. Вот как это выглядит:

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

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

Используя обратные вызовы, предоставляемые виджетом MouseRgion, вы можете показать или скрыть виджет. Идея заключается в обновлении переменной Local State, когда указатель мыши входит или выходит из виджета. А затем использовать ту же переменную локального состояния для добавления условной видимости виджета.

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

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

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

• Создайте локальную переменную состояния boolean и используйте ее для добавления условной видимости для пунктов меню.
• Для обоих виджетов MouseRegion добавьте действие обновления локальной переменной состояния, чтобы установить True при входе мыши и False при выходе.

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

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

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

Здесь приведены инструкции по добавлению подкладок.

Здесь приведены инструкции по настройке выравнивания.