SwiftUI实现自适应填充视图的3×4网格布局问题

你的代码核心问题是没有利用好父视图的可用空间，且aspectRatio(.fit)会限制网格项的尺寸比例，导致无法填满目标区域。以下是修改后的实现：

struct CustomGrid: View {
    // 3列，每列等宽，列间距16
    let columns = Array(repeating: GridItem(.flexible(), spacing: 16), count: 3)
    
    var body: some View {
        ZStack {
            Color.white
            // 通过GeometryReader获取当前可用的视图空间
            GeometryReader { geo in
                LazyVGrid(columns: columns, spacing: 16) {
                    ForEach(0..<12) { _ in
                        RoundedRectangle(cornerRadius: 16)
                            // 计算每行高度：(总可用高度 - 3个行间距) / 4行
                            .frame(height: (geo.size.height - 3 * 16) / 4)
                    }
                }
                .padding()
            }
        }
        // 让网格底部填满安全区域（如果有导航栏，顶部会自动留出空间）
        .edgesIgnoringSafeArea(.bottom)
    }
}

关键修改说明： #

• 统一间距：列定义和LazyVGrid都设置了spacing:16，确保行列间距一致，网格布局更规整
• 精确控制高度：用GeometryReader拿到父视图的可用高度，通过公式计算每个网格项的高度，保证4行刚好填满垂直空间
• 移除比例限制：删掉aspectRatio(.fit)，改用固定高度（基于可用空间计算），让网格项能完全填充分配到的区域
• 适配安全区域：edgesIgnoringSafeArea(.bottom)确保网格底部不会留空白，顶部如果有导航栏，SwiftUI会自动保留安全区域空间，不需要额外处理

这个实现会自动随视图尺寸伸缩，横竖屏切换也能保持3×4的网格布局，且每个网格项尺寸一致，完全填充除顶部导航栏外的整个视图。

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