如何让SwiftUI自适应GridItem在元素较少时填满全屏宽度

问题描述 #

需求为：屏幕宽度允许时横向显示2-3个元素，宽度不足时纵向排列。使用adaptive类型的GridItem实现时，竖屏表现正常，但横屏模式下，系统判断可容纳3个元素，会预留第三列空间，导致仅有的2个元素无法填满整个宽度。

原代码 #

struct MyView: View {
    private let columns: [GridItem] = [
        GridItem(.adaptive(minimum: 200)),
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, content: {
                ForEach(1...2, id: \.self) { item in
                    Color.red
                        .frame(height: 100)
                        .frame(maxWidth: .infinity)
                }
            })
        }
    }
}

问题表现 #

横屏时布局效果如下：

解决方案 #

问题根源在于adaptive类型的GridItem会根据最小宽度生成固定数量的列，即使元素数量不足，也会保留对应列的空间。我们可以通过动态计算列数来解决：根据可用宽度算出最多能容纳的列数（不超过3列），再结合实际元素数量确定最终列数，让元素均分可用宽度。

修改后的代码：

struct MyView: View {
    private let items = 1...2 // 实际元素集合
    private let minItemWidth: CGFloat = 200 // 元素最小宽度
    private let maxColumns = 3 // 最大列数

    var body: some View {
        ScrollView {
            GeometryReader { geo in
                // 计算当前宽度下最多能容纳的列数
                let possibleColumns = min(maxColumns, Int(geo.size.width / minItemWidth))
                // 最终列数取"最多列数"和"实际元素数"的较小值
                let actualColumns = min(possibleColumns, items.count)
                // 生成对应数量的flexible类型GridItem，让元素均分宽度
                let columns = Array(repeating: GridItem(.flexible()), count: max(actualColumns, 1))
                
                LazyVGrid(columns: columns, spacing: 8) { // spacing可根据需求调整
                    ForEach(items, id: \.self) { item in
                        Color.red
                            .frame(height: 100)
                    }
                }
            }
        }
    }
}

说明 #

• 使用GeometryReader获取父容器的可用宽度，以此计算最大可容纳列数
• 最终列数不会超过实际元素数量，确保元素能填满整个行宽
• flexible类型的GridItem会让元素均分当前行的可用宽度，避免留白

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