为什么使用 SwiftUI 不显示导航视图？

Question

我有以下文件，我不知道为什么导航栏不显示。

在第一个文件中，我在 ContentView() 之前使用 NavigationView。 文件 1：

import SwiftUI

@main
struct TwitterCloneApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView{
                ContentView()
            }
            
        }
    }
}

在第二个文件中，我使用 MainTabView()，但没有导航栏空间。

文件 2

import SwiftUI


struct ContentView: View {
    
    @State private var showMenu = false
    
    var body: some View {
            ZStack(alignment: .topLeading){
                    MainTabView()

                
            }
           
        
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是 MainTabView。

文件 3：

import SwiftUI

struct MainTabView: View {
    
    @State private var selectedIndex: Int = 0
    
    var body: some View {
            TabView(selection: $selectedIndex){
                FeedView()
                    .onTapGesture {
                        self.selectedIndex = 0
                    }
                    .tabItem{
                        Image(systemName: "house")
                    }.tag(0)
                ExploreView()
                    .onTapGesture {
                        self.selectedIndex = 1
                    }
                    .tabItem{
                        Image(systemName: "magnifyingglass")
                    }.tag(1)
                NotificationsView()
                    .onTapGesture {
                        self.selectedIndex = 2
                    }
                    .tabItem{
                        Image(systemName: "bell")
                    }.tag(2)
                MessagesView()
                    .onTapGesture {
                        self.selectedIndex = 3
                    }
                    .tabItem{
                        Image(systemName: "envelope")
                    }.tag(3)
            
            
        }
    }
    
}

struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

导航栏没有空间。

Answer 1

您发布的代码有几处错误：

1. TabView中的每个子视图都应该有自己的NavigationView 。
2. 顶层不应该有NavigationView
3. NavigationView中的每个顶级视图都应该有一个.navigationTitle
4. 在选项卡之间切换不需要tapGesture

所以你应该结束

struct TwitterCloneApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()            
        }
    }
}

和

struct MainTabView: View {
    
    @State private var selectedIndex: Int = 0
    
    var body: some View {
        TabView(selection: $selectedIndex){
            NavigationView {
                FeedView()
                    .navigationTitle("Feed")
            }
            .tabItem{
                Image(systemName: "house")
            }.tag(0)
            
            NavigationView {
                ExploreView()
                    .navigationTitle("Explore")
            }
            .tabItem{
                Image(systemName: "magnifyingglass")
            }.tag(1)
            
            NavigationView {
                NotificationsView()
                    .navigationTitle("Notifications")
            }
            .tabItem{
                Image(systemName: "bell")
            }.tag(2)
            
            NavigationView {
                MessagesView()
                    .navigationTitle("Messages")
            }
            .tabItem{
                Image(systemName: "envelope")
            }.tag(3)
        }
    }
}