SwiftUI中TabView内AsyncImage不显示的问题如何修复

带.page样式的SwiftUI TabView底层由UICollectionView实现，默认会对内部子视图的布局变更做递归校验。AsyncImage的默认实现是先加载占位视图，图片下载完成后再异步更新视图尺寸，这个异步布局变更触发了集合视图的递归布局拦截逻辑，最终导致图片加载完成后无法正常渲染，对应控制台输出的递归日志也和这个机制直接相关。

• 方案1：给AsyncImage明确设置固定尺寸约束
  提前给每个AsyncImage设定和TabView匹配的固定宽高，避免图片加载完成后触发布局重绘，代码示例：

TabView {
    AsyncImage(url: URL(string: "link")) { image in
        image
            .resizable()
            .scaledToFill()
    } placeholder: {
        Color.gray // 可替换为自定义占位视图
    }
    .frame(width: UIScreen.main.bounds.width, height: 300)
    .clipped()

    AsyncImage(url: URL(string: "link")) { image in
        image
            .resizable()
            .scaledToFill()
    } placeholder: {
        Color.gray
    }
    .frame(width: UIScreen.main.bounds.width, height: 300)
    .clipped()
}
.tabViewStyle(.page)
.frame(height: 300)
.frame(maxWidth: .infinity)

• 方案2：用GeometryReader动态获取父容器尺寸适配
  如需适配不同屏幕宽度、避免硬编码尺寸，可通过GeometryReader提前拿到TabView的实际尺寸传入子项，代码示例：

GeometryReader { geo in
    TabView {
        AsyncImage(url: URL(string: "link")) { image in
            image
                .resizable()
                .scaledToFill()
        } placeholder: {
            ProgressView()
        }
        .frame(width: geo.size.width, height: geo.size.height)
        .clipped()
        
        // 其余图片页实现逻辑同上
    }
    .tabViewStyle(.page)
}
.frame(height: 300)

上述两种方案任选其一即可解决问题，修改后控制台的[UICollectionViewRecursion]日志会随布局冲突解决自动消失，无需额外处理。

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