Размытие

Виджет размытия используется для размытия своего дочернего или родительского виджета. Вы можете использовать этот виджет для создания эффекта матового стекла, обычно видимого в iOS.

Добавление виджета размытия

Вот пример того, как вы можете добавить виджет размытия в свой проект:

1. Сначала перетащите виджет Размытие из вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. Теперь добавьте виджет Изображение внутрь виджета Размытие. Настройте изображение в соответствии с вашими требованиями.

Добавление эффекта размытия к родительскому виджету

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

подсказка

Добавление эффекта размытия к родителю помогает создать эффект матового стекла.

Вот как создать первый пример:

1. Сначала добавьте виджет Контейнер. Перейдите в панель свойств, установите его ширину на Infinity и высоту на 200. Также установите его Фоновое изображение.
2. Внутри контейнера добавьте виджет Размытие.
3. Далее добавьте виджет Текст внутри виджета размытия и выровняйте его по центру, изменив его выравнивание.
4. Наконец, выберите виджет Размытие из дерева виджетов или области холста. Перейдите в панель свойств, прокрутите вниз до раздела Свойства размытия и включите переключатель Задник. Этот переключатель определяет, следует ли добавлять эффект размытия к родителю или дочернему виджету. Если включен, то будет размыт родительский виджет, а если отключен, то эффект размытия будет на дочернем.

Вот шаги для создания второго примера:

1. Сначала добавьте виджет Контейнер. Перейдите в панель свойств, установите его ширину на Infinity и высоту на 200. Также установите его Фоновое изображение.
2. Добавьте виджет Столбец (внутри контейнера) и установите его Главное выравнивание оси на конец.
3. Добавьте виджет Размытие (внутри столбца).
4. Добавьте виджет Контейнер (внутри размытия) и установите его ширину на infinity и высоту на 50. Также установите прозрачность контейнера около 40%, выбрав Цвет заливки и переместив второй бегунок влево.
5. Добавьте виджет Текст (внутри контейнера) и выравняйте его по центру, изменив его выравнивание.
6. Наконец, выберите виджет Размытие из дерева виджетов или области холста. Перейдите в панель свойств, прокрутите вниз до раздела Свойства размытия и включите переключатель Задник. Этот переключатель определяет, следует ли добавлять эффект размытия к родителю или дочернему виджету. Если включен, то будет размыт родительский виджет, а если отключен, то эффект размытия будет на дочернем.

Настройка

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

Изменение силы размытия

Сила размытия - это степень размытия, добавленного к виджету. Этот виджет добавляет силу размытия, используя свойства Sigma X и Sigma Y. Sigma X устанавливает силу размытия по горизонтали, а Sigma Y - по вертикали. Более высокие значения Sigma X и Y увеличивают размытие, а установка их на 0 полностью убирает размытие.

Для изменения силы размытия:

1. Выберите виджет Размытие из дерева виджетов или области холста.
2. Перейдите в панель свойств (на правой стороне экрана) и прокрутите вниз до раздела Свойства размытия.
3. Измените значения в полях ввода Sigma X и Sigma Y.

Показать или скрыть эффект размытия

Чтобы показать или скрыть эффект размытия:

1. Выберите виджет Размытие из дерева виджетов или области холста.
2. Перейдите в панель свойств (на правой стороне экрана) и прокрутите вниз до раздела Свойства размытия.
3. Установите/Снимите установку флажка Применить размытие, чтобы показать/скрыть эффект размытия. Вы также можете установить это значение из переменной, такой как переменная состояния приложения, переменная ответа API или документ Firestore, нажав на Установить из переменной.