SwiftUI中@Published数组元素状态更新后视图未刷新的解决方案

核心原因 #

当@Published修饰的数组元素是值类型（结构体）时，直接修改数组内元素的属性不会触发数组的willSet/didSet（因为数组本身的内存地址未变化）；如果是引用类型（ObservableObject类），元素内部的属性变化不会自动向上传递到数组的@Published触发刷新。

方案一：使用结构体实现LocationToggleable（推荐） #

结构体是值类型，修改属性时需生成新实例替换数组中的对应元素，这样@Published数组会检测到变化并触发视图刷新，同时天然支持Hashable（只要所有属性符合Hashable）。

代码实现：

// 定义符合Hashable的结构体
struct LocationToggleable: Hashable {
    let id: UUID // 唯一标识，确保Hashable的稳定性
    var name: String
    var selected: Bool
    
    // 自定义Hashable实现，仅用id做哈希，避免selected变化影响哈希值
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.id == rhs.id
    }
}

// LocationService实现
class LocationService: ObservableObject {
    @Published var locations: [LocationToggleable] = []
    
    // 根据ID切换元素选中状态
    func toggleLocation(with id: UUID) {
        guard let index = locations.firstIndex(where: { $0.id == id }) else { return }
        // 创建新实例替换原元素，触发@Published刷新
        var updatedLocation = locations[index]
        updatedLocation.selected.toggle()
        locations[index] = updatedLocation
    }
}

// 视图使用示例
struct LocationGridView: View {
    @StateObject private var service = LocationService()
    
    let columns = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(service.locations, id: \.id) { location in
                Text(location.name)
                    .padding()
                    .background(location.selected ? Color.blue : Color.gray)
                    .onTapGesture {
                        service.toggleLocation(with: location.id)
                    }
            }
        }
        .onAppear {
            // 初始化示例数据
            service.locations = [
                LocationToggleable(id: UUID(), name: "位置1", selected: false),
                LocationToggleable(id: UUID(), name: "位置2", selected: true)
            ]
        }
    }
}

说明：

• 用id作为Hashable的唯一标识，避免selected状态变化导致哈希值改变（否则会影响ForEach的视图复用逻辑）。
• 修改时必须通过替换数组元素的方式，而非直接修改service.locations[index].selected，这样才能触发@Published的刷新机制。

方案二：使用ObservableObject类实现LocationToggleable #

如果必须用类（比如需要共享引用），需要让LocationService监听每个元素的变化，转发刷新通知：

代码实现：

// 定义符合Hashable的ObservableObject类
class LocationToggleable: ObservableObject, Hashable {
    let id: UUID
    let name: String
    @Published var selected: Bool
    
    init(id: UUID = UUID(), name: String, selected: Bool = false) {
        self.id = id
        self.name = name
        self.selected = selected
    }
    
    // 基于ID实现Hashable
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    static func == (lhs: LocationToggleable, rhs: LocationToggleable) -> Bool {
        lhs.id == rhs.id
    }
}

// LocationService实现
class LocationService: ObservableObject {
    @Published var locations: [LocationToggleable] = []
    private var cancellables = Set<AnyCancellable>()
    
    // 添加元素时监听其变化，转发到Service的刷新通知
    func addLocation(_ location: LocationToggleable) {
        locations.append(location)
        location.objectWillChange
            .sink { [weak self] _ in
                self?.objectWillChange.send()
            }
            .store(in: &cancellables)
    }
    
    // 直接修改元素选中状态，监听会自动触发Service刷新
    func toggleLocation(with id: UUID) {
        guard let location = locations.first(where: { $0.id == id }) else { return }
        location.selected.toggle()
    }
}

// 视图使用示例
struct LocationGridView: View {
    @StateObject private var service = LocationService()
    
    let columns = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(service.locations, id: \.id) { location in
                // 用包装器监听单个元素的变化，实现局部刷新
                ObservedObjectWrapper(location: location) { wrapper in
                    Text(wrapper.location.name)
                        .padding()
                        .background(wrapper.location.selected ? Color.blue : Color.gray)
                        .onTapGesture {
                            service.toggleLocation(with: wrapper.location.id)
                        }
                }
            }
        }
        .onAppear {
            service.addLocation(LocationToggleable(name: "位置1"))
            service.addLocation(LocationToggleable(name: "位置2", selected: true))
        }
    }
}

// 辅助包装结构体，用于在ForEach中监听单个ObservableObject
struct ObservedObjectWrapper<Content: View, T: ObservableObject>: View {
    @ObservedObject var location: T
    let content: (Self) -> Content
    
    var body: some View {
        content(self)
    }
}

说明：

• 每个LocationToggleable实例的@Published selected变化时，会通过Combine转发到LocationService的objectWillChange，触发视图刷新；ObservedObjectWrapper可以实现单个元素的局部刷新，提升性能。
• Hashable依然基于id实现，避免状态变化影响哈希一致性。

为什么你之前的尝试无效？ #

• 直接修改结构体元素的属性：值类型的修改不会改变数组的引用，@Published检测不到变化。
• 使用ObservableObject类但未监听元素变化：元素内部的@Published不会自动让父数组的@Published触发刷新，必须手动转发通知。

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