В этой статье вы прочитаете:
- Как открывается попап / модальное окно
- Как открыть другой экран на примере галереи
- Как вернуться назад
- Как открыть экран, связанный с объектом - на примере просмотра фото
Примеры изображений и кода из этой статьи доступны на GitHub
Для примеров я использую NavigationStack, доступный в iOS 16+.
Как открывается попап / модальное окно
В приложении есть экран проверики возраста, который будет появляться поверх всех окон приложения в ZStack поверх NavigationStack с основным приложением. Это позволит сделать единое поведение по всему приложению, а также добавить полупрозрачный фон для небольшого экрана.
Для отображения будет использоваться единый флаг AccessLevel. Этот флаг меняется в разных частях приложения через Binding. В случае его обновления сработает обновление состояния основного View приложения и будет отображен блокирующий экранчик проверки возраста.
Как открыть другой экран на примере галереи
Галерея - это экран, который не зависит от конкретного объекта, это просто экран в стеке. Поэтому для его отображения будет использоваться NavigationPath. Если грубо, то это последовательность элементов, которые определяют состояние NavigationStack. Один элемент - один экран.
Я добавлю enum который будет определять необходимый экран. Для примера в нем будет один элемент - gallery, но такой подход позволяет добавить любое количество необходимых экранов, а associated value в enum позволят добавить данные или настройки для экрана. Данные о необходимом для открытии экране придут в модификатор navigationDestination с указанным enum.
Теперь для отображения экрана галереи необходимо в path через метод append добавить значение gallery.
Как вернуться назад
Чтобы вернуться назад необходимо вызывать метод dismiss у глобального объекта presentationMode, доступного по аналогичному ключу. Я повесил обработчик на левую кнопку верхней панели на экранах галереи и просмотра фото.
Как открыть экран, связанный с объектом - на примере просмотра фото
Экран просмотра фото - это экран, связанный с объектом - фотографией. Этому экрану обязательно надо передать изображение, которое он будет отображать. Самое подходящее место для передачи информации о фотографии - это сетка галереи GalleryGrid, которая обрабатывала выбор фото. Но протаскивать туда ссылку на path будет очень неудобно.
Но этого можно не делать, если использовать NavigationLink. Этот объект существует в двух основных вариантах:
- В параметрах Оформление и целевой экран для перехода - это удобно, если создается что-то похожее на разводящий экран игры, где не требуется детально управлять навигацией
- В параметрах Оформление и объект для навигации - это то, что я буду использовать для перехода из галереи в экран фотографии
Я добавил в GalleryGrid, созданной в статье про галерею, режим выбора и когда он выключен, галерея работает как переход на просмотр фото. NavigationLink в оverlay с Сolor.clear в качестве оформления будет работать как невидимая кнопка для перехода. NavigationLink отправит объект image в ближайший по иерархии NavigationStack.
В основном коде добавляется обработчик этих объектов через модификатор navigationDestination, который будет обрабатывать объекты MediaItem
Я добавил .navigationBarHidden(true), потому что в приложении используются собственные панели и не требуется системная панель с кнопкой назад
Вот как это работает
Заключение
В этой статье я рассказал о том, как создать галерею фотографий, сделать возможность их выбора и добавить переключение размера.
Все работающие примеры есть в проекте на Github, их можно скачать и запустить.
Пишите в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.