从Firestore获取数据时SwiftUI文本闪烁问题咨询

问题根源 #

你遇到的闪烁是因为初始时data为nil，视图会先隐藏Text组件；当Firestore请求完成后data被赋值，视图才渲染Text，这种"无→有"的视图切换导致了闪烁。另外，使用@ObservedObject且在视图内直接初始化ViewModel，可能导致重复创建实例、重复请求数据，加重闪烁现象。

替代实现方案 #

以下是优化后的代码，从ViewModel设计和视图绑定两方面解决问题：

1. 优化ViewModel（原getData类）

import Firebase

struct Datas {
    var like: NSNumber
}

class DataViewModel: ObservableObject {
    // 给data设置默认值，避免初始为nil
    @Published var data: Datas = Datas(like: 0)
    
    init() {
        fetchLikeData()
    }
    
    func fetchLikeData() {
        let db = Firestore.firestore()
        db.collection("Like").document("Option").getDocument { [weak self] snap, error in
            guard let self = self else { return }
            
            if let error = error {
                print(error.localizedDescription)
                return
            }
            
            // 用可选绑定避免强制解包，提升安全性
            if let likeCount = snap?.get("ss") as? NSNumber {
                DispatchQueue.main.async {
                    // 直接更新like属性，而非重新赋值整个Datas对象，减少UI更新触发次数
                    self.data.like = likeCount
                }
            }
        }
    }
}

2. 优化视图（CellLike.swift）

struct CellLike: View {
    // 用@StateObject确保ViewModel在视图生命周期内仅初始化一次（iOS14+支持）
    @StateObject private var viewModel = DataViewModel()
    
    var body: some View {
        HStack {
            /// Like Button
            
            // 直接显示点赞数，因data有默认值，视图不会出现"无→有"的切换
            Text("\(viewModel.data.like)")
        }
    }
}

核心优化点 #

• 避免可选值导致的视图切换：给data设置默认初始值，让Text组件始终存在，仅更新文本内容而非添加/移除组件，从根源消除闪烁。
• 稳定ViewModel生命周期：使用@StateObject替代@ObservedObject，确保ViewModel不会随视图刷新重复创建，避免重复请求Firestore数据引发的多次UI更新。
• 细化属性更新：直接修改data.like而非重新赋值整个Datas对象，减少@Published的触发频率，让UI更新更平滑。

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