SwiftUI如何实现适配屏幕的2x2正方形网格（VStack/LazyVGrid两种方案）

首先你之前硬编码frame尺寸的方式确实不可取，无法适配不同尺寸的屏幕，消除间隙的正确方式是给容器组件设置spacing: 0，而非通过固定数值控制。 #

1. VStack/HStack 组合实现 #

你更新后的代码已经可以完美实现需求，核心逻辑是：

• 外层VStack和内层HStack都设置spacing: 0消除元素间隙
• 给整个VStack设置aspectRatio(1.0, contentMode: .fit)，让外层容器为正方形
• 内部的矩形会默认平分HStack的可用宽度，高度自动随容器撑开，自动实现宽高1:1的正方形效果

VStack(spacing: 0) {
    HStack(spacing: 0) {
        Rectangle()
            .fill(Color.gray)
        Rectangle()
            .fill(Color.blue)
    }
    HStack(spacing: 0) {
        Rectangle()
            .fill(Color.red)
        Rectangle()
            .fill(Color.green)
    }
}
.aspectRatio(1.0, contentMode: .fit)

2. LazyVGrid 适配实现 #

你需要通过灵活的GridItem配置替代硬编码宽高，具体实现代码如下：

// 定义两列网格配置，列间距为0，自动平分可用宽度
let columns = [
    GridItem(.flexible(), spacing: 0),
    GridItem(.flexible(), spacing: 0)
]

LazyVGrid(columns: columns, spacing: 0) {
    Rectangle()
        .fill(Color.gray)
        .aspectRatio(1, contentMode: .fit)
    Rectangle()
        .fill(Color.blue)
        .aspectRatio(1, contentMode: .fit)
    Rectangle()
        .fill(Color.red)
        .aspectRatio(1, contentMode: .fit)
    Rectangle()
        .fill(Color.green)
        .aspectRatio(1, contentMode: .fit)
}

核心逻辑说明：

• .flexible()类型的GridItem会自动平分父容器的可用宽度，每列宽度自动为屏幕宽度的1/2
• 每个矩形元素设置aspectRatio(1)，自动让高度等于宽度，实现正方形效果
• 列配置和LazyVGrid都设置spacing: 0，消除所有元素间隙

方案选择建议 #

• 固定2x2静态布局场景：优先选择VStack/HStack组合方案，布局逻辑简单无额外开销，适配逻辑清晰
• 动态网格/元素数量较多/需要滚动的场景：优先选择LazyVGrid方案，后续扩展成本更低，支持懒加载性能更好

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