SwiftUI中LazyVGrid的TextField输入值无法正常保存与视图更新问题

核心问题拆解 #

你遇到的两个问题本质都是数据绑定的响应式失效：

1. 双数组索引绑定：数组是值类型，通过索引修改时未正确触发视图刷新；
2. Identifiable结构体方案：ViewModel未正确使用响应式包装，或Firebase同步后未更新本地数据源导致视图不刷新。

分步解决代码示例 #

1. 定义响应式数据模型

import Foundation

struct NamesAndTimes: Identifiable {
    let id = UUID()
    var name: String
    var time: Int // 按需替换为Double支持小数
}

2. 实现带响应式与Firebase同步的ViewModel

import Foundation
import FirebaseFirestore

class TimeViewModel: ObservableObject {
    // @Published确保数组变化自动通知视图更新
    @Published var namesAndTimes: [NamesAndTimes] = []
    
    // 从Firebase加载初始数据
    func loadInitialData() {
        Firestore.firestore().collection("timeRecords").getDocuments { querySnapshot, error in
            guard let docs = querySnapshot?.documents else {
                print("加载失败: \(error?.localizedDescription ?? "未知错误")")
                return
            }
            self.namesAndTimes = docs.compactMap { doc in
                guard let name = doc["name"] as? String, let time = doc["time"] as? Int else { return nil }
                return NamesAndTimes(id: UUID(uuidString: doc.documentID) ?? UUID(), name: name, time: time)
            }
        }
    }
    
    // 保存数据到Firebase并同步本地
    func saveRecord(_ record: NamesAndTimes) {
        let docRef = Firestore.firestore().collection("timeRecords").document(record.id.uuidString)
        docRef.setData([
            "name": record.name,
            "time": record.time
        ]) { error in
            if let error = error {
                print("保存失败: \(error.localizedDescription)")
            } else {
                // 本地同步更新，触发视图刷新
                if let index = self.namesAndTimes.firstIndex(where: { $0.id == record.id }) {
                    self.namesAndTimes[index] = record
                }
            }
        }
    }
    
    // 可选：开启Firebase实时监听，同步远程修改
    func startRealtimeListener() {
        Firestore.firestore().collection("timeRecords").addSnapshotListener { querySnapshot, error in
            guard let docs = querySnapshot?.documents else { return }
            self.namesAndTimes = docs.compactMap { doc in
                guard let name = doc["name"] as? String, let time = doc["time"] as? Int else { return nil }
                return NamesAndTimes(id: UUID(uuidString: doc.documentID) ?? UUID(), name: name, time: time)
            }
        }
    }
}

3. 实现实时更新的LazyVGrid视图

import SwiftUI

struct TimeGridView: View {
    // @StateObject确保ViewModel与视图生命周期绑定
    @StateObject private var viewModel = TimeViewModel()
    
    let gridColumns: [GridItem] = [
        GridItem(.flexible(), alignment: .leading),
        GridItem(.flexible(), alignment: .trailing)
    ]
    
    var body: some View {
        LazyVGrid(columns: gridColumns, spacing: 16, content: {
            // 表头
            Text("项目名称").font(.headline)
            Text("耗时").font(.headline)
            
            // 绑定数组元素的可变引用
            ForEach($viewModel.namesAndTimes) { $record in
                Text(record.name)
                TextField("输入数字", value: $record.time, formatter: NumberFormatter.integerFormatter)
                    .textFieldStyle(.roundedBorder)
                    .keyboardType(.numberPad)
                    // 实时保存或失焦保存二选一
                    .onChange(of: record.time) { _ in
                        viewModel.saveRecord(record)
                    }
                    // .onCommit {
                    //     viewModel.saveRecord(record)
                    // }
            }
        })
        .padding()
        .onAppear {
            viewModel.loadInitialData()
            viewModel.startRealtimeListener()
        }
    }
}

// 数字格式化工具，限制输入为整数
extension NumberFormatter {
    static var integerFormatter: NumberFormatter {
        let formatter = NumberFormatter()
        formatter.numberStyle = .none
        formatter.allowsFloats = false
        return formatter
    }
}

struct TimeGridView_Previews: PreviewProvider {
    static var previews: some View {
        TimeGridView()
    }
}

关键注意点 #

1. 响应式绑定：用@Published包装ViewModel的数组，ForEach($viewModel.namesAndTimes)直接绑定元素的可变引用，确保TextField输入实时同步到数据源；
2. 本地-远程同步：保存到Firebase后必须更新本地数组，或通过Firebase快照监听自动同步远程修改；
3. 输入格式化：用NumberFormatter限制输入类型，避免非法输入导致的数据异常。

内容的提问来源于stack exchange，提问作者J. Holliday