SwiftUI中如何让Grid列占满可用空间？适配列表视图问题

核心思路 #

别直接依赖UIScreen.main.bounds计算宽度，List单元格本身带默认内边距，硬编码屏幕宽度会导致布局错位。用GridItem的原生特性就能实现固定列+自适应列的需求。

具体代码实现 #

struct TextRowView: View {
    let label: String
    let content: String
    
    // 配置两列：第一列固定140宽度，第二列自适应剩余空间
    private let columns: [GridItem] = [
        GridItem(.fixed(140), alignment: .leading),
        GridItem(.flexible(), alignment: .leading)
    ]
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 16) {
            Text(label)
            Text(content)
                .lineLimit(nil) // 允许内容换行
        }
        .padding(.horizontal) // 匹配List单元格的默认内边距，保证布局对齐
    }
}

解决List布局异常的关键 #

1. 抛弃硬编码宽度：GridItem(.flexible())会自动填充容器的剩余可用空间，不需要手动计算最小值，适配List的内边距和不同屏幕尺寸。
2. 统一内边距：给LazyVGrid加上水平内边距，和List单元格的默认内边距匹配，避免内容贴边或超出范围。
3. 灵活调整间距：通过LazyVGrid的spacing参数控制两列之间的距离，按需调整即可。

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