SwiftUI - görünüme sabit kodlanmış navigasyon nasıl önlenir?

Daha büyük, üretime hazır SwiftUI Uygulaması için mimariyi yapmaya çalışıyorum. Her zaman SwiftUI'deki büyük bir tasarım kusuruna işaret eden aynı soruna koşuyorum.

Hala kimse bana tam çalışmaya ve üretime hazır bir cevap veremedi.

SwiftUIGezinme içeren yeniden kullanılabilir Görünümler nasıl yapılır ?

Gibi SwiftUI NavigationLinkkuvvetli görünümüne bağlı bu daha büyük Uygulamalarda da ölçekler olduğunu basitçe şekilde mümkün değildir. NavigationLinkBu küçük örnek Uygulamalar çalışır, evet - ama bir App birçok Görünümler yeniden kullanmak istediğiniz anda değil. Ve belki de modül sınırları üzerinden tekrar kullanılabilir. (gibi: iOS, WatchOS vb. görünümü yeniden kullanma ...)

Tasarım sorunu: NavigationLinks Görünüm'e sabit kodlanmıştır.

NavigationLink(destination: MyCustomView(item: item))

Ancak bunu içeren görünüm NavigationLinkyeniden kullanılabilir olması gerekiyorsa ben hedef kodlayamaz . Hedefi sağlayan bir mekanizma olmalıdır. Bunu burada sordum ve oldukça iyi bir cevap aldım, ama yine de tam cevap değil:

SwiftUI MVVM Koordinatörü / Yönlendirici / NavigationLink

Fikir, Hedef Bağlantıları yeniden kullanılabilir görünüme enjekte etmekti. Genellikle fikir işe yarıyor ama maalesef bu gerçek Üretim Uygulamalarına göre ölçeklenmiyor. Birden çok yeniden kullanılabilir ekranım olur olmaz, yeniden kullanılabilir bir görünümün ( ViewA) önceden yapılandırılmış bir görüntüleme hedefine ( ViewB) ihtiyaç duyduğu mantıksal sorunla karşılaşıyorum . Ancak ViewBönceden yapılandırılmış bir görüntüleme hedefine de ihtiyaç duyulursa ne olur ViewC? Ben oluşturmak gerekir ViewBşekilde zaten ViewCzaten enjekte edilir ViewBBen enjekte önce ViewBiçine ViewA. Ve böylece .... ama o zaman iletilmesi gereken veriler mevcut olmadığından, tüm yapı başarısız olur.

Sahip olduğum başka bir fikir, Environmenthedefleri enjekte etmek için bağımlılık enjeksiyon mekanizması olarak kullanmaktı NavigationLink. Ancak bunun büyük uygulamalar için ölçeklenebilir bir çözüm değil, az çok bir kesmek olarak düşünülmesi gerektiğini düşünüyorum. Sonuçta Ortamı temelde her şey için kullanacağız. Ancak Çevre aynı zamanda yalnızca View'ların içinde (ayrı Koordinatörlerde veya ViewModellerde değil) kullanılabileceğinden, bu bana göre garip yapılar yaratacaktır.

İş mantığı (örn görmek model kodu) ve görünümü gibi ayrıca navigasyon ayrılması gereken ve de (örneğin Koordinatör deseni) ayrılacak zorunda görüntülemek UIKitbiz erişim çünkü bu mümkündür UIViewControllerve UINavigationControllergörünümü arkasında. UIKit'sMVC zaten "Model-View-Controller" yerine "Massive-View-Controller" eğlence adı haline gelen birçok kavramı ezdi. Şimdi benzer bir sorun devam ediyor SwiftUIama bence daha da kötü. Gezinme ve Görünümler güçlü bir şekilde birleştirilmiştir ve ayrıştırılamaz. Bu nedenle, gezinme içeriyorsa yeniden kullanılabilir görünümler yapmak mümkün değildir. Bunu çözmek mümkün oldu UIKitama şimdi aklı başında bir çözüm göremiyorumSwiftUI. Ne yazık ki Apple bize böyle mimari sorunların nasıl çözüleceğine dair bir açıklama yapmadı. Sadece küçük örnek uygulamalar aldık.

Yanlış kanıtlanmayı çok isterim. Lütfen büyük üretime hazır Uygulamalar için bunu çözen temiz bir Uygulama tasarım deseni gösterin.

Şimdiden teşekkürler.

Güncelleme: Bu ödül birkaç dakika içinde sona erecek ve maalesef hiç kimse çalışan bir örnek sağlayamadı. Ama başka bir çözüm bulamaz ve buraya bağlarsam bu sorunu çözmek için yeni bir ödül başlatacağım. Katkılarından dolayı herkese teşekkürler!

Kapatma tüm ihtiyacınız!

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)
                }
            }
        }
    }
}

SwiftUI'deki delege modelini kapaklarla değiştirme hakkında bir yazı yazdım. https://swiftwithmajid.com/2019/11/06/the-power-of-closures-in-swiftui/

Benim fikrim hemen hemen bir örüntü Coordinatorve Delegatekalıp kombinasyonu olurdu . İlk önce bir Coordinatorsınıf oluşturun :

struct Coordinator {
    let window: UIWindow

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

Şunu SceneDelegatekullanmak için uyarlayın 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()
        }
    }

İçinde ContentView, bu var:

struct ContentView: View {
    var delegate: ContentViewDelegate?

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

ContenViewDelegateProtokolü şöyle tanımlayabiliriz :

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

ItemSadece tanımlanabilir bir yapı nerede başka bir şey olabilir (örneğin TableViewUIKit'teki gibi bir öğenin kimliği )

Bir sonraki adım, bu protokolü benimsemek Coordinatorve sunmak istediğiniz görünümü iletmektir:

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

Bu şimdiye kadar uygulamalarımda güzel çalıştı. Umut ediyorum bu yardım eder.

Benim başıma gelen bir şey şu ki:

Ancak, ViewB'nin önceden yapılandırılmış bir görüntüleme hedefi ViewC'ye de ihtiyacı varsa ne olur? ViewB içine ViewB enjekte önce ViewC zaten ViewB enjekte öyle bir şekilde ViewB oluşturmak gerekir. Ve böylece .... ama o zaman iletilmesi gereken veriler mevcut olmadığından, tüm yapı başarısız olur.

tam olarak doğru değil. Görünüm sağlamak yerine, yeniden kullanılabilir bileşenlerinizi, isteğe bağlı görünüm sağlayan kapaklar sağlayabilmeniz için tasarlayabilirsiniz.

Bu şekilde, isteğe bağlı olarak ViewB üreten kapatma, isteğe bağlı olarak ViewC üreten bir kapatma sağlayabilir, ancak görünümlerin gerçek yapısı, ihtiyacınız olan bağlamsal bilgilerin mevcut olduğu bir zamanda olabilir.

İşte sonsuz bir şekilde detaya inmenin ve bir sonraki ayrıntı görünümü için verilerinizi programlı olarak değiştirmenin eğlenceli bir örneği

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())
    }
}

SwiftUI'de bir MVP + Koordinatörleri yaklaşımı oluşturmaya yönelik bir blog yayınları dizisi yazıyorum.

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

Projenin tamamını Github'da bulabilirsiniz: https://github.com/Lascorbe/SwiftUI-MVP-Coordinator

Bunu ölçeklenebilirlik açısından büyük bir uygulama gibi yapmaya çalışıyorum. Sanırım navigasyon problemini çözdüm, ancak hala derin bağlantıların nasıl yapıldığını görmem gerekiyor, şu anda üzerinde çalıştığım şey bu. Umut ediyorum bu yardım eder.

Bu tamamen başımın üstünde bir cevap, bu yüzden muhtemelen saçmalık olacak, ancak hibrit bir yaklaşım kullanmaya cazip geleceğim.

Tek bir koordinatör nesnesinden geçmek için ortamı kullanın - buna NavigationCoordinator diyelim.

Yeniden kullanılabilir görünümlerinize dinamik olarak ayarlanmış bir tür tanımlayıcı verin. Bu tanımlayıcı, istemci uygulamasının gerçek kullanım durumuna ve gezinme hiyerarşisine karşılık gelen anlamsal bilgiler verir.

Yeniden kullanılabilir görünümlerin, tanımlayıcılarını ve gittikleri görünüm türünün tanımlayıcısını ileterek hedef görünüm için NavigationCoordinator'ı sorgulamasını sağlayın.

Bu, NavigationCoordinator'ı tek bir enjeksiyon noktası olarak bırakır ve görünüm hiyerarşisinin dışında erişilebilen, görüntülenmeyen bir nesnedir.

Kurulum sırasında, çalışma zamanında geçirilen tanımlayıcılarla bir tür eşleme kullanarak geri dönmesi için doğru görünüm sınıflarını kaydedebilirsiniz. Bazı durumlarda hedef tanımlayıcıyla eşleştirmek kadar basit bir şey işe yarayabilir. Veya bir çift ana bilgisayar ve hedef tanımlayıcıyla eşleştirme.

Daha karmaşık durumlarda, uygulamaya özel diğer bilgileri dikkate alan özel bir denetleyici yazabilirsiniz.

Ortam yoluyla enjekte edildiğinden, herhangi bir görünüm varsayılan NavigationCoordinator'ı herhangi bir noktada geçersiz kılabilir ve alt görünümlerine farklı bir görünüm sağlayabilir.