SwiftUI中LazyVGrid如何实现首列填充宽度其余列居右

问题场景 #

需求为创建固定3列的网格布局：

• 列数固定为3
• 第一列自动填充全部剩余可用宽度
• 后两列排布在网格最右侧
• 不允许手动指定固定frame尺寸

初始实现使用3个.flexible()类型的GridItem配置LazyVGrid，即使为第一列的Text设置.frame(maxWidth: .infinity)，首列仍仅占据整体可用宽度的1/3，不符合预期。
初始实现代码：

struct ContentView: View {
    var body: some View {
        LazyVGrid(columns: self.columns, alignment: .leading, spacing: 10) {
            Group {
            Text("Fill")
                .frame(maxWidth: .infinity)
            Text("Adapt")
            Text("Adapt")
            }
            .background(Color.red)
        }
    }
    
    var columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
        ]
}

初始运行效果：

原因说明 #

LazyVGrid对.flexible()类型的列默认采用平分可用宽度的分配逻辑：所有未被固定/自适应列占用的宽度，会均分给所有flexible列。初始实现中3个列都是默认flexible属性，因此每列固定分到1/3总宽度，列内内容无论怎么设置maxWidth都无法超出列本身的宽度边界。

实现方案 #

不需要手动写死任何宽度值，只需要做两处调整即可实现需求：

• 给后两列的内容添加.fixedSize(horizontal: true, vertical: false)，强制内容水平方向宽度由自身内容决定，不主动抢占额外空间
• 后两列的GridItem设置最小宽度为0，允许列宽压缩至和内容宽度一致，不强制参与宽度平分

修改后可运行代码：

struct ContentView: View {
    var body: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 10) {
            Text("Fill")
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.red)
            Text("Adapt")
                .fixedSize(horizontal: true, vertical: false)
                .background(Color.green)
            Text("Adapt")
                .fixedSize(horizontal: true, vertical: false)
                .background(Color.blue)
        }
        .padding()
    }
    
    var columns: [GridItem] = [
        GridItem(.flexible(), spacing: 10),
        GridItem(.flexible(minimum: 0), spacing: 10),
        GridItem(.flexible(minimum: 0))
    ]
}

如果后两列不需要自适应内容宽度，也可以直接将后两个GridItem改为.fixed(目标宽度)，此时宽度分配逻辑会优先扣除固定列的宽度，剩余所有空间全部分配给第一列，这种方式需要指定固定宽度值，可根据需求选择。

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