SwiftUI实现LazyGrid单个Item占其他Item两倍空间的方法

以下是几种符合需求的实现方案，均不使用.fixed布局，可适配任意屏幕尺寸：

方案一：iOS16+ 用LazyVGrid（带权重参数） #

利用iOS16新增的GridItem权重参数，直接指定各列的宽度比例：

let cols: [GridItem] = [
    GridItem(.flexible(weight: 1)),
    GridItem(.flexible(weight: 1)),
    GridItem(.flexible(weight: 1)),
    GridItem(.flexible(weight: 2))
]

var body: some View {
    LazyVGrid(columns: cols, spacing: 8) {
        Text("div1")
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Text("div2")
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Text("div3")
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Text("div4")
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
    }
    .padding()
}

前三个列的权重为1，最后一列权重为2，系统会按比例分配可用空间，保证最后一项宽度始终是其他项的两倍。

方案二：兼容iOS14+ 用GeometryReader精确控制比例 #

通过GeometryReader获取父视图宽度，手动计算每个item的精确宽度：

var body: some View {
    GeometryReader { geo in
        HStack(spacing: 8) {
            // 总宽度减去3个间距，分成5份：前三个各1份，第四个2份
            let itemWidth = (geo.size.width - 3*8)/5
            
            Text("div1")
                .frame(width: itemWidth)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div2")
                .frame(width: itemWidth)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div3")
                .frame(width: itemWidth)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div4")
                .frame(width: itemWidth*2)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
        }
    }
    .padding()
}

该方案直接基于父视图宽度计算比例，完全适配所有屏幕尺寸，无fixed布局依赖。

方案三：iOS16+ 用Grid布局（更简洁） #

SwiftUI的Grid布局支持直接指定单元格占据的列数，实现比例控制：

var body: some View {
    Grid(horizontalSpacing: 8, verticalSpacing: 8) {
        GridRow {
            Text("div1")
                .gridCellColumns(1)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div2")
                .gridCellColumns(1)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div3")
                .gridCellColumns(1)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
            Text("div4")
                .gridCellColumns(2)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
        }
    }
    .padding()
}

通过gridCellColumns设置每个item的列跨度，前三个占1列，第四个占2列，Grid会自动按比例分配宽度，满足需求。

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