SwiftUI中GeometryReader结合LazyVGrid无法显示内容及ForEach报错求助

错误分析 #

你遇到两个核心问题：

1. ForEach循环报错：Non-constant range: not an integer range，原因是SwiftUI的ForEach需要明确的可识别元素范围，直接使用items.indices在部分场景下会被判定为非常量范围，导致编译错误。
2. 文字不显示：.position()修饰符强制将Text放置到GeometryReader的绝对位置，脱离了LazyVGrid的单元格布局逻辑，导致文字被移出可视区域。

修复步骤 #

1. 修复ForEach循环 #

替换基于索引的遍历方式，直接遍历数组元素并指定唯一标识（当前场景下String元素可直接用自身作为id）：

ForEach(items, id: \.self) { item in
    Text(item)
    // ... 其他修饰符
}

如果后续数组可能出现重复元素，建议给元素添加Identifiable协议，或使用enumerated()绑定索引，但当前场景下id: \.self足够简洁可靠。

2. 移除错误的position修饰符 #

LazyVGrid会自动根据GridItem的配置完成单元格布局，手动设置position会打乱原有布局逻辑。移除该修饰符后，Text会自然显示在单元格内部。

3. 优化单元格尺寸控制 #

通过配置GridItem的尺寸规则，配合frame修饰符让单元格自动填充空间，无需手动计算坐标：

• 使用.flexible()让单元格自适应容器空间
• 给Text添加maxWidth: .infinity, maxHeight: .infinity，确保文字填充整个单元格

修复后的完整代码 #

struct example1: View {
    let rows: Int = 4
    let columns: Int = 4
    let items: [String] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"]

    var body: some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columns), spacing: 0) {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .border(Color.black, width: 1)
                    .background(Color.white)
                    .font(.title) // 可选：放大字体提升可读性
            }
        }
        .frame(width: 400, height: 400) // 保持正方形布局更协调，可按需调整为800高度
    }
}

自适应父容器的扩展方案 #

如果需要让网格自适应父容器大小，可以保留GeometryReader，将计算出的单元格尺寸传给GridItem：

struct example1: View {
    let rows: Int = 4
    let columns: Int = 4
    let items: [String] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"]

    var body: some View {
        GeometryReader { geometry in
            let cellSize = geometry.size.width / CGFloat(columns)
            LazyVGrid(columns: Array(repeating: GridItem(.fixed(cellSize)), count: columns), spacing: 0) {
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .frame(width: cellSize, height: cellSize)
                        .border(Color.black, width: 1)
                        .background(Color.white)
                }
            }
        }
    }
}

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