SwiftUI NavigationView 从内部开始 [英] SwiftUI NavigationView Starting Inside Itself

问题描述

所以我在页面视图样式中的 TabView 中嵌入了一个 NavigationView.第一次加载 NavigationView 将在其内部启动，然后一旦重新加载它就会正常显示.我不确定是什么导致了这种情况.我制作了一个 GIF 来更好地说明问题:

So I've got a NavigationView embedded inside of a TabView that is in the Page View Style. Upon first load the NavigationView will start inside itself, and then once reloaded it shows normally. I am unsure as to what is causing this. And I've made a GIF to better illustrate the problem:

这是我的代码:

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

推荐答案

信不信由你，这与 TabView() 无关.这实际上是 SettingsView() 中的一个问题.SwiftUI 默认为拆分视图.因此，您将获得一个空视图，因为您实际上并未导航到任何特定视图，并且显示了 Settings 后退按钮.使此行为如您所愿的修复方法是在 SettingsView 中的 NavigationView 上添加一个 .navigationViewStyle(StackNavigationViewStyle() 强制 >SettingsView 像这样显示为单个视图:

Believe it or not, this has nothing to do with the TabView(). This is actually an issue in the SettingsView(). SwiftUI is defaulting to a split view. As a result, you are getting an empty view because you haven't actually navigated to any particular view, with the Settings back button showing. The fix to make this behave as you would expect is to add a .navigationViewStyle(StackNavigationViewStyle() on the NavigationView in SettingsView which forces SettingsView to display as a single view like this:

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() 显示不同的颜色，因此很明显您正在导航到单独的视图.

Also, I edited your code a bit for clarity. EmptyView() is already designated by the system, so I changed it to BlankView() I am not sure why the compiler doesn't have a problem with you naming a struct EmptyView(), but you really shouldn't use that name. I also had the BlankView() show different colors so it was clear you were navigating to separate views.

这篇关于SwiftUI NavigationView 从内部开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！