SwiftUI NavigationView 从内部开始

Question

所以我在页面视图样式中的 TabView 中嵌入了一个 NavigationView。首次加载时，NavigationView 将在其内部启动，然后重新加载后正常显示。我不确定是什么原因造成的。我制作了一个 GIF 来更好地说明这个问题：

这是我的代码：

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        TabView {
            SettingsView()
            EmptyView()
            EmptyView()
            EmptyView()
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

struct SettingsView: View {
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("General")) {
                    NavigationLink(destination: SettingsItem(title: "1")) {
                        Text("1")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "2")) {
                        Text("2")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "3")) {
                        Text("3")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "4")) {
                        Text("4")
                    }
                    
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Settings")
        }
    }
}

struct SettingsItem: View {
    
    @State var title = "Title"
    
    var body: some View {
        NavigationView {
            List {
                
            }
        }
        .navigationTitle(title)
    }
}

struct EmptyView: View {
    var body: some View {
        ZStack{
            Color.green
            Text("Empty View")
                .padding()
        }
        .border(Color.black, width: 8)
        
    }
}

Answer 1

信不信由你，这与TabView() 无关。这实际上是 SettingsView() 中的一个问题。 SwiftUI 默认为拆分视图。结果，您将获得一个空视图，因为您实际上并没有导航到任何特定视图，而是显示了 Settings 后退按钮。解决这个问题的方法是在SettingsView 中的NavigationView 上添加.navigationViewStyle(StackNavigationViewStyle()，这会强制SettingsView 显示为这样的单个视图：

struct ContentView: View {
    
    var body: some View {
        TabView {
            SettingsView()
            BlankView(color: .green)
            BlankView(color: .blue)
            BlankView(color: .red)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        
    }
}

struct SettingsView: View {
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("General")) {
                    NavigationLink(destination: SettingsItem(title: "1")) {
                        Text("1")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "2")) {
                        Text("2")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "3")) {
                        Text("3")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "4")) {
                        Text("4")
                    }
                    
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Settings")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct SettingsItem: View {
    
    @State var title = "Title"
    
    var body: some View {
        NavigationView {
            List {
                
            }
        }
        .navigationTitle(title)
    }
}

struct BlankView: View {
    let color: Color
    
    var body: some View {
        ZStack{
            color
            Text("Blank View")
                .padding()
        }
        .border(Color.black, width: 8)
        
    }
}

另外，为了清楚起见，我稍微编辑了您的代码。 EmptyView() 已经被系统指定了，所以我把它改成了BlankView() 我不知道为什么编译器对你命名一个 struct EmptyView() 没有问题，但你真的不应该使用那个名字。我还让BlankView() 显示不同的颜色，因此很明显您正在导航到不同的视图。