为什么我的SwiftUI Grid无法适配可用空间？该如何修复？

参照苹果WWDC视频《SwiftUI 中的栈、网格与大纲》修改示例代码时，出现了网格无法撑满可用区域、布局留白的问题，实际运行效果可参考下图：

相关实现代码如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        albumGrid
    }
}

let columns = [
//    GridItem(.adaptive(minimum: 100))
    GridItem(spacing: 0),
    GridItem(spacing: 0),
    GridItem(spacing: 0)
]

var albumGrid: some View {
    ScrollView {
        LazyVGrid(columns: columns, spacing: 0.2) {
            ForEach(albums) { album in
                Image(album.coverImageName)
            }
        }
    }
}

问题根源 #

当前定义的3个GridItem未指定任何尺寸适配规则，SwiftUI会为无尺寸规则的GridItem默认匹配列内内容的固有尺寸，也就是每列宽度只会撑到列内图片的原始大小，不会自动拉伸占满ScrollView的全部可用宽度，最终导致整个网格布局整体宽度不足、出现侧边留白。

修复方法 #

根据不同的布局需求，可选择两种适配方案修改列规则：

• 固定三等分布局：给每一列的GridItem指定.flexible()尺寸规则，三列会自动均分整个容器的可用宽度，消除多余留白：

let columns = [
    GridItem(.flexible(), spacing: 0),
    GridItem(.flexible(), spacing: 0),
    GridItem(.flexible(), spacing: 0)
]

• 自适应分栏布局：启用原本注释的自适应列规则，让SwiftUI根据容器实际可用宽度，自动排布能放下的、最小宽度为100的列数，可自动适配不同尺寸的设备屏幕：

let columns = [
    GridItem(.adaptive(minimum: 100), spacing: 0)
]

补充优化提示：如果希望封面图完全填满对应网格单元格，需要给Image视图补充resizable()、scaledToFill()、clipped()修饰符，避免图片保留原始尺寸撑破网格布局。

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