SwiftUI中NavigationView左侧TabView初始标签iPad不显示问题

我尝试在SwiftUI的NavigationView左侧面板创建一个简单的TabView。第一个标签不会在TabView菜单中显示，但应用启动时会展示该标签对应的初始视图。在iPhone上显示正常，但在iPad上第一个标签缺失。

struct ContentView: View {
    @Environment(.modelContext) private var modelContext
    
    @State var listView: ListView = ListView.recipients
    @State var addItem = false
    @State private var searchString = ""
    @State var selectedTab = 0
    @Query private var recipients: [Recipient]
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                FilteredList(searchString: searchString, listView: .recipients)
                    .tag(0)
                    .tabItem {
                        Label("Recipient", systemImage: "person.crop.circle")
                    }
                FilteredList(searchString: searchString, listView: .events)
                    .tag(1)
                    .tabItem {
                        Label("Event", systemImage: "calendar.circle")
                    }
                FilteredList(searchString: searchString, listView: .greetingCard)
                    .tag(2)
                    .tabItem {
                        Label("Gallery", systemImage: "photo.circle")
                    }
            }
            Text("Make a selection")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
        .navigationViewStyle(.automatic)
    }
}

附：iPhone显示正常截图、iPad缺失标签截图

解决方法 #

这个问题源于iPad上NavigationView的侧边栏布局逻辑，TabView的首个标签被布局挤压导致隐藏，以下两种方案可修复：

方案1：给TabView指定垂直样式与最小宽度 #

通过设置垂直标签样式和最小宽度，确保侧边栏内的TabView有足够空间渲染所有标签：

struct ContentView: View {
    @Environment(.modelContext) private var modelContext
    
    @State var listView: ListView = ListView.recipients
    @State var addItem = false
    @State private var searchString = ""
    @State var selectedTab = 0
    @Query private var recipients: [Recipient]
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                FilteredList(searchString: searchString, listView: .recipients)
                    .tag(0)
                    .tabItem {
                        Label("Recipient", systemImage: "person.crop.circle")
                    }
                FilteredList(searchString: searchString, listView: .events)
                    .tag(1)
                    .tabItem {
                        Label("Event", systemImage: "calendar.circle")
                    }
                FilteredList(searchString: searchString, listView: .greetingCard)
                    .tag(2)
                    .tabItem {
                        Label("Gallery", systemImage: "photo.circle")
                    }
            }
            .tabViewStyle(.vertical)
            .frame(minWidth: 220)
            Text("Make a selection")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
        .navigationViewStyle(.automatic)
    }
}

方案2：用NavigationStack包裹TabView #

在TabView外层添加NavigationStack，让侧边栏内的TabView遵循更一致的布局规则：

struct ContentView: View {
    @Environment(.modelContext) private var modelContext
    
    @State var listView: ListView = ListView.recipients
    @State var addItem = false
    @State private var searchString = ""
    @State var selectedTab = 0
    @Query private var recipients: [Recipient]
    
    var body: some View {
        NavigationView {
            NavigationStack {
                TabView(selection: $selectedTab) {
                    FilteredList(searchString: searchString, listView: .recipients)
                        .tag(0)
                        .tabItem {
                            Label("Recipient", systemImage: "person.crop.circle")
                        }
                    FilteredList(searchString: searchString, listView: .events)
                        .tag(1)
                        .tabItem {
                            Label("Event", systemImage: "calendar.circle")
                        }
                    FilteredList(searchString: searchString, listView: .greetingCard)
                        .tag(2)
                        .tabItem {
                            Label("Gallery", systemImage: "photo.circle")
                        }
                }
            }
            Text("Make a selection")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
        .navigationViewStyle(.automatic)
    }
}

两种方案都能保证iPad侧边栏的TabView正常显示所有标签，同时不影响iPhone端的原有效果。

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