Виджет Image используется для отображения изображения из загруженных активов или ссылки URL. Виджет изображения может отображать различные типы изображений, такие как JPEG, PNG, GIF, анимированный GIF, WebP, анимированный WebP, BMP и WBMP.

изо 1

Добавление изображения в проект

Вот как вы можете добавить виджет «Изображение» в свой проект:

  • Перетащите виджет Image с вкладки Base Elements (на панели виджетов) или добавьте его непосредственно из дерева виджетов.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
  • Найдите свойство Path и введите URL—адрес нового изображения.
  • Найдите внизу флажок Кэш, нажмите на него, чтобы установить флажок. Включение кэша позволит сохранить изображение и отображать его даже при отсутствии доступа к интернету.
изо 2
Каждый виджет Image, добавленный в проект, по умолчанию будет показывать случайное изображение с сайта picsum.com.

Изменение типа изображения

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

Изменение свойств

Панель свойств можно использовать для настройки внешнего вида и поведения виджета.

Добавить подложку

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

Настроить выравнивание

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

Изменение размеров изображения

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

  • Выберите изображение в дереве виджетов или в области холста.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
  • Найдите параметры Ширина и Высота.
  • Существует три способа задать размеры изображения:
    • Чтобы задать точный размер, выберите PX и введите нужные значения.
    • Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.
    • Чтобы сделать высоту или ширину изображения равной высоте или ширине экрана, просто нажмите на значок бесконечности ().
Изображение внутри контейнера ограничено размерами контейнера. Если вы хотите увеличить размер изображения, вам также придется увеличить размер контейнера.
изо 3

Изменение радиуса границы

Изменение радиуса границы позволяет создавать закругленные углы изображения.

Вот пример того, как создать закругленные углы:

  • Выберите Image в дереве виджетов или в области холста.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Изображение.
  • Найдите свойство Радиус границы и введите значение 50. По умолчанию значение 50 будет установлено для всех углов: TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый).
  • Нажмите на значок замка (), чтобы изменить каждый угол отдельно.
изо 4

Изменение значения Box Fit

Изменение значения Box Fit позволяет вам контролировать отображение изображения внутри виджета Image. Различные опции свойства Box Fit помогают масштабировать (увеличивать или уменьшать в размерах) изображение внутри виджета Image.

Чтобы изменить значение Box Fit:

  • Выберите Image в дереве виджетов или в области холста.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение«.
  • Найдите выпадающее значение Box Fit, попробуйте изменить его на другие значения, чтобы получить идеальное изображение.
изо 5

Установка темного режима изображения

Как показать изображение в темном режиме, смотрите здесь.

Показ изображения на полном экране

Инструкции по показу изображения на весь экран находятся здесь.

Отображение данных Firestore

Чтобы отобразить данные, извлеченные из коллекции Firestore, и документ в виджете Image, убедитесь, что вы:

  • Понимаете структурирование базы данных Firebase.
  • Выполнили все шаги в разделе «Настройка Firebase» для вашего проекта.
  • Извлекли данные из коллекции или документа.
  • Наконец, чтобы отобразить данные в виджете Image, выполните следующие шаги.

Показать/скрыть изображение

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь