iOS15下SwiftUI同时设背景色与.stack导航样式时导航栏TabBar异常

问题原因 #

这是SwiftUI在iOS 15+上的已知系统Bug，当NavigationView使用.stack样式时，给内部可滚动容器直接添加background修饰符会破坏导航栏、TabBar的自动材质模糊效果，同时打断滚动时导航栏的折叠交互逻辑。

修复方案 #

方案1：调整background修饰符的位置（兼容iOS 15+） #

不要将background直接加在ScrollView上，改为在ScrollView内部添加背景视图，代码修改如下：

var body: some View {
    TabView {
        NavigationView {
            ScrollView {
                // 背景放在ScrollView内容最下层
                Color.yellow
                    .ignoresSafeArea()
                ForEach(0..<100) { _ in
                    Text("Hello, world!")
                        .padding()
                }
                .frame(maxWidth: .infinity)
            }
            .navigationTitle("Demo")
        }
        .navigationViewStyle(.stack)
        .tabItem {
            Label("Demo", systemImage: "swift")
        }
    }
}

方案2：显式声明导航栏和TabBar的样式（兜底方案） #

如果修改背景位置后仍有异常，可以手动指定导航栏和TabBar的显示行为：

var body: some View {
    TabView {
        NavigationView {
            ScrollView {
                ForEach(0..<100) { _ in
                    Text("Hello, world!")
                        .padding()
                }
                .frame(maxWidth: .infinity)
                .background(Color.yellow)
            }
            .navigationTitle("Demo")
            // 显式指定导航栏背景自动适配
            .toolbarBackground(.automatic, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
        .navigationViewStyle(.stack)
        .tabItem {
            Label("Demo", systemImage: "swift")
        }
    }
    // 全局指定TabBar背景自动适配
    .toolbarBackground(.automatic, for: .tabBar)
    .toolbarBackground(.visible, for: .tabBar)
}

方案3：升级使用NavigationStack（iOS 16+推荐） #

iOS 16以后苹果已经废弃NavigationView，改用NavigationStack可以完全规避该Bug，无需额外适配：

var body: some View {
    TabView {
        NavigationStack {
            ScrollView {
                ForEach(0..<100) { _ in
                    Text("Hello, world!")
                        .padding()
                }
                .frame(maxWidth: .infinity)
                .background(Color.yellow)
            }
            .navigationTitle("Demo")
        }
        .tabItem {
            Label("Demo", systemImage: "swift")
        }
    }
}

关于官方Bug说明 #

该问题属于SwiftUI已知的渲染逻辑缺陷，已经在iOS 16的NavigationStack中被修复，对于需要兼容iOS 15的场景使用上述前两个方案即可正常实现需求。

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