如何在LazyVGrid的ForEach中正确使用GeometryReader定义视图尺寸？

问题分析 #

你当前用GeometryReader包裹单元格内容后出现布局异常，核心原因是GeometryReader默认会占据父容器的所有可用空间，和LazyVGrid的自适应列宽约束产生冲突，导致布局错乱。而直接设置固定宽高的话，单元格无法随列宽自适应，不符合需求。

解决方案 #

方案一：轻量实现（无需GeometryReader）

利用aspectRatio修饰符直接实现正方形布局，这是最简洁的方式：

struct TestGridView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 140))], spacing: 10) {
                ForEach(0 ..< 100) { index in
                    Text("Cell \(index)")
                        .frame(maxWidth: .infinity) // 让内容充满当前列的可用宽度
                        .aspectRatio(1, contentMode: .fit) // 强制宽高比1:1，生成正方形
                        .background(in: RoundedRectangle(cornerRadius: 10))
                        .backgroundStyle(.red)
                }
            }
        }
    }
}

方案二：精确获取尺寸（适配图片处理需求）

如果后续需要精确获取单元格尺寸（比如处理网络图片的裁剪、缩放），可以通过PreferenceKey从背景视图传递尺寸，再应用到单元格上：

// 自定义PreferenceKey用于传递尺寸
struct SizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

struct TestGridView: View {
    @State private var cellWidth: CGFloat = 0
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 140))], spacing: 10) {
                ForEach(0 ..< 100) { index in
                    Text("Cell \(index)")
                        .frame(width: cellWidth, height: cellWidth)
                        .background(in: RoundedRectangle(cornerRadius: 10))
                        .backgroundStyle(.red)
                        // 通过背景层的GeometryReader获取尺寸并传递
                        .background(
                            GeometryReader { geo in
                                Color.clear
                                    .preference(key: SizePreferenceKey.self, value: geo.size)
                            }
                        )
                }
            }
            .onPreferenceChange(SizePreferenceKey.self) { newSize in
                cellWidth = newSize.width
            }
        }
    }
}

两种方案都能实现自适应列宽的正方形单元格，第一种更轻量，适合大部分场景；第二种可以获取精确尺寸，方便后续处理图片等需求。

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