SwiftUI LazyVGrid无法显示全屏高度问题排查

问题根源 #

1. LazyVGrid 的高度依赖父视图提供的空间，若父视图未明确赋予全屏高度，网格无法拉伸至全屏范围
2. 单元格 EmptySquare 内的 VStack 使用了空 Text 和固定间距，导致高度被冗余元素撑开，且未强制保持正方形比例
3. GridItem 仅设置了宽度自适应，但未约束高度与宽度匹配，无法保证单元格的正方形效果

修复代码 #

修改 FullHeightVGrid

确保网格占满可用空间，同时给列添加合理间距：

struct FullHeightVGrid: View {
    // 四列等宽，添加列间距，统一配置简化代码
    var columns: [GridItem] = Array(repeating: GridItem(.flexible(), spacing: 16), count: 4)
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 16) {
            ForEach(1..<17) { _ in
                EmptySquare()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding(16) // 可选：添加整体内边距，避免贴边
    }
}

修改 EmptySquare

移除冗余空文本，用 Spacer 实现内容居中，强制设置正方形比例：

struct EmptySquare : View {
    var body: some View {
        VStack {
            Spacer()
            Text("+")
                .foregroundColor(.white)
                .font(.title) // 可选：放大加号提升视觉效果
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGray4))
        .cornerRadius(8)
        .aspectRatio(1, contentMode: .fill) // 强制宽高比1:1，确保单元格为正方形
    }
}

额外注意 #

如果 FullHeightVGrid 嵌套在 NavigationView、TabView 等容器中，需要给上层容器也设置全屏高度，避免网格被容器默认尺寸限制：

struct ContentView: View {
    var body: some View {
        NavigationStack { // iOS16+ 使用NavigationStack，iOS15及以下用NavigationView
            FullHeightVGrid()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .navigationTitle("Full Height Grid")
        }
    }
}

修改完成后，网格会占满全屏高度，每个单元格保持正方形并撑满对应网格区域。

内容的提问来源于stack exchange，提问作者andreas.teich