iOS 16中Form内嵌LazyVGrid首次渲染位置异常问题

问题现象 #

在iOS16环境下，SwiftUI的Form组件内嵌套LazyVGrid时，首次渲染会出现顶部多余空白区域，滚动屏幕或旋转屏幕后恢复正常显示。

解决方案 #

方案1：给CustomVGrid添加顶部对齐的frame约束 #

修改CustomVGrid的视图布局，通过frame强制内容从顶部开始排列，修正布局计算错误：

struct CustomVGrid: View {
    let layout = [GridItem(.adaptive(minimum: 350, maximum: 500), spacing: 20)]

    var body: some View {
        LazyVGrid(columns: layout, alignment: .leading, spacing: 20) {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                .background(Color.green)
            ForEach(0..<20, id: \.self) { index in
                VStack {
                    Text("\(index): Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  ")
                        .background(Color.red)
                    Spacer()
                }
            }
        }
        .frame(maxHeight: .infinity, alignment: .top) // 添加顶部对齐约束
    }
}

方案2：禁用LazyVGrid的滚动交互 #

Form本身是可滚动容器，嵌套的LazyVGrid滚动逻辑可能与Form冲突，导致布局偏移异常。禁用LazyVGrid的滚动即可解决：

struct CustomVGrid: View {
    let layout = [GridItem(.adaptive(minimum: 350, maximum: 500), spacing: 20)]

    var body: some View {
        LazyVGrid(columns: layout, alignment: .leading, spacing: 20) {
            // 原内容保持不变
        }
        .scrollDisabled(true) // 禁用内部滚动
    }
}

方案3：用VStack包裹并明确布局规则 #

将LazyVGrid包裹在VStack中，明确设置顶部对齐，同时让容器占满Section的可用高度：

struct CustomVGrid: View {
    let layout = [GridItem(.adaptive(minimum: 350, maximum: 500), spacing: 20)]

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            LazyVGrid(columns: layout, alignment: .leading, spacing: 20) {
                // 原内容保持不变
            }
        }
        .frame(maxHeight: .infinity, alignment: .top)
    }
}

原理说明 #

该问题是iOS16中Form与LazyVGrid的布局协同bug，首次渲染时LazyVGrid的内容偏移计算错误。通过强制顶部对齐、禁用内部滚动或明确容器布局规则，可以修正系统的布局计算逻辑，实现首次渲染正常显示。

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