SwiftUI导航栏模糊效果添加底部内容后失效的问题排查与解决

原因分析 #

SwiftUI中NavigationBar的滚动模糊效果，只有当滚动视图（比如List）的内容能够延伸到导航栏布局区域下方时才会触发。默认情况下，List直接作为NavigationView的子视图时，SwiftUI会自动让List的内容区域向上延伸至导航栏下方，滚动时内容就会在导航栏的模糊背景下显示。

但当你把List放进VStack并添加底部Text后，两个关键变化导致效果失效：

• VStack成为NavigationView的直接子视图，它的布局会把List限制在自身的上半部分空间，List的内容无法再延伸到导航栏下方；
• 你给VStack设置了黑色背景，这个纯色背景会完全覆盖List原本可以延伸到导航栏下方的区域，即便List能滚动，内容也无法透过背景显示在导航栏下，触发模糊的条件自然不满足。

解决方案 #

要同时保留模糊效果和固定底部文本，核心是让List的内容仍能延伸到导航栏下方，同时底部文本固定在屏幕底部。这里提供两种实用方案：

方案1：将底部文本作为List的Footer #

利用List的listFooter修饰符，把底部文本嵌入List的底部，这样List依旧是NavigationView的直接子视图，内容可以正常延伸到导航栏下方，滚动时模糊效果保持：

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello, world!")
                    .foregroundColor(.red)
                    .font(.system(size: 70))
            }
            .listStyle(.plain)
            .border(.red)
            .listFooter {
                Text("bottom")
                    .frame(maxWidth: .infinity)
                    .background(.black) // 保持和整体背景一致
            }
            .background(.black)
            .navigationBarTitle("test", displayMode: .inline)
        }
    }
}

方案2：用ZStack叠加底部文本 #

通过ZStack将底部文本叠在全屏List的下方，确保List内容可以延伸到导航栏下方，同时底部文本固定在屏幕底部：

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack(alignment: .bottom) {
                List {
                    Text("Hello, world!")
                        .foregroundColor(.red)
                        .font(.system(size: 70))
                    // 可选：添加空白行避免底部文本遮挡List最后一项
                    Color.clear.frame(height: 50)
                }
                .listStyle(.plain)
                .border(.red)
                .background(.black)

                Text("bottom")
                    .background(.black) // 遮挡List底部的滚动内容
                    .padding(.bottom)
            }
            .navigationBarTitle("test", displayMode: .inline)
        }
    }
}

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