SwiftUI中如何强制重绘WebImage组件？

我使用以下代码加载用户头像（基于WebImage实现）：

VStack {
    WebImage(url: URL(string: (vm.user?.profilePictureUrl ?? "")))
        .resizable()
        .scaledToFill()
        .frame(width: 128, height: 128)
        .clipShape(Circle())
        .overlay(Circle().stroke(Color(.label), lineWidth: 0.5))
        .shadow(radius: 0.5)
        .padding()
        
    PhotosPicker(selection: $selectedItem) {
        Label("Change Profile Photo", systemImage: "camera")
    }
    .onChange(of: selectedItem) { newValue in
        Task {
            if let imageData = try? await newValue?
                .loadTransferable(type: Data.self), let image = UIImage(data: imageData) {
                selectedImage = Image(uiImage: image)
                persistImageToStorage(image: image)
            }
        }
    }
    .padding()
    .foregroundColor(.accentColor)
    .background(.ultraThickMaterial)
    .cornerRadius(10)
    .frame(minWidth: 0, maxWidth: .infinity)
}

也尝试过使用AsyncImage：

AsyncImage(url: URL(string: vm.user?.profilePictureUrl ?? "")) { phase in
    switch phase {
    case.success(let image):
        image.resizable()
    case .empty:
        ProgressView()
    case .failure(_):
        EmptyView()
    @unknown default:
        EmptyView()
    }
}
.frame(width: 128, height: 128)
.clipShape(Circle())
.overlay(Circle().stroke(Color(.label), lineWidth: 0.5))
.shadow(radius: 0.5)
.padding()

问题：WebImage加载的链接本身不会变化，仅链接指向的内容会在执行persistImageToStorage函数后更新。因此选择新图片后，只有在Xcode中强制重绘才会显示新头像，请问如何让程序在选择新图片后自动重绘WebImage组件？

解决方案 #

方法1：清除WebImage缓存并触发刷新 #

WebImage基于Kingfisher实现，默认会缓存图片资源。当URL指向的内容更新后，需要手动清除对应URL的缓存，再触发组件重绘：

1. 在ViewModel中添加触发刷新的发布者变量：

class YourViewModel: ObservableObject {
    @Published var user: UserModel?
    @Published var avatarRefreshTrigger = 0
    // ... 其他业务代码
}

2. 在头像存储完成后，清除缓存并更新触发变量：

Task {
    if let imageData = try? await newValue?
        .loadTransferable(type: Data.self), let image = UIImage(data: imageData) {
        selectedImage = Image(uiImage: image)
        await persistImageToStorage(image: image)
        
        // 清除对应URL的缓存
        if let urlString = vm.user?.profilePictureUrl, let url = URL(string: urlString) {
            ImageCache.default.removeCachedImage(for: url)
        }
        // 触发组件重绘
        vm.avatarRefreshTrigger += 1
    }
}

3. 给WebImage绑定id修饰符，通过id变化强制重绘：

WebImage(url: URL(string: (vm.user?.profilePictureUrl ?? "")))
    .resizable()
    .scaledToFill()
    .frame(width: 128, height: 128)
    .clipShape(Circle())
    .overlay(Circle().stroke(Color(.label), lineWidth: 0.5))
    .shadow(radius: 0.5)
    .padding()
    .id(vm.avatarRefreshTrigger)

方法2：仅通过id强制重绘（跳过缓存清除） #

如果不需要处理缓存逻辑，可直接利用SwiftUI的id特性强制组件重新渲染：只需要在ViewModel中添加avatarRefreshTrigger变量，给WebImage绑定该id，并在头像更新后修改变量值即可，代码参考方法1对应部分。

方法3：适配AsyncImage的刷新逻辑 #

使用AsyncImage时，解决思路一致：

1. 在ViewModel中添加avatarRefreshTrigger变量；
2. 给AsyncImage添加.id(vm.avatarRefreshTrigger)修饰符；
3. 完成头像存储后更新avatarRefreshTrigger的值，强制组件重绘。

修改后的AsyncImage代码：

AsyncImage(url: URL(string: vm.user?.profilePictureUrl ?? "")) { phase in
    switch phase {
    case.success(let image):
        image.resizable()
    case .empty:
        ProgressView()
    case .failure(_):
        EmptyView()
    @unknown default:
        EmptyView()
    }
}
.frame(width: 128, height: 128)
.clipShape(Circle())
.overlay(Circle().stroke(Color(.label), lineWidth: 0.5))
.shadow(radius: 0.5)
.padding()
.id(vm.avatarRefreshTrigger)

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