SwiftUI GridView如何让自适应单元格拉伸匹配行内最高固定高度单元格

开发者阿泽

2026-9-30

解决SwiftUI LazyVGrid 行内单元格自适应等高问题

问题原因

你当前配置的GridItem对齐规则为.top，只会让同一行单元格顶部对齐，不会自动拉伸高度匹配行内最高元素。

修改方案

只需调整GridItem的对齐参数为.fill即可实现需求：该对齐规则会自动让同一行内所有单元格拉伸高度，匹配行内最高元素的尺寸。
如果单元格内部有自定义内容需要调整对齐位置，可在单元格内容外层添加.frame(maxHeight: .infinity, alignment: 你需要的对齐方式)，不影响单元格整体撑满行高的效果。

修改后完整可运行代码

import SwiftUI

var farbe: [Color] = [
    .red, .orange, .yellow, .blue, .purple, .pink, .gray
]

struct Cell: View {
    let color: Color
    
    var body: some View {
        Rectangle().fill(color)
    }
}

struct GridTest: View {
    let columns = [
        // 对齐方式从.top改为.fill
        GridItem(.fixed(20), spacing: 20, alignment: .fill),
        GridItem(.adaptive(minimum: 80, maximum: .infinity), alignment: .fill),
    ]
    
    var body: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 12) {
            ForEach(1...9, id: \.self) { idx in
                if idx % 3 == 1 {
                    let color = farbe.randomElement()!
                    Cell(color: color)
                        .frame(height: CGFloat(idx) * 12)
                        .border(Color.black, width: 2)
                } else {
                    Cell(color: .black)
                        .border(Color(.systemGray6), width: 2)
                }
            }
        }
        .background(Color(.systemGray2))
    }
}

struct GridTest_Previews: PreviewProvider {
    static var previews: some View {
        GridTest()
    }
}