SwiftUI同一视图内AsyncImage点击按钮后不更新问题如何解决

你使用的自定义AsyncImage组件内部未实现对传入url参数的变更监听，仅在组件首次初始化时触发一次图片加载逻辑。
当podcastIndex变更触发页面重渲染时，底部的Text组件会直接读取最新的属性值完成刷新，但AsyncImage组件不会感知到传入的url已经发生变化，因此不会重新发起图片请求，始终展示首次加载的结果。

提供两种可行方案，可按需选择：

方案1：强制刷新AsyncImage组件（快速修复） #

给底部的AsyncImage添加id修饰符，绑定到podcastParser.podcastIndex。当id值发生变化时，SwiftUI会销毁旧的AsyncImage实例，重新创建新的实例触发图片加载，代码修改如下：

VStack {
    HStack {
        AsyncImage(
            url: podcastParser.podcasts[podcastParser.podcastIndex].imageUrl,
            placeholder: {
                Text("Loading...")
            },
            image: { Image(uiImage: $0).resizable() }
        )
        .scaledToFit()
        .frame(width: 50, height: 50)
        .id(podcastParser.podcastIndex) // 新增该行代码
        Text(podcastParser.podcasts[podcastParser.podcastIndex].name)
    }
}

方案2：完善自定义AsyncImage实现（根治问题） #

修改AsyncImage组件的内部实现，添加对url参数变化的监听，当url变更时自动清空原有图片并重新发起加载请求，参考修改逻辑：

struct AsyncImage<Placeholder: View, ImageContent: View>: View {
    let url: URL?
    let placeholder: () -> Placeholder
    let image: (UIImage) -> ImageContent
    @State private var loadedImage: UIImage?
    // 原有其他属性定义
    
    var body: some View {
        Group {
            if let loadedImage = loadedImage {
                image(loadedImage)
            } else {
                placeholder()
            }
        }
        .onAppear(perform: loadImage)
        // 新增url变更监听逻辑
        .onChange(of: url) { _ in
            loadedImage = nil
            loadImage()
        }
    }
    
    private func loadImage() {
        // 原有图片加载逻辑不变
    }
    // 原有其他实现逻辑
}

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