SwiftUI TabView：如何让页面索引保留在安全区且背景全屏？

你可以通过不给整个TabView添加.ignoresSafeArea()，而是单独给Tab内容或TabView背景设置忽略安全区来实现需求：

方案1：每个Tab内容单独铺满全屏 #

让每个Tab的视图扩展到安全区外，TabView本身保持在安全区约束内，这样页面索引会自动留在安全区里：

struct FullScreenTabDemo: View {
    @State private var currentTab = 0
    
    var body: some View {
        TabView(selection: $currentTab) {
            // 第一个全屏页面
            Color.red
                .ignoresSafeArea()
                .tag(0)
            
            // 第二个全屏页面
            Color.blue
                .ignoresSafeArea()
                .tag(1)
            
            // 第三个全屏页面
            Color.green
                .ignoresSafeArea()
                .tag(2)
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

方案2：给TabView设置统一全屏背景 #

如果需要所有Tab共用同一个全屏背景，直接给TabView添加带.ignoresSafeArea()的背景即可：

struct UnifiedBackgroundTabDemo: View {
    @State private var currentTab = 0
    
    var body: some View {
        TabView(selection: $currentTab) {
            Text("首页")
                .tag(0)
            Text("发现")
                .tag(1)
            Text("我的")
                .tag(2)
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
        .background(Color.purple.ignoresSafeArea())
    }
}

两种方案都能实现：页面索引（指示器）保留在安全区内，同时TabView的背景/内容铺满整个屏幕。

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