Нативная SwiftUI-навигация с NavigationPath

Изначально возможности стэк-навигации в SwiftUI были очень скромными. Перейти на другой экран в рамках NavigationStack можно было лишь через создание NavigationLink во вьюхе, что жестко связывало с ней роутинг.

С выходом iOS 16 разработчикам предоставили более гибкий способ, с использованием нового объекта NavigationPath. Он представляет собой список любых Hashable-значений, и определяет актуальный стэк навигации. Чтобы показать следующий экран, требуется добавить в него значение, чтобы вернуться назад — удалить.

При добавлении нового значения, у корневой вьюхи NavigationStack вызывается модификатор navigationDestination, который должен обработать его, и вернуть необходимое для отображения представление.

struct ContentView: View {
    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    private let colors: [Color] = [
        .red,.gray,
        .green, .yellow,
        .blue, .purple,
        .indigo, .orange
    ]

    @State private var navigationPath = NavigationPath()

    var body: some View {
        NavigationStack(path: $navigationPath) {
            ScrollView {
                LazyVGrid(columns: columns) {
                    ForEach(colors, id: \.self) { color in
                        color
                            .aspectRatio(1, contentMode: .fill)
                            .cornerRadius(8)
                            .onTapGesture {
                                navigationPath.append(color)
                            }
                    }
                }
                .padding()
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle("Colors")
            .navigationDestination(for: Color.self) { color in
                color
                    .edgesIgnoringSafeArea(.bottom)
                    .navigationBarTitleDisplayMode(.inline)
                    .navigationTitle("Color")
            }
        }
    }
}

При нажатии на цвет открывается новый экран с ним.

Однако и в таком виде роутинг сильно связан с вьюхами. Поэтому займемся унификацией и выносом логики вовне.

Для начала определим общий протокол роутеров.

protocol Router: AnyObject {
    associatedtype Route: Hashable
    associatedtype View: SwiftUI.View

    var path: NavigationPath { get set }

    func makeView(for route: Route) -> Self.View
    func route(to route: Route)
}

extension Router {
    func route(to route: Route) {
        path.append(route)
    }
}

И создадим модификатор routing, через который будем задавать вьюхам соответствующий роутер.

struct RoutingViewModifier<ConcreteRouter: Router>: ViewModifier {
    private let router: ConcreteRouter

    init(with router: ConcreteRouter) {
        self.router = router
    }

    func body(content: Content) -> some View {
        content
            .navigationDestination(for: ConcreteRouter.Route.self) { route in
                router.makeView(for: route)
            }
    }
}

extension View {
    func routing(with router: some Router) -> some View {
        modifier(RoutingViewModifier(with: router))
    }
}

Наконец, сам роутер.

class ColorsRouter: Router, ObservableObject {
    enum Route: Hashable {
        case color(Color)
    }

    @Published var path = NavigationPath()

    func makeView(for route: Route) -> some View {
        switch route {
        case let .color(color):
            return color
                .edgesIgnoringSafeArea(.bottom)
                .navigationBarTitleDisplayMode(.inline)
                .navigationTitle("Color")
        }
    }
}

Связываем все вместе. Теперь роутинг вынесен в свое место, и его расширение не потребует кардинальных изменений во вьхах.

struct ContentView: View {
    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    private let colors: [Color] = [
        .red,.gray,
        .green, .yellow,
        .blue, .purple,
        .indigo, .orange
    ]

    @StateObject private var colorsRouter = ColorsRouter()

    var body: some View {
        NavigationStack(path: $colorsRouter.path) {
            ScrollView {
                LazyVGrid(columns: columns) {
                    ForEach(colors, id: \.self) { color in
                        color
                            .aspectRatio(1, contentMode: .fill)
                            .cornerRadius(8)
                            .onTapGesture {
                                colorsRouter.route(to: .color(color))
                            }
                    }
                }
                .padding()
            }
            .routing(with: colorsRouter)
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle("Colors")
        }
    }
}