Swift中如何在uiColorArray数组变更时刷新像素画界面？

SwiftUI无法感知普通变量的变化，要实现数组更新时自动刷新视图，必须使用专门的状态管理机制，以下是两种可行方案：

方案一：将数组作为视图内部状态管理 #

如果uiColorArray仅在当前视图内使用，直接用@State修饰数组，SwiftUI会自动监听其变化并触发视图刷新：

struct PixelArtView: View {
    // 用@State替代普通public var，让SwiftUI感知数组变化
    @State private var uiColorArray: [UIColor] = [] {
        didSet {
            print("arrayChanged")
        }
    }
    
    let cellCount = 32
    
    var body: some View {
        VStack(spacing: 1) {
            ForEach(1...cellCount, id: \.self) { r in
                HStack(spacing: 1) {
                    ForEach(1...cellCount, id: \.self) { c in
                        // 注意：c+r的索引计算可能存在越界风险，建议根据实际逻辑调整（比如(r-1)*cellCount + (c-1)）
                        Rectangle()
                            .fill(Color(uiColorArray[c + r]))
                            .frame(width: 10, height: 10)
                    }
                }
            }
        }.gesture(drag)
    }
    
    // 你的drag手势实现
    private var drag: some Gesture {
        DragGesture()
    }
}

方案二：通过ViewModel管理数组（适合外部数据源） #

如果uiColorArray来自外部模块、网络请求或需要跨视图共享，使用ObservableObject（或SwiftUI 4+的@Observable宏）封装状态：

步骤1：创建ViewModel #

import SwiftUI

// SwiftUI 3及以下版本写法
class PixelArtViewModel: ObservableObject {
    // @Published自动发送状态变化通知
    @Published var uiColorArray: [UIColor] = [] {
        didSet {
            print("arrayChanged")
        }
    }
}

// SwiftUI 4+（iOS 16+/macOS 13+）可简化为：
// @Observable
// class PixelArtViewModel {
//     var uiColorArray: [UIColor] = [] {
//         didSet {
//             print("arrayChanged")
//         }
//     }
// }

步骤2：在视图中引用ViewModel #

struct PixelArtView: View {
    // @StateObject确保ViewModel仅初始化一次
    @StateObject private var viewModel = PixelArtViewModel()
    let cellCount = 32
    
    var body: some View {
        VStack(spacing: 1) {
            ForEach(1...cellCount, id: \.self) { r in
                HStack(spacing: 1) {
                    ForEach(1...cellCount, id: \.self) { c in
                        Rectangle()
                            .fill(Color(viewModel.uiColorArray[c + r]))
                            .frame(width: 10, height: 10)
                    }
                }
            }
        }.gesture(drag)
    }
    
    private var drag: some Gesture {
        DragGesture()
    }
}

核心原理 #

SwiftUI通过可观察状态属性包装器（如@State、@Published）跟踪数据变化，当这些属性更新时，SwiftUI会自动对比新旧状态，刷新受影响的视图部分。普通变量不具备这种通知能力，因此无法触发刷新。

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