SwiftUI中scrollTo与edgesIgnoringSafeArea(.top)兼容问题求解

问题描述 #

使用scrollTo滚动到视图顶部时，因启用.edgesIgnoringSafeArea(.top)，视图会超出顶部一段等于安全区域高度的距离；移除该修饰符后滚动功能恢复正常。需要实现两者同时正常工作。

原代码：

struct MyPageView: View {
    var body: some View {
        NavigationStack {
            ScrollViewReader { value in
                ScrollView {
                    VStack {
                        // 内部视图代码
                    }
                }
                .edgesIgnoringSafeArea(.top)
                .onChange(of: environmentVariables.scrollPosition) {
                    if let target = environmentVariables.scrollPosition {
                        withAnimation {
                            value.scrollTo(target, anchor: .top)
                        }
                        
                        environmentVariables.scrollPosition = nil
                    }
                }
            }
        }
    }
}

解决方案 #

方法1：将edgesIgnoringSafeArea移至内部内容（推荐） #

把忽略安全区域的修饰符从ScrollView移到内部的VStack上，这样ScrollView的滚动边界仍会尊重安全区域，而内容可以延伸到顶部，滚动定位也能正常工作：

struct MyPageView: View {
    var body: some View {
        NavigationStack {
            ScrollViewReader { value in
                ScrollView {
                    VStack {
                        // 内部视图代码
                    }
                    .edgesIgnoringSafeArea(.top) // 移至此处
                }
                .onChange(of: environmentVariables.scrollPosition) {
                    if let target = environmentVariables.scrollPosition {
                        withAnimation {
                            value.scrollTo(target, anchor: .top)
                        }
                        
                        environmentVariables.scrollPosition = nil
                    }
                }
            }
        }
    }
}

方法2：自定义锚点抵消安全区域偏移 #

如果必须在ScrollView上保留.edgesIgnoringSafeArea(.top)，可以通过GeometryReader获取顶部安全区域高度，计算自定义锚点修正滚动位置：

struct MyPageView: View {
    @State private var topSafeAreaHeight: CGFloat = 0
    
    var body: some View {
        NavigationStack {
            ScrollViewReader { value in
                ScrollView {
                    VStack {
                        // 内部视图代码
                    }
                }
                .edgesIgnoringSafeArea(.top)
                .onChange(of: environmentVariables.scrollPosition) {
                    if let target = environmentVariables.scrollPosition {
                        withAnimation {
                            // 根据安全区域高度调整锚点Y值
                            let adjustedAnchor = UnitPoint(x: 0, y: topSafeAreaHeight / UIScreen.main.bounds.height)
                            value.scrollTo(target, anchor: adjustedAnchor)
                        }
                        
                        environmentVariables.scrollPosition = nil
                    }
                }
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .onAppear {
                                topSafeAreaHeight = proxy.safeAreaInsets.top
                            }
                    }
                )
            }
        }
    }
}

方法1是最符合SwiftUI布局逻辑的方案，无需额外计算即可同时满足内容延伸顶部和滚动定位准确的需求。

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