Site icon AppTractor

Распутываем навигацию SwiftUI

AppTractor

Это руководство раскрывает тайны навигационной системы SwiftUI — от настройки TabView до глубинных ссылок и расширенных NavigationPaths.

Введение: почему навигация до сих пор всех сбивает с толку (включая меня)

Если бы SwiftUI был парком развлечений, навигация была бы домом с привидениями — сначала захватывающе, но быстро понимаешь, что не знаешь, как из него выбраться.

Apple подарила нам NavigationView, а затем деликатно похлопала по плечу, выпустив новенький блестящий NavigationStack. Добавьте NavigationPath, onOpenURL и всеми любимый загадочный ящик — диплинкинг — и теперь даже опытные iOS-разработчики выглядят как тот мем с парнем, вокруг которого парят математические уравнения.

Но не волнуйтесь. Создаёте ли вы простое приложение с несколькими экранами или проектируете динамический поток с URL-адресами и кастомными типами данных, SwiftUI действительно может сделать простую навигацию. Как только вы разберётесь с инструментами (и будете знать, когда с ними не стоит бороться), всё станет на свои места.

Вот что вы узнаете из этой статьи:

Давайте начнём с самого простого инструмента навигации SwiftUI: TabView

TabView: самый простой инструмент навигации SwiftUI

Если NavigationStack — это новая модная игрушка, то TabView — это старый добрый велосипед, к которому вы всегда возвращаетесь — простой, надёжный и на удивление увлекательный.

Что такое TabView? Это способ SwiftUI, позволяющий пользователям переключаться между различными разделами вашего приложения с помощью нижней панели вкладок — представьте себе домашнюю страницу, поиск, рилсы, профиль… ну, вы поняли.

Вот как легко начать:

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house.fill")
                }

            SettingsView()
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }
}

Два представления, две вкладки и работающее приложение. Никаких роутеров, никакой магии.

Советы профессионалов:

Распространённая путаница: TabView + NavigationStack

Да, вы можете объединить оба элемента — просто поместите NavigationStack внутрь каждой вкладки, если хотите, чтобы экраны в них располагались. Вот так:

TabView {
    NavigationStack {
        HomeView()
    }
    .tabItem { Label("Home", systemImage: "house") }

    NavigationStack {
        SettingsView()
    }
    .tabItem { Label("Settings", systemImage: "gear") }
}

И вот так у каждой вкладки есть свой собственный контекст навигации.

NavigationStack: попрощайтесь с NavigationView

Помните NavigationView? Что ж, Apple тихонько отказалась от него, начиная с iOS 16, и приветствовала NavigationStack как новый инструмент для навигации между экранами. И нет, это не просто переименование — это совершенно новый подход.

Что такое NavigationStack?

Представьте его как современную, более мощную версию NavigationView, созданную для лучшей работы с развивающейся природой SwiftUI, основанной на данных. Он позволяет вам добавлять и выводить представления, используя типы значений, с большим контролем над историей навигации.

Вот простой пример:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Go to Detail", value: "SwiftUI ❤️ NavigationStack")
            }
            .navigationDestination(for: String.self) { value in
                Text("You selected: \(value)")
            }
            .navigationTitle("Home")
        }
    }
}

Ключевые концепции:

Когда использовать:

Небольшой сдвиг, большое влияние

Важно отметить: с NavigationStack вы больше не привязываете навигацию к иерархиям представлений. Вместо этого это больше похоже на создание стека значений данных — и SwiftUI сам определяет, как их отобразить.

Как NavigationLink и .navigationDestination работают вместе

В NavigationStack навигация управляется значениями, а не жёстко заданными представлениями назначения. Это сильно отличается от того, как раньше работал NavigationView. Давайте разберёмся:

Шаг 1: Используйте NavigationLink(value:) для передачи значения

Вместо того, чтобы писать что-то вроде NavigationLink(destination: DetailView()), теперь вы передаете значение определённого типа:

NavigationLink("Go to Profile", value: "karanpal")

Эта строка говорит:

При нажатии поместить представление в стек навигации и использовать строковое значение «karanpal», чтобы определить, какое представление отображать.

Шаг 2: Определите, что делать с этим значением, с помощью .navigationDestination(for:)

Здесь вы объявляете, как следует обрабатывать конкретный тип при его помещении в стек:

.navigationDestination(for: String.self) { username in
    ProfileView(username: username)
}

Это означает:

Если передана строка, использовать её для построения данного представления.

Простыми словами

NavigationPath: для случаев, когда вам нужен полный контроль

К настоящему моменту NavigationLink(value:) и .navigationDestination(for:) кажутся отличным дуэтом. Но что, если навигация вашего приложения станет сложнее?

Возможно, вы:

Вот тут-то и вступает в дело NavigationPath.

Что такое NavigationPath?

NavigationPath — это специальный объект SwiftUI, который действует как type-erased стек значений. Он позволяет программно добавлять, извлекать и манипулировать стеком — без участия пользователя.

Представьте это так: «Я буду отслеживать всё, куда был выполнен переход, и мне всё равно, какой это тип — просто скажите мне, как это отобразить».

Простой пример использования

Допустим, мы хотим пушить разные типы данных — данные о пользователе или статью.

struct User: Hashable { let name: String }
struct Article: Hashable { let title: String }

Вот как настроить динамический путь навигации:

@State private var path = NavigationPath()

NavigationStack(path: $path) {
    List {
        Button("Open User") {
            path.append(User(name: "Karan"))
        }
        Button("Open Article") {
            path.append(Article(title: "SwiftUI Tips"))
        }
    }
    .navigationDestination(for: User.self) { user in
        Text("User: \(user.name)")
    }
    .navigationDestination(for: Article.self) { article in
        Text("Article: \(article.title)")
    }
}

Зачем это нужно?

С NavigationPath вы можете:

Реальные сценарии

NavigationPath — это как предоставить SwiftUI динамический GPS, а не просто следовать статическому маршруту. Вы управляете стеком. Вы пушите значения. А SwiftUI выполняет рендеринг.

Что дальше? Давайте изучим диплинкинг и наконец-то заставим URL-адреса myapp:// работать так, как им положено.

Глубокие ссылки в SwiftUI: не так страшно, как кажется

Вы когда-нибудь нажимали на уведомление или ссылку на веб-сайте и попадали в глубины приложения, минуя заставку, словно VIP-гость? Это и есть диплинкинг. И да — SwiftUI поддерживает его нативно, без магии UIKit.

Что такое глубокие ссылки

Глубокие ссылки — это то, как ваше приложение открывает определённый экран при нажатии на URL-адрес, например:

myapp://profile/karanpal
myapp://article/swiftui-navigation

Они очень полезны для:

Обработка глубоких ссылок в SwiftUI: AppDelegate не нужен

В UIKit всё это обрабатывалось через AppDelegate. В SwiftUI это обрабатывается с помощью .onOpenURL {} — и вот ключевая часть:

.onOpenURL следует разместить на верхнем уровне вашего приложения, в идеале внутри структуры App, чтобы гарантировать перехват ссылок независимо от того, где находится пользователь.

Пример: обработка ссылки на профиль

Допустим, вы хотите сделать ссылку на профиль:

myapp://profile/karanpal

Вот как это сделать в структуре App вашего SwiftUI-приложения:

@main
struct MyApp: App {
    @State private var path = NavigationPath()

    var body: some Scene {
        WindowGroup {
            NavigationStack(path: $path) {
                HomeView()
                    .onOpenURL { url in
                        handleDeepLink(url)
                    }
                    .navigationDestination(for: User.self) { user in
                        ProfileView(username: user.name)
                    }
            }
        }
    }

    private func handleDeepLink(_ url: URL) {
        guard let host = url.host else { return }

        switch host {
        case "profile":
            if let username = url.pathComponents.dropFirst().first {
                path.append(User(name: username))
            }
        default:
            break
        }
    }
}

Такая настройка гарантирует:

Регистрация вашей URL-схемы

Чтобы сообщить iOS, что ваше приложение обрабатывает такие типы ссылок:

  1. Перейдите в настройки .xcodeproj вашего приложения
  2. Target → Info → URL Types
  3. Добавьте новую запись с вашей пользовательской схемой (myapp)

Вуаля — теперь ваше приложение поддерживает глубокие ссылки.

Советы и подсказки: что сэкономит вам часы отладки

Навигационная система SwiftUI элегантна, современна и декларативна… пока внезапно не перестаёт быть таковой. Вот несколько реальных подвохов (и как их обходить, как настоящий ниндзя Swift).

1. NavigationLink не срабатывает? Проверьте тип значения

Если нажатие на NavigationLink(value:) ничего не происходит, обычно это из-за следующих причин:

Исправление: всегда проверяйте, совпадают ли тип значения и тип .navigationDestination(for:) — не допускается Optional, не допускаются несоответствия.

2. Вложение NavigationStack в другой? SwiftUI может запутаться

Пытаетесь вложить NavigationStack в другой (например, во вкладку)? Технически допустимо. Логически опасно.

Вы можете увидеть:

Исправление: избегайте вложенных стеков. Вместо этого создавайте новый NavigationStack на уровне TabView — каждая вкладка должна иметь свой собственный стек.

3. Изменение path вручную? Легко разрушить стек

Хотя path.append(...) — мощный метод, слепое добавление значений может:

Исправление: проверьте правильность перед добавлением. Кроме того, если вы восстанавливаете состояние из JSON или глубокой ссылки, перестройте путь в правильном порядке.

4. Состояние навигации не сбрасывается при выходе из системы

Если вы используете NavigationPath, и пользователь выходит из системы, он может всё ещё оставаться в стеке при повторном входе.

Исправление: при выходе из системы вызовите:

path.removeAll()

Это сбрасывает стек, возвращая пользователя в начало навигационного потока.

5. TabView + NavigationStack: остерегайтесь путаницы состояний

У каждой вкладки может быть свой NavigationStack, но если вы используете общее состояние для вкладок, SwiftUI может вызвать непредвиденное поведение (например, возврат к глубокому экрану после переключения вкладок).

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

Краткое содержание: вы только что распутали навигационную сеть SwiftUI

Если вы дошли до этого места — поздравляем!  Теперь вы понимаете навигацию SwiftUI больше, чем большинство разработчиков, которые в ярости бросают на полпути создания панели вкладок.

Вот краткий обзор того, что мы рассмотрели:

Модель навигации SwiftUI поначалу может показаться немного запутанной, но как только вы поймете правила игры, она окажется одновременно элегантной и мощной.

Источник

Exit mobile version