SwiftUI：Socket数据更新致视图重载时图片闪烁问题求助

核心问题分析 #

你遇到的图片闪烁，本质是视图被强制重复重建+图片重复加载导致的，代码里有几个关键错误：

1. 滥用.id(UUID())：给WebImage、SpotView、ForEach都加了随机ID，SwiftUI会认为每次都是新视图，强制销毁重建，触发图片重新加载。
2. 视图身份识别不稳定：ForEach用id: \.self依赖模型的Equatable实现，如果模型更新时整个数组被替换，会导致全量刷新。
3. WebImage缺少缓存优化和占位图，加载过程中空白切换引发视觉闪烁。

具体解决步骤 #

1. 移除所有不必要的.id(UUID())

删除以下三处的.id(UUID())：

• SpotView中WebImage的.id(UUID())
• SpotView实例的.id(UUID())
• ForEach的.id(UUID())

这些随机ID会彻底破坏SwiftUI的视图复用机制，是闪烁的主要诱因。

2. 优化SpotView的Equatable实现

精准对比影响视图显示的核心字段，避免无关数据变化触发视图刷新：

struct SpotView: View, Equatable {
    static func == (lhs: SpotView, rhs: SpotView) -> Bool {
        // 只对比图标URL、价格、收藏状态等直接影响视图的字段
        lhs.spotModel.quote_icon_url == rhs.spotModel.quote_icon_url &&
        lhs.spotModel.price == rhs.spotModel.price &&
        lhs.spotModel.isFavorite == rhs.spotModel.isFavorite
    }

    var spotModel: CoinPairMarketModel
    var favoriteBtnAction: () -> Void

    var body: some View {
        HStack {
            WebImage(url: spotModel.quote_icon_url)
                .placeholder(Image("Bitcoin")) // 恢复占位图，避免加载空白闪烁
                .resizable()
                .interpolation(.none)
                .aspectRatio(contentMode: .fit)
                .background(Color(UIColor.getAppWhite()))
                .clipShape(Circle())
                .shadow(color: Color(UIColor.getAppBlueShadowColor()), radius: 8, x: 0, y: 2)
                .frame(width: 30, height: 30)
                .padding(EdgeInsets(top: 0, leading: 15, bottom: -15, trailing: 0))
                .cacheOriginalImage() // 强制缓存原图，避免重复请求
            
            // 补充你原本的其他视图内容
        }
    }
}

3. 优化父视图的列表刷新逻辑

• 用@StateObject替代@ObservedObject（iOS14+），确保ViewModel生命周期与视图绑定稳定。
• 给ForEach使用模型的唯一稳定ID（比如symbol或模型自带的唯一标识字段），替代id: \.self，避免数组替换时全量刷新：

struct SpotMarketView: View {
    @StateObject var viewModel = SpotViewModel()
    
    let socketPublisher = NotificationCenter.default.publisher(for: .marketSocketUpdated)
    let searchPublisher = NotificationCenter.default.publisher(for: .marketSearchChanged)
  
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                // 替换为模型的唯一稳定标识，示例用symbol，根据你的模型调整
                ForEach(viewModel.arrFilterCoinPair ?? [], id: \.symbol) { element in
                    Button {
                        viewModel.moveToTradeScreen(data: element)
                    } label: {
                        SpotView(spotModel: element, favoriteBtnAction: {
                            viewModel.addRemoveFavorite(coinPair: element) {}
                        }).equatable()
                    }
                    
                    Rectangle()
                        .frame(height: 0.5)
                        .foregroundColor(Color(UIColor.getAppSeperatorColor()))
                        .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
                }
            }
        }
        .background(Color(UIColor.getAppWhite()))
        .onReceive(socketPublisher) { _ in
            // 优化：Socket更新时只修改对应模型，而非替换整个数组
            viewModel.updateSingleCoinPair()
        }
        .onReceive(searchPublisher) { _ in
            viewModel.filterCoinPairs()
        }
    }
}

4. 优化ViewModel的数据更新策略

• 对于Socket推送的实时数据，不要直接替换整个arrFilterCoinPair数组，而是找到对应模型对象更新字段，这样SwiftUI只会刷新对应的行，而非全列表重载。
• 确保@Published属性只有在数据真正变化时才发布更新，比如在模型的didSet中对比新旧值：

class SpotViewModel: ObservableObject {
    @Published var arrFilterCoinPair: [CoinPairMarketModel]? {
        didSet {
            // 避免无意义的重复发布
            guard arrFilterCoinPair != oldValue else { return }
        }
    }
    
    // Socket更新时只修改单个模型
    func updateSingleCoinPair() {
        guard let updatedData = getSocketData(), var pairs = arrFilterCoinPair else { return }
        if let index = pairs.firstIndex(where: { $0.symbol == updatedData.symbol }) {
            pairs[index] = updatedData
            arrFilterCoinPair = pairs
        }
    }
}

内容的提问来源于stack exchange，提问作者Keshu R.