Tek Görünüm için macOS SwiftUI Navigasyonu

MacOS SwiftUI durum çubuğu uygulamam için bir ayarlar görünümü oluşturmaya çalışıyorum. Şimdiye kadar benim uygulamam NavigationView, ve kullanıyordu NavigationLink, ancak bu çözüm, ayarlar görünümü üst görünümü yana ittiğinden yarım bir görünüm oluşturuyor. Aşağıdaki ekran görüntüsü ve kod örneği.

Ekran Görüntüsü - Gezinme Kenar Çubuğu

struct ContentView: View {
    var body: some View {
        VStack{
            NavigationView{
            NavigationLink(destination: SecondView()){
                Text("Go to next view")
                }}
        }.frame(width: 800, height: 600, alignment: .center)}
}

struct SecondView: View {
    var body: some View {
        VStack{

                Text("This is the second view")

        }.frame(width: 800, height: 600, alignment: .center)
    }
}

Bulabildiğim küçük bilgiler, macOS'ta SwiftUI kullanıldığında bunun kaçınılmaz olduğunu gösteriyor, çünkü NavigationViewiOS'ta 'tam ekran' ( StackNavigationViewStyle) macOS'ta mevcut değil.

MacOS için SwiftUI'de tüm çerçeveyi kaplayan bir ayarlar görünümüne geçiş uygulamanın basit veya hatta karmaşık bir yolu var mı? Ve değilse, AppKitSwiftUI ile yazılmış bir View nesnesini çağırmak mümkün müdür?

Ayrıca bir Swift acemi - lütfen nazik olun.

Özel gezinme benzeri çözüm için olası yaklaşımın basit bir demosu. Xcode 11.4 / macOS 10.15.4 ile test edildi

Not: Daha iyi görünürlük için arka plan renkleri kullanılır.

struct ContentView: View {
    @State private var show = false
    var body: some View {
        VStack{
            if !show {
                RootView(show: $show) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.blue) .transition(AnyTransition.move(edge: .leading)).animation(.default) } if show { NextView(show: $show)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.green)
                    .transition(AnyTransition.move(edge: .trailing)).animation(.default)
            }
        }
    }
}

struct RootView: View {
    @Binding var show: Bool
    var body: some View {
        VStack{
            Button("Next") { self.show = true }
            Text("This is the first view")
        }
    }
}

struct NextView: View {
    @Binding var show: Bool
    var body: some View {
        VStack{
            Button("Back") { self.show = false }
            Text("This is the second view")
        }
    }
}

Asperi'nin harika önerisini genişlettim ve StackNavigationViewmacOS (hatta isterseniz iOS için) için jenerik, yeniden kullanılabilir bir jenerik oluşturdum . Bazı önemli noktalar:

• Herhangi bir sayıda alt görünümü destekler (herhangi bir düzende).
• Her alt görünüm için otomatik olarak bir 'Geri' düğmesi ekler (şimdilik yalnızca metin, ancak macOS 11+ kullanıyorsanız bir simgeyi değiştirebilirsiniz).

Swift v5.2:

struct StackNavigationView<RootContent, SubviewContent>: View where RootContent: View, SubviewContent: View {
    
    @Binding var currentSubviewIndex: Int
    @Binding var showingSubview: Bool
    let subviewByIndex: (Int) -> SubviewContent
    let rootView: () -> RootContent
    
    var body: some View {
        VStack {
            VStack{
                if !showingSubview { // Root view
                    rootView()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .transition(AnyTransition.move(edge: .leading)).animation(.default)
                }
                if showingSubview { // Correct subview for current index
                    StackNavigationSubview(isVisible: self.$showingSubview) {
                        self.subviewByIndex(self.currentSubviewIndex)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .transition(AnyTransition.move(edge: .trailing)).animation(.default)
                }
            }
        }
    }
    
    init(currentSubviewIndex: Binding<Int>, showingSubview: Binding<Bool>, @ViewBuilder subviewByIndex: @escaping (Int) -> SubviewContent, @ViewBuilder rootView: @escaping () -> RootContent) {
        self._currentSubviewIndex = currentSubviewIndex
        self._showingSubview = showingSubview
        self.subviewByIndex = subviewByIndex
        self.rootView = rootView
    }
    
    private struct StackNavigationSubview<Content>: View where Content: View {
        
        @Binding var isVisible: Bool
        let contentView: () -> Content
        
        var body: some View {
            VStack {
                HStack { // Back button
                    Button(action: {
                        self.isVisible = false
                    }) {
                        Text("< Back")
                    }.buttonStyle(BorderlessButtonStyle())
                    Spacer()
                }
                .padding(.horizontal).padding(.vertical, 4)
                contentView() // Main view content
            }
        }
    }
}

Daha fazla bilgi @ViewBuilderve kullanılan jenerikler burada bulunabilir .

İşte kullanımda olan temel bir örnek. Üst görünüm, mevcut seçimi ve görüntüleme durumunu (kullanarak @State) izleyerek alt görünümlerindeki her şeyin durum değişikliklerini tetiklemesine izin verir.

struct ExampleView: View {
    
    @State private var currentSubviewIndex = 0
    @State private var showingSubview = false
    
    var body: some View {
        StackNavigationView(
            currentSubviewIndex: self.$currentSubviewIndex,
            showingSubview: self.$showingSubview,
            subviewByIndex: { index in
                self.subView(forIndex: index)
            }
        ) {
            VStack {
                Button(action: { self.showSubview(withIndex: 0) }) {
                    Text("Show View 1")
                }
                Button(action: { self.showSubview(withIndex: 1) }) {
                    Text("Show View 2")
                }
                Button(action: { self.showSubview(withIndex: 2) }) {
                    Text("Show View 3")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
        }
    }
    
    private func subView(forIndex index: Int) -> AnyView {
        switch index {
        case 0: return AnyView(Text("I'm View One").frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.green))
        case 1: return AnyView(Text("I'm View Two").frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.yellow))
        case 2: return AnyView(VStack {
            Text("And I'm...")
            Text("View Three")
        }.frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.orange))
        default: return AnyView(Text("Inavlid Selection").frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.red))
        }
    }
    
    private func showSubview(withIndex index: Int) {
        currentSubviewIndex = index
        showingSubview = true
    }
}

Not: Bunun gibi jenerikler, tüm alt görünümlerin aynı türde olmasını gerektirir. Öyle değilse AnyView, benim burada yaptığım gibi, onları paketleyebilirsiniz . AnyViewTüm subviews için tutarlı türü kullanıyorsanız sarıcı (kök görünümün tip maçında gerekmez) gerekli değildir.