如何使用 SwiftUI 的 LazyVGrid 在不同行中创建灵活的卡片宽度？

Question

我想在一行中显示三张卡片。然而，挑战在于使第一张和最后一张卡片的宽度大于同一行中的其他两张卡片。预期输出如下。

我使用 LazyVStack 来实现此目的，但无法在单列中添加不同宽度的项目。

Answer 1

您可以使用网格来做到这一点。

Grid {
    GridRow {
        Rectangle()
            
            .gridCellColumns(2)
        Rectangle()
        Rectangle()
            
    }
    .padding()
    .frame(height: 330)
    
    GridRow {
        Rectangle()
        Rectangle()
        Rectangle()
            .gridCellColumns(2)
    }
    .padding()
    .frame(height: 330)
}
.foregroundStyle(Color.red)

我发现this指南对网格或官方文档非常有帮助。