Картинка

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

• Виджет Image: Виджет Image является универсальным компонентом, используемым для отображения изображений из различных источников, включая локальные ресурсы и интернет. Он необходим для добавления визуальных элементов в ваши приложения, таких как логотипы, иконки и фотографии.

• Виджет CircleImage: Виджет CircleImage специально создан для сценариев, где требуется отображение изображений в круглом формате, часто используемого для фотографий профиля или элементов брендинга.

Свойства для виджета Image предоставляют различные параметры настройки, от размеров и подгонки до расширенных анимаций.

Общие свойства изображения

• Ширина и высота: Указывают размеры изображения. Значения могут быть в пикселях (px) или в процентах (%) от размера родительского контейнера, обеспечивая адаптивный дизайн.

  • В случае с виджетом CircleImage можно также определить диаметр виджета.

• Border Radius: Регулирует степень закругления углов изображения. Можно определить радиус скругления для каждого угла отдельно (TL - верхний левый, TR - верхний правый, BL - нижний левый и BR - нижний правый) или для всех углов вместе. Большее значение приводит к более закругленным углам.

  CircleImage

  Эта опция недоступна для виджета CircleImage, так как он имеет круглую форму.

Тип изображения

Определяет источник изображения. Варианты включают:

• Сетевое: Введите URL изображения в поле ввода пути. Используется для изображений, размещенных онлайн.

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

    • Когда кэширование включено для виджета Image и CircleImage, можно также определить длительность появления/исчезновения (когда хэш размытия не включен). Эта настройка недоступна для фонового изображения контейнера.

• Ресурс: Нажмите кнопку "Загрузить изображение +", чтобы загрузить изображение с компьютера или выбрать из ранее загруженных ресурсов. При выборе этой опции можно включить переключатель Установить темный режим, чтобы указать отдельное фоновое изображение для темных режимов, улучшая визуальный опыт в различных условиях освещенности.

• Загруженный файл: При выборе этой опции можно динамически обрабатывать данные изображения в приложении, учитывая изображения, которые пользователи загружают во время использования приложения. Это делает их подходящими для приложений, требующих контента, специфичного для пользователя. Установите это, чтобы использовать Состояние виджета > Загруженный файл для управления изображением в рамках состояния приложения.

Подгонка по размерам

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

Примеры горизонтального и вертикального изображений с различными параметрами Box Fit

• Fill: Масштабирует изображение для полного заполнения контейнера, что может исказить изображение.
• Contain: Масштабирует изображение для подгонки в контейнер без искажений, что может оставить пустое место.
• Cover: Масштабирует изображение для полного покрытия контейнера без искажений, возможно обрезая некоторые части изображения.
• Fit Width: Масштабирует изображение для подгонки по ширине контейнера, возможно оставляя пустое место по вертикали.
• Fit Height: Масштабирует изображение для подгонки по высоте контейнера, возможно оставляя пустое место по горизонтали.
• None: Без изменения масштаба или настройки, показывая изображение в его исходном размере.
• Scale Down: Центрирует виджет и уменьшает его масштаб до тех пор, пока он не подойдет в доступное пространство.

Выравнивание изображения

Управляет выравниванием изображения в контейнере. Эта сетка позволяет вам точно позиционировать изображение в контейнере, с возможностью выравнивать его по центру, верху, низу, слева, справа и их комбинациям.

• X & Y: Регулирует точное позиционирование фонового изображения вдоль осей X (горизонтально) и Y (вертикально). Это полезно для точной настройки расположения изображения.

Расширенные функциональности изображения

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

• Использовать хэш-значение размытия: Когда включено, отображается размытое заполнительное изображение, пока основное изображение загружается, на основе хэш-значения, представляющего оригинальное изображение. Это может улучшить воспринимаемую производительность загрузки изображения.

• Сделать расширяемым: При включении изображение может быть увеличено, обычно до более крупного вида или полноэкранного режима, после взаимодействия пользователя.

• Использовать анимацию Hero: Включает эффект анимации героя при переходе между экранами. Это позволяет изображению казаться "летящим" между экранами для плавного визуального перехода.