SwiftUI：仅忽略顶部安全区时分页ScrollView元素居中问题

问题根源 #

当给分页ScrollView的父视图添加.ignoresSafeArea(.container, edges: .top)时，系统的分页布局计算会错误地将底部安全区高度纳入每一页的偏移累积中，导致每切换一页，内容就会向下偏移一个底部安全区的高度，最终出现越来越大的偏移量。

优雅解决方案 #

方案1：通过GeometryReader反向抵消偏移 #

利用GeometryReader获取当前视图的底部安全区高度，给ScrollView的内容容器设置负的垂直偏移，直接抵消系统错误计算的累积偏移：

struct FeedView: View {
    private let items = (1...10).map { "Item \($0)" }
    
    var body: some View {
        GeometryReader { geo in
            ScrollView(.vertical) {
                LazyVStack(spacing: 0) {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                            .frame(width: geo.size.width, height: geo.size.height)
                            .background(Color(red: .random(in: 0.5...1), green: .random(in: 0.5...1), blue: .random(in: 0.5...1)))
                    }
                }
                .scrollTargetLayout()
                // 反向抵消底部安全区的累积偏移
                .offset(y: -geo.safeAreaInsets.bottom)
            }
            .scrollTargetBehavior(.paging)
        }
        .ignoresSafeArea(.container, edges: .top)
    }
}

方案2：调整安全区忽略的层级 #

避免直接给ScrollView的父视图忽略顶部安全区，而是让ScrollView内部需要延伸到顶部安全区的元素单独处理安全区，ScrollView本身保持完整的安全区布局：

struct FeedView: View {
    private let items = (1...10).map { "Item \($0)" }
    
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                // 仅让顶部需要延伸的元素忽略顶部安全区
                Text("Feed Header")
                    .frame(maxWidth: .infinity, height: 60)
                    .background(Color.blue)
                    .ignoresSafeArea(.container, edges: .top)
                
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color(red: .random(in: 0.5...1), green: .random(in: 0.5...1), blue: .random(in: 0.5...1)))
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
        // ScrollView不忽略任何安全区，保证分页计算准确
    }
}

方案对比 #

• 方案1：直接针对偏移问题修正，适合没有顶部自定义头部的场景，代码改动小。
• 方案2：从布局逻辑上避免问题，更符合SwiftUI的布局原则，适合有顶部延伸元素的场景。

这两种方案都比临时添加.padding(.bottom, 1)的 hack 更可靠，也不会出现.viewAligned行为首次渲染异常的问题。

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