SwiftUI中onChange未触发异步函数更新列表行缩略图问题

问题核心在于onChange修饰符的位置错误，导致musicFile.artwork更新时无法触发缩略图重加载；同时视图重建时的逻辑遗漏也会导致旧缩略图残留。

问题原因 #

1. onChange被附加在Group视图上，而Group的渲染仅依赖thumbnail状态，当musicFile.artwork变化但thumbnail未更新时，Group不会触发视图更新，进而onChange回调无法执行。
2. 若父视图因musicFile实例变化重建PlaylistSongRow，新视图实例的onChange不会响应初始值（仅监听同一实例内的变化），而.task可能未重新执行加载新缩略图。

解决方案1：调整onChange位置并监听artwork #

将onChange移至根视图HStack上，确保只要artwork变化就触发回调：

struct PlaylistSongRow: View {
    var musicFile: MusicFile
    @State private var thumbnail: UIImage?

    var body: some View {
        HStack {
            Group {
                if let thumbnail = thumbnail {
                    Image(uiImage: thumbnail)
                        .resizable()
                        .scaledToFit()
                        .cornerRadius(5)
                        .frame(width: 50, height: 50)
                } else {
                    Image(systemName: "music.note")
                        .resizable()
                        .foregroundColor(.gray)
                        .scaledToFit()
                        .frame(width: 50, height: 50) // 补全frame保证布局一致性
                }
            }

            VStack(alignment: .leading) {
                Text(musicFile.name)
                    .lineLimit(1)
                Text(musicFile.artist)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .lineLimit(1)
            }
        }
        // 将onChange移至根视图，确保artwork变化时必触发
        .onChange(of: musicFile.artwork) { newValue in
            Task {
                if let artwork = newValue {
                    thumbnail = await getArtwork(for: artwork)
                } else {
                    thumbnail = nil // 清空旧缩略图
                }
            }
        }
        .task {
            if let artwork = musicFile.artwork {
                thumbnail = await getArtwork(for: artwork)
            }
        }
    }

    func getArtwork(for data: Data) async -> UIImage? {
        let image = UIImage(data: data)
        guard let image = image else { return nil }
        let size = CGSize(width: 500, height: (500 * image.size.height) / image.size.width)
        
        guard let thumbnail = await image.byPreparingThumbnail(ofSize: size) else { return nil }
        
        return thumbnail
    }
}

解决方案2：监听整个musicFile实例 #

如果musicFile的多个属性（如名称、艺术家）和artwork同时更新，可以直接监听整个musicFile实例，确保所有变化都同步缩略图：

// 替换原有的onChange代码
.onChange(of: musicFile) { newMusicFile in
    Task {
        if let artwork = newMusicFile.artwork {
            thumbnail = await getArtwork(for: artwork)
        } else {
            thumbnail = nil
        }
    }
}

额外注意事项 #

• 父视图中更新MusicFile时，若为数组元素，需通过重新赋值数组触发更新（如playlist[index] = updatedMusicFile），确保SwiftUI感知到变化。
• 给默认图标添加frame，避免布局偏移，保持与缩略图一致的显示尺寸。

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