You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现自适应LazyVGrid:优先1或2列且奇数项撑满整行

解决LazyVGrid奇数项最后一个跨列撑满的问题

你之前用adaptive类型的GridItem没法实现需求,核心原因是这种方式没法精准控制单个单元格的列跨度,而且自适应列数的逻辑和你要的固定每行2个+最后奇数项跨列的需求不匹配。

直接换固定两列的配置,再动态判断最后一项是否需要跨列:

步骤1:定义固定两列的Grid配置

// 定义两列,每列平分可用宽度,同时设置列间距
let columns = [
    GridItem(.flexible(), spacing: 8),
    GridItem(.flexible(), spacing: 8)
]

如果需要给单元格设置最小宽度(避免屏幕过窄时单元格太挤),可以改成:

let columns = [
    GridItem(.flexible(minimum: 150), spacing: 8),
    GridItem(.flexible(minimum: 150), spacing: 8)
]

步骤2:在LazyVGrid中动态设置单元格跨度

遍历数据时,判断当前项是不是最后一个,且数据总数为奇数,是的话就让它跨2列:

LazyVGrid(columns: columns, spacing: 8) {
    ForEach(data.indices, id: \.self) { index in
        let item = data[index]
        // 替换成你的单元格视图
        ItemView(item: item)
            // 关键:最后一个奇数项跨2列,其余跨1列
            .gridCellColumns((index == data.count - 1) && (data.count % 2 != 0) ? 2 : 1)
    }
}
// 可选:添加左右边距,和你的thirdOfScreen方案里的边距需求对应
.padding(.horizontal, 16)

为什么之前的方法不行?

adaptive(minimum: thirdOfScreen)是让系统根据最小宽度自动生成列数,虽然你预期每行2个,但这种逻辑不够稳定——比如屏幕宽度变化时可能出现列数波动,而且没办法单独控制某一项的列跨度,自然没法实现最后一个奇数项撑满整行的效果。

用固定两列+gridCellColumns动态设置跨度,就能精准满足你的需求:偶数项时每行2个,奇数项时最后一个直接占满整行。

内容的提问来源于stack exchange,提问作者Ilja

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 09:51:03