Nawigacja MacOS SwiftUI dla pojedynczego widoku

Próbuję utworzyć widok ustawień dla mojej aplikacji paska stanu MacOS SwiftUI. Moja implementacja do tej pory korzystała z NavigationViewi NavigationLink, ale to rozwiązanie daje widok połowy, ponieważ widok ustawień wypycha widok nadrzędny na bok. Zrzut ekranu i przykład kodu poniżej.

Zrzut ekranu - pasek boczny nawigacji

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

Niewiele informacji, które mogę znaleźć, sugeruje, że jest to nieuniknione przy użyciu SwiftUI w systemie macOS, ponieważ `` pełny ekran '' NavigationVieww systemie iOS ( StackNavigationViewStyle) nie jest dostępny w systemie macOS.

Czy istnieje prosty lub nawet złożony sposób implementacji przejścia do widoku ustawień, który zajmuje całą ramkę w SwiftUI dla macOS? A jeśli nie, to czy można użyć AppKitdo wywołania obiektu View napisanego w SwiftUI?

Również nowicjusz z Szybkim - proszę, bądź delikatny.

Oto proste demo możliwego podejścia do niestandardowego rozwiązania nawigacyjnego. Przetestowano z Xcode 11.4 / macOS 10.15.4

Uwaga: kolory tła zapewniają lepszą widoczność.

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

I Rozszerzyliśmy na Asperi „s wielkim sugestii i stworzył ogólny, wielokrotnego użytku StackNavigationViewdla MacOS (lub nawet iOS, jeśli chcesz). Niektóre najważniejsze informacje:

• Obsługuje dowolną liczbę podglądów podrzędnych (w dowolnym układzie).
• Automatycznie dodaje przycisk „Wstecz” dla każdego widoku podrzędnego (na razie tylko tekst, ale możesz zamienić ikonę, jeśli używasz macOS 11+).

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

Więcej informacji na temat @ViewBuilderi używanych generyków można znaleźć tutaj .

Oto podstawowy przykład użycia. Widok nadrzędny śledzi bieżący wybór i stan wyświetlania (przy użyciu @State), umożliwiając wszystkim w jego podwidokach wyzwolenie zmian stanu.

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

Uwaga: takie typy ogólne wymagają, aby wszystkie podglądy były tego samego typu. Jeśli tak nie jest, możesz je zawinąć AnyView, tak jak tutaj. AnyViewWrapper nie jest wymagane, jeśli używasz spójny typ dla wszystkich subviews (typ widoku root nie musi meczu).