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

Изображение

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

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

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

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

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

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

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

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

    CIRCLEIMAGE

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

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

Указывает источник изображения. Доступные варианты:

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

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

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

  • Asset: Нажмите кнопку Upload Image +, чтобы загрузить изображение с компьютера или выбрать из ранее загруженных ресурсов. При выборе этого варианта можно включить переключатель Set Dark Mode, чтобы указать отдельное фоновое изображение для темной темы, улучшая визуальный опыт в разных условиях освещения.

  • Uploaded File: Выбор этого варианта позволяет динамически обрабатывать данные изображений в приложении, включая изображения, загружаемые пользователями во время работы с приложением. Это подходит для приложений, требующих пользовательского или сгенерированного контента. Установите это значение, используя Widget State > Uploaded File, чтобы управлять изображением как частью состояния приложения.

Box Fit​

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

image-boxfit.png

Пример горизонтального и вертикального изображения в различных опциях BoxFit

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

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

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

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

Расширенные функции изображений​

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

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

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

  • Use Hero Animation: Включает эффект hero-анимации при переходе между экранами. Это может создать впечатление, что изображение «летит» между экранами для более плавного визуального перехода.