SwiftUI问题：TabView为何出现重复项及额外“更多”标签？

问题现象 #

在SwiftUI中尝试给TabView添加导航栏时，出现以下异常：

• 底部TabBar显示重复的“house”图标及“Home”文本
• 莫名出现带三个点的“More”标签，点击后显示“person.fill”图标和“Profile”文本的列表

异常效果截图：

对应代码如下：

import SwiftUI

struct ContentView: View {
    @State var isLoggedIn: Bool = false
    var body: some View {
        NavigationView{
            if isLoggedIn {
                LogInPage()
            } else {
                TabView{
                    HomeScreen()
                        .tabItem {
                            Image(systemName: "house")
                            Text("Hem")
                        }
                    BookingsScreen()
                        .tabItem {
                            Image(systemName: "book")
                            Text("Bokningar")
                        }
                    ProfileScreen()
                        .tabItem {
                            Image(systemName: "person")
                            Text("Profil")
                        }
                }
            }
           
        }
    }
}

问题原因 #

1. NavigationView与TabView嵌套顺序错误：TabView设计为根容器组件，将其嵌套在NavigationView内部会触发UI布局冲突，导致TabBar渲染异常。
2. 子页面（如HomeScreen、ProfileScreen）可能重复添加了NavigationView，进一步引发导航栏和TabBar的重复渲染，出现图标重复、Tab项被挤入“More”的问题。

解决方案 #

调整嵌套顺序，将TabView作为根视图，登录状态判断包裹整个结构，同时在需要导航栏的子页面内部单独添加NavigationView：

import SwiftUI

struct ContentView: View {
    @State var isLoggedIn: Bool = false
    
    var body: some View {
        if isLoggedIn {
            LogInPage()
        } else {
            TabView{
                // 首页：内部添加NavigationView
                NavigationView {
                    HomeScreen()
                }
                .tabItem {
                    Image(systemName: "house")
                    Text("Hem")
                }
                
                // 预订页：内部添加NavigationView
                NavigationView {
                    BookingsScreen()
                }
                .tabItem {
                    Image(systemName: "book")
                    Text("Bokningar")
                }
                
                // 个人页：内部添加NavigationView
                NavigationView {
                    ProfileScreen()
                }
                .tabItem {
                    Image(systemName: "person")
                    Text("Profil")
                }
            }
        }
    }
}

额外注意事项 #

• 确保所有子页面内部不再重复添加NavigationView，避免多层嵌套导致的UI异常。
• 若某个Tab页面不需要导航栏，可移除其内部的NavigationView，或通过.navigationBarHidden(true)手动隐藏。

内容的提问来源于stack exchange，提问作者AranAli