Просмотр медиа

Виджет MediaDisplay показывает изображение или видео по ссылке URL. Вы можете использовать этот виджет внутри прокручиваемых виджетов, таких как ListView (для отображения ленты активности) и GridView (для отображения всех фотографий и видео вместе).

Давайте построим пример использования виджета MediaDisplay внутри ListView и отображения фотографий и видео из базы данных Firestore.

Шаги по добавлению и использованию MediaDisplay следующие:

1. Построение пользовательского интерфейса
2. Добавление фотографий и видео в коллекцию
3. Запрос коллекции в ListView
4. Отображение данных в элементах пользовательского интерфейса

Пользовательский интерфейс состоит из виджетов ListView и MediaDisplay. Вот как их можно добавить:

• Сначала удалите существующий виджет Column и перетащите виджет ListView с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перетащите виджет MediaDisplay с вкладки Base Elements и поместите его внутрь ListView. При необходимости измените его ширину и высоту.

Чтобы добавить и отобразить данные из Firestore, убедитесь, что вы выполнили все перечисленные предварительные условия.

• Ознакомьтесь со структурированием базы данных Firebase.
• Выполните все шаги в разделе «Настройка Firebase» для вашего проекта.
• Создайте Коллекцию со схемой, содержащей поле с типом данных Image Path.
• Добавьте данные в коллекцию с некоторыми URL—адресами изображений и видео.

Ваша коллекция должна выглядеть следующим образом:

В этом шаге вы запросите коллекцию, чтобы получить список документов из коллекции Firestore и показать их в ListView.

Чтобы запросить коллекцию в ListView:

• Выберите виджет ListView в дереве виджетов или в области холста.
• Перейдите на вкладку Backend Query (в правой части экрана).
• Установите для параметра Тип запроса значение Запрос коллекции.
• Прокрутите вниз, чтобы найти выпадающий список Collection и измените его на вашу коллекцию.
• Установите Тип запроса на Список документов.
• Нажмите кнопку Подтвердить.

Чтобы показать изображение и видео из URL, сохраненного в документе Firestore:

• Выберите виджет MediaDisplay в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до свойства Media Path.
• Нажмите на текст Set from Variable. (Откроется новое всплывающее окно).
  • Выберите источник как [имя_коллекции] Документ. Это отображается только после запроса коллекции.
  • Выберите поле, содержащее URL—путь, из списка Доступные параметры.

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

Чтобы настроить изображение, следуйте инструкциям здесь.

Чтобы настроить изображение, следуйте инструкциям здесь.

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