NavigationStack中View内容被导航栏遮挡的问题排查与解决

问题描述 #

我在NavigationStack层级中有一个PrivacyView，其内容被导航区域的顶部和底部遮挡，且未设置忽略安全区域边缘，请问该问题的成因是什么？如何解决？

原代码：

struct PrivacyView: View {
    // MARK: - Body
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                ScrollView {
                    VStack {
                        Text("App Privacy Statement")
                            .padding(.top)
                            .font(.title2)
                        
                        HStack {
                            Spacer()
                            
                            Image(uiImage: AppImages.gameDefaultImage)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 150, height: 150)
                                .cornerRadius(8)
                            
                            Spacer()
                        }
                        .padding()
                        
                        Text(Bundle.getText("privacy"))
                            .padding()
                    }
                    .padding(.bottom)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .strokeBorder(.orange, lineWidth: 2)
                    )
                    .padding()
                }
            }
        }
        .navigationBarTitleDisplayMode(.automatic)
        .foregroundColor(.white)
        .background(
            LinearGradient(colors: [
                Color.systemOrange,
                Color.systemPurple,
                Color.systemPurple,
                Color.systemPurple,
                Color.systemPurple
            ], startPoint: .top, endPoint: .bottom)
        )
    }
}

成因分析 #

• 背景与内容的安全区域适配冲突：你将background修饰符直接加在最外层ZStack上，这个背景会延伸到导航栏的安全区域下方。而ScrollView作为滚动容器，默认不会自动添加安全区域内边距，导致内容与导航栏、底部安全区域重叠，出现遮挡。
• 在SwiftUI的NavigationStack层级中，导航栏会覆盖在视图上方，根视图的背景默认会填充到安全区域之外，但内容容器（如ScrollView）不会自动适配安全区域范围，因此内容会跑到导航栏和底部区域的下方。

解决方法 #

方案一：直接给ScrollView添加安全区域内边距 #

这是最简洁的修复方式，让ScrollView的内容自动避开安全区域：

ScrollView {
    // 原有内容
}
.padding(.safeArea)

方案二：分离背景与内容，实现全屏背景+安全区内内容 #

这种方式既能让背景充满整个屏幕，又能保证内容在安全区域内正常显示：

struct PrivacyView: View {
    // MARK: - Body
    var body: some View {
        ZStack(alignment: .bottom) {
            // 将背景放在ZStack最底层，实现全屏填充
            LinearGradient(colors: [
                Color.systemOrange,
                Color.systemPurple,
                Color.systemPurple,
                Color.systemPurple,
                Color.systemPurple
            ], startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
            
            VStack {
                ScrollView {
                    VStack {
                        Text("App隐私声明")
                            .padding(.top)
                            .font(.title2)
                        
                        HStack {
                            Spacer()
                            
                            Image(uiImage: AppImages.gameDefaultImage)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 150, height: 150)
                                .cornerRadius(8)
                            
                            Spacer()
                        }
                        .padding()
                        
                        Text(Bundle.getText("privacy"))
                            .padding()
                    }
                    .padding(.bottom)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .strokeBorder(.orange, lineWidth: 2)
                    )
                    .padding()
                }
                .padding(.safeArea) // 让ScrollView内容避开安全区域
            }
        }
        .navigationBarTitleDisplayMode(.automatic)
        .foregroundColor(.white)
    }
}

关键修改说明 #

• 将背景从ZStack的修饰符改为内部底层视图，用.edgesIgnoringSafeArea(.all)实现全屏背景效果。
• 给ScrollView添加.padding(.safeArea)，强制内容在安全区域范围内渲染，彻底避免被导航栏和底部区域遮挡。

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