带分页行为的SwiftUI ScrollView导致App崩溃问题求助

你遇到的崩溃是因为.ignoresSafeArea()和.containerRelativeFrame(.vertical)的组合在ScrollView初始化阶段引发了布局计算异常——此时安全区域的尺寸还未完全确定，导致子视图的垂直尺寸计算出NaN或无穷大，进而触发CALayer的几何错误。预览模式下布局计算逻辑和真机/模拟器不同，所以不会崩溃。

解决方案1：调整ignoresSafeArea的位置 #

把.ignoresSafeArea()从子视图的Rectangle上移到ScrollView外层，确保ScrollView先确定完整的布局尺寸，子视图的containerRelativeFrame基于这个确定的尺寸计算，就不会出现非法值：

import SwiftUI

struct ScrollTest: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(0..<10, id: \.self) { index in
                    Rectangle()
                        .frame(maxWidth: .infinity)
                        .containerRelativeFrame(.vertical, alignment: .center)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
        .ignoresSafeArea() // 移到ScrollView外层
    }
}

解决方案2：用maxHeight: .infinity替代containerRelativeFrame #

如果更倾向于保持子视图忽略安全区域，也可以用frame(maxHeight: .infinity)实现全屏分页效果，同时避开containerRelativeFrame的初始布局问题：

import SwiftUI

struct ScrollTest: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 0) { // 移除间距保证分页无缝
                ForEach(0..<10, id: \.self) { index in
                    Rectangle()
                        .ignoresSafeArea()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
        .edgesIgnoringSafeArea(.all)
    }
}

这两种方式都能实现TikTok式的全屏分页滚动，同时解决真机/模拟器的崩溃问题。

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