如何调整SwiftUI LazyVGrid的GridItem为固定宽度百分比？

云原生阿岚

2026-8-9

问题描述

我目前使用以下代码构建包含3列的LazyVGrid：

LazyVGrid(columns: [
    GridItem(.flexible(), alignment: .top),
    GridItem(.flexible(), alignment: .top),
    GridItem(.flexible(), alignment: .top)
], spacing: 5) {
    locationColumn
    distanceColumn
    hoursColumn
}

当前效果如下：
当前LazyVGrid布局效果

我希望将locationColumn固定为视图宽度的20%，distanceColumn和hoursColumn各占40%，三者总和占满视图全宽。目前我只看到使用minimum和maximum参数（如minimum: 50, maximum: 100）的示例，请问最优实现方式是什么？

最优实现方案

iOS 16+ 推荐方案（简洁高效）

直接利用GridItem的weight参数分配列宽比例，无需手动计算宽度：

LazyVGrid(columns: [
    GridItem(.flexible(minimum: 0, weight: 0.2), alignment: .top),
    GridItem(.flexible(minimum: 0, weight: 0.4), alignment: .top),
    GridItem(.flexible(minimum: 0, weight: 0.4), alignment: .top)
], spacing: 5) {
    locationColumn
    distanceColumn
    hoursColumn
}

weight参数定义各列在可用空间中的分配占比，0.2、0.4、0.4刚好对应需求的20%、40%、40%
设置minimum: 0是为了避免内容最小宽度限制打破比例分配
系统会自动处理间距，确保整体布局占满父视图宽度

iOS 15及以下兼容方案

如果需要适配低版本系统，可借助GeometryReader获取父视图宽度后手动计算列宽：

GeometryReader { geo in
    // 扣除列间距后的可用宽度
    let totalSpacing = 5 * 2 // 3列共2个间距
    let availableWidth = geo.size.width - totalSpacing
    
    LazyVGrid(columns: [
        GridItem(.fixed(availableWidth * 0.2), alignment: .top),
        GridItem(.fixed(availableWidth * 0.4), alignment: .top),
        GridItem(.fixed(availableWidth * 0.4), alignment: .top)
    ], spacing: 5) {
        locationColumn
        distanceColumn
        hoursColumn
    }
}