Размытие

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

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

Вот пример, как добавить виджет Blur в ваш проект:

1. Сначала перетащите виджет Blur из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов.
2. Теперь добавьте виджет Image внутрь виджета Blur. Настройте изображение в соответствии с вашими требованиями.

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

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

подсказка

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

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

1. Сначала добавьте виджет Container. Перейдите в панель свойств, установите его ширину в Inifinity и высоту в 200. Также установите фоновое изображение.
2. Внутри Container добавьте виджет Blur.
3. Теперь добавьте виджет Text внутрь виджета Blur и выровняйте его по центру, изменив выравнивание.
4. Наконец, выберите виджет Blur из дерева виджетов или области холста. Перейдите в панель свойств, прокрутите вниз до раздела Blur Properties и включите переключатель Backdrop. Этот переключатель определяет, применять ли эффект размытия к родительскому или дочернему виджету. Если он включен, размытие применяется к родителю, а если выключен — к дочернему.

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

1. Сначала добавьте виджет Container. Перейдите в панель свойств, установите его ширину в Inifinity и высоту в 200. Также установите фоновое изображение.
2. Добавьте виджет Column (внутри Container) и установите его Main Axis Alignment в end.
3. Добавьте виджет Blur (внутри Column).
4. Добавьте виджет Container (внутри Blur) и установите его ширину в infinity и высоту в 50. Также сделайте фон контейнера примерно на 40% прозрачным, выбрав Fill Color и сдвинув второй ползунок влево.
5. Добавьте виджет Text (внутри Container) и выровняйте его по центру, изменив выравнивание.
6. Наконец, выберите виджет Blur из дерева виджетов или области холста. Перейдите в панель свойств, прокрутите вниз до раздела Blur Properties и включите переключатель Backdrop. Этот переключатель определяет, применять ли эффект размытия к родительскому или дочернему виджету. Если он включен, размытие применяется к родителю, а если выключен — к дочернему.

Настройка

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

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

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

Чтобы изменить силу размытия:

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

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

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

1. Выберите виджет Blur из дерева виджетов или области холста.
2. Перейдите в панель свойств (справа на экране) и прокрутите вниз до раздела Blur Properties.
3. Поставьте галочку/снимите галочку с свойства Should Apply Blur, чтобы показать/скрыть эффект размытия. Также это значение можно установить из переменной, такой как переменная состояния приложения, переменная ответа API или документ Firestore, нажав на Set from Variable.