如何实现AsyncImage下载完成后再显示，避免空白与内容跳转？

核心问题分析 #

你遇到的两个问题本质都是图片容器尺寸不稳定和加载过程中无过渡占位导致的：

• 触发加载后，AsyncImage在获取图片前显示EmptyView，容器高度塌陷，导致下方文本上移
• 切换新图时，旧图被直接替换，没有保留到新图加载完成

解决方案代码 #

@State var ready: Bool = false
// 存储已加载完成的图片，切换时保留旧图
@State var cachedImage: Image?

var body: some View {
    VStack {
        // ZStack叠加占位图和AsyncImage，保证加载过程中容器不空白
        ZStack {
            // 基础占位图，始终存在作为容器支撑
            Image("placeholderImage")
                .resizable()
                .scaledToFit()
            
            if ready {
                AsyncImage(url: URL(string: "https://images.squarespace-cdn.com/content/v1/58b4791ad2b857c893179e34/1537971642021-LHW76T7O8JG0M4GLTSTP/IMG_2818.jpg"), scale: 3) { phase in
                    switch phase {
                    case .success(let image):
                        Image(uiImage: image.uiImage!)
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(1)
                            .transition(.opacity)
                            .onAppear {
                                cachedImage = Image(uiImage: image.uiImage!)
                            }
                    case .failure:
                        Color.blue // 错误状态提示
                    case .empty:
                        // 加载中显示缓存的旧图（如果有），避免空白
                        cachedImage?
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(1)
                    @unknown default:
                        EmptyView()
                    }
                }
            }
        }
        // 强制保持占位图的宽高比，彻底避免容器尺寸波动
        .aspectRatio(contentMode: .fit)
        
        Text("Some sample text")
    }
    .onAppear {
        Task {
            try await Task.sleep(for: .seconds(5))
            ready = true
        }
    }
}

关键修改说明 #

• 固定容器尺寸：给ZStack添加.aspectRatio(contentMode: .fit)，强制继承占位图的宽高比，不管内部视图状态如何，容器尺寸都不会塌陷，下方文本不会上移
• ZStack叠加结构：把占位图作为底层视图，AsyncImage叠加在上方，加载过程中底层占位图始终存在，不会出现空白区域
• 缓存已加载图片：用cachedImage存储已加载完成的图片，切换新图时，加载过程中显示旧图，直到新图加载完成再通过过渡动画替换，实现平滑切换
• 优化phase处理逻辑：在.empty（加载中）状态下显示缓存图而非空视图，从根源解决加载时的空白问题

扩展：动态切换图片场景 #

如果需要动态切换远程图片URL，只需把URL改成@State变量，修改URL时cachedImage会自动保留之前的图片，直到新图加载完成：

@State var targetImageUrl: String? = nil

// 切换图片时直接修改变量即可
targetImageUrl = "新的图片URL"

内容的提问来源于stack exchange，提问作者Ori C.