SwiftUI: ¿cómo evitar la navegación codificada en la vista?

Intento hacer la arquitectura para una aplicación SwiftUI más grande y lista para producción. Me encuentro todo el tiempo con el mismo problema que apunta a una falla de diseño importante en SwiftUI.

Todavía nadie podía darme una respuesta completa, lista para la producción.

¿Cómo hacer vistas reutilizables SwiftUIque contengan navegación?

Como SwiftUI NavigationLinkestá fuertemente vinculado a la vista, esto simplemente no es posible de tal manera que se amplíe también en aplicaciones más grandes. NavigationLinken esas pequeñas aplicaciones de muestra funciona, sí, pero no tan pronto como quiera reutilizar muchas vistas en una aplicación. Y tal vez también reutilizar sobre los límites del módulo. (como: reutilizar View en iOS, WatchOS, etc.)

El problema de diseño: los enlaces de navegación están codificados en la vista.

NavigationLink(destination: MyCustomView(item: item))

Pero si la vista que contiene esto NavigationLinkes reutilizable, no puedo codificar el destino. Tiene que haber un mecanismo que proporcione el destino. Pregunté esto aquí y obtuve una respuesta bastante buena, pero aún no es la respuesta completa:

Coordinador / Enrutador / NavigationLink de SwiftUI MVVM

La idea era inyectar los enlaces de destino en la vista reutilizable. En general, la idea funciona, pero desafortunadamente no se adapta a las aplicaciones de producción reales. Tan pronto como tengo varias pantallas reutilizables, me encuentro con el problema lógico de que una vista reutilizable ( ViewA) necesita un destino de vista preconfigurado ( ViewB). Pero, ¿y si ViewBtambién necesita un destino de vista preconfigurado ViewC? Yo tendría que crear ViewBya de tal manera que ViewCya se inyecta en ViewBantes de inyectar ViewBen ViewA. Y así sucesivamente ... pero como los datos que en ese momento deben pasarse no están disponibles, la construcción completa falla.

Otra idea que tuve fue utilizar el Environmentmecanismo de inyección como dependencia para inyectar destinos NavigationLink. Pero creo que esto debería considerarse más o menos como un truco y no como una solución escalable para aplicaciones grandes. Terminaríamos usando el entorno básicamente para todo. Pero debido a que el entorno también se puede usar solo dentro de las vistas (no en coordinadores o modelos de vista separados), esto crearía construcciones extrañas en mi opinión.

Al igual que la lógica de negocios (por ejemplo, ver el código del modelo) y la vista deben estar separadas, también la navegación y la vista deben estar separadas (por ejemplo, el patrón Coordinador). UIKitEs posible porque accedemos a la vista UIViewControllery UINavigationControllerdetrás de ella. UIKit'sMVC ya tenía el problema de que combinaba tantos conceptos que se convirtió en el nombre divertido "Massive-View-Controller" en lugar de "Model-View-Controller". Ahora continúa un problema similar SwiftUIpero peor en mi opinión. La navegación y las vistas están fuertemente acopladas y no se pueden desacoplar. Por lo tanto, no es posible hacer vistas reutilizables si contienen navegación. Fue posible resolver esto en UIKitpero ahora no puedo ver una solución sensata enSwiftUI. Desafortunadamente, Apple no nos dio una explicación sobre cómo resolver problemas de arquitectura como ese. Tenemos solo algunas pequeñas aplicaciones de muestra.

Me encantaría que me demuestren lo contrario. Muéstrame un patrón de diseño de aplicaciones limpio que resuelva esto para aplicaciones grandes listas para producción

Gracias por adelantado.

Actualización: esta recompensa terminará en unos minutos y desafortunadamente aún nadie pudo proporcionar un ejemplo de trabajo. Pero comenzaré una nueva recompensa para resolver este problema si no puedo encontrar otra solución y vincularla aquí. ¡Gracias a todos por su gran contribución!

¡El cierre es todo lo que necesitas!

struct ItemsView<Destination: View>: View {
    let items: [Item]
    let buildDestination: (Item) -> Destination

    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: self.buildDestination(item)) {
                    Text(item.id.uuidString)
                }
            }
        }
    }
}

Escribí una publicación sobre cómo reemplazar el patrón de delegado en SwiftUI con cierres. https://swiftwithmajid.com/2019/11/06/the-power-of-closures-in-swiftui/

Mi idea sería más o menos ser una combinación de Coordinatory Delegatepatrón. Primero, crea una Coordinatorclase:

struct Coordinator {
    let window: UIWindow

      func start() {
        var view = ContentView()
        window.rootViewController = UIHostingController(rootView: view)
        window.makeKeyAndVisible()
    }
}

Adapte el SceneDelegatepara usar el Coordinator:

  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            let coordinator = Coordinator(window: window)
            coordinator.start()
        }
    }

Dentro de ContentView, tenemos esto:

struct ContentView: View {
    var delegate: ContentViewDelegate?

    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: delegate!.didSelect(Item())) {
                    Text("Destination1")
                }
            }
        }
    }
}

Podemos definir el ContenViewDelegateprotocolo de esta manera:

protocol ContentViewDelegate {
    func didSelect(_ item: Item) -> AnyView
}

Donde Itemes solo una estructura que es identificable, podría ser cualquier otra cosa (por ejemplo, la identificación de algún elemento como en un TableViewen UIKit)

El siguiente paso es adoptar este protocolo Coordinatory simplemente pasar la vista que desea presentar:

extension Coordinator: ContentViewDelegate {
    func didSelect(_ item: Item) -> AnyView {
        AnyView(Text("Returned Destination1"))
    }
}

Hasta ahora, esto ha funcionado bien en mis aplicaciones. Espero que ayude.

Algo que se me ocurre es que cuando dices:

Pero, ¿qué sucede si ViewB también necesita un ViewC de destino de vista preconfigurado? Necesitaría crear ViewB ya de tal manera que ViewC ya se inyecte en ViewB antes de inyectar ViewB en ViewA. Y así sucesivamente ... pero como los datos que en ese momento deben pasarse no están disponibles, la construcción completa falla.

No es del todo cierto. En lugar de proporcionar vistas, puede diseñar sus componentes reutilizables para que proporcione cierres que ofrezcan vistas a pedido.

De esa manera, el cierre que produce ViewB a pedido puede proporcionarle un cierre que produce ViewC a pedido, pero la construcción real de las vistas puede ocurrir en un momento en que la información contextual que necesita está disponible.

Aquí hay un ejemplo divertido de profundizar infinitamente y cambiar sus datos para la siguiente vista detallada mediante programación

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var navigationManager: NavigationManager

    var body: some View {
        NavigationView {
            DynamicView(viewModel: ViewModel(message: "Get Information", type: .information))
        }
    }
}

struct DynamicView: View {
    @EnvironmentObject var navigationManager: NavigationManager

    let viewModel: ViewModel

    var body: some View {
        VStack {
            if viewModel.type == .information {
                InformationView(viewModel: viewModel)
            }
            if viewModel.type == .person {
                PersonView(viewModel: viewModel)
            }
            if viewModel.type == .productDisplay {
                ProductView(viewModel: viewModel)
            }
            if viewModel.type == .chart {
                ChartView(viewModel: viewModel)
            }
            // If you want the DynamicView to be able to be other views, add to the type enum and then add a new if statement!
            // Your Dynamic view can become "any view" based on the viewModel
            // If you want to be able to navigate to a new chart UI component, make the chart view
        }
    }
}

struct InformationView: View {
    @EnvironmentObject var navigationManager: NavigationManager
    let viewModel: ViewModel

    // Customize your  view based on more properties you add to the viewModel
    var body: some View {
        VStack {
            VStack {
                Text(viewModel.message)
                .foregroundColor(.white)
            }
            .frame(width: 300, height: 300)
            .background(Color.blue)


            NavigationLink(destination: navigationManager.destination(forModel: viewModel)) {
                Text("Navigate")
            }
        }
    }
}

struct PersonView: View {
    @EnvironmentObject var navigationManager: NavigationManager
    let viewModel: ViewModel

    // Customize your  view based on more properties you add to the viewModel
    var body: some View {
        VStack {
            VStack {
                Text(viewModel.message)
                .foregroundColor(.white)
            }
            .frame(width: 300, height: 300)
            .background(Color.red)
            NavigationLink(destination: navigationManager.destination(forModel: viewModel)) {
                Text("Navigate")
            }
        }
    }
}

struct ProductView: View {
    @EnvironmentObject var navigationManager: NavigationManager
    let viewModel: ViewModel

    // Customize your  view based on more properties you add to the viewModel
    var body: some View {
        VStack {
            VStack {
                Text(viewModel.message)
                    .foregroundColor(.white)
            }
            .frame(width: 300, height: 300)
            .background(Color.green)
            NavigationLink(destination: navigationManager.destination(forModel: viewModel)) {
                Text("Navigate")
            }
        }
    }
}

struct ChartView: View {
    @EnvironmentObject var navigationManager: NavigationManager
    let viewModel: ViewModel

    var body: some View {
        VStack {
            VStack {
                Text(viewModel.message)
                    .foregroundColor(.white)
            }
            .frame(width: 300, height: 300)
            .background(Color.green)
            NavigationLink(destination: navigationManager.destination(forModel: viewModel)) {
                Text("Navigate")
            }
        }
    }
}

struct ViewModel {
    let message: String
    let type: DetailScreenType
}

enum DetailScreenType: String {
    case information
    case productDisplay
    case person
    case chart
}

class NavigationManager: ObservableObject {
    func destination(forModel viewModel: ViewModel) -> DynamicView {
        DynamicView(viewModel: generateViewModel(context: viewModel))
    }

    // This is where you generate your next viewModel dynamically.
    // replace the switch statement logic inside with whatever logic you need.
    // DYNAMICALLY MAKE THE VIEWMODEL AND YOU DYNAMICALLY MAKE THE VIEW
    // You could even lead to a view with no navigation link in it, so that would be a dead end, if you wanted it.
    // In my case my "context" is the previous viewMode, by you could make it something else.
    func generateViewModel(context: ViewModel) -> ViewModel {
        switch context.type {
        case .information:
            return ViewModel(message: "Serial Number 123", type: .productDisplay)
        case .productDisplay:
            return ViewModel(message: "Susan", type: .person)
        case .person:
            return ViewModel(message: "Get Information", type: .chart)
        case .chart:
            return ViewModel(message: "Chart goes here. If you don't want the navigation link on this page, you can remove it! Or do whatever you want! It's all dynamic. The point is, the DynamicView can be as dynamic as your model makes it.", type: .information)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        .environmentObject(NavigationManager())
    }
}

Estoy escribiendo una serie de publicaciones de blog sobre la creación de un enfoque de Coordinadores MVP + en SwiftUI que puede ser útil:

https://lascorbe.com/posts/2020-04-27-MVPCoordinators-SwiftUI-part1/

El proyecto completo está disponible en Github: https://github.com/Lascorbe/SwiftUI-MVP-Coordinator

Estoy tratando de hacerlo como si fuera una gran aplicación en términos de escalabilidad. Creo que he resuelto el problema de navegación, pero todavía tengo que ver cómo hacer enlaces profundos, que es en lo que estoy trabajando actualmente. Espero que ayude.

Esta es una respuesta completamente descabellada, por lo que probablemente resulte absurdo, pero me vería tentado a utilizar un enfoque híbrido.

Use el entorno para pasar a través de un único objeto coordinador, llamémoslo NavigationCoordinator.

Proporcione a sus vistas reutilizables algún tipo de identificador que se configure dinámicamente. Este identificador proporciona información semántica correspondiente al caso de uso real de la aplicación del cliente y la jerarquía de navegación.

Haga que las vistas reutilizables consulten al Coordinador de Navegación para la vista de destino, pasando su identificador y el identificador del tipo de vista al que están navegando.

Esto deja a NavigationCoordinator como un único punto de inyección, y es un objeto sin vista al que se puede acceder fuera de la jerarquía de vista.

Durante la configuración, puede registrar las clases de vista correctas para que regrese, utilizando algún tipo de coincidencia con los identificadores que se pasan en tiempo de ejecución. Algo tan simple como coincidir con el identificador de destino podría funcionar en algunos casos. O coincidir con un par de identificadores de host y destino.

En casos más complejos, puede escribir un controlador personalizado que tenga en cuenta otra información específica de la aplicación.

Dado que se inyecta a través del entorno, cualquier vista puede anular el Coordinador de navegación predeterminado en cualquier punto y proporcionar uno diferente a sus subvistas.