SwiftUI：如何实现拖拽手势下修改划过单元格颜色的功能

你的代码主要有三个核心问题，导致拖拽修改颜色功能失效：

问题1：Cell的状态管理错误 #

Cell内部用@State存储颜色，但@State是视图内部的私有状态，外部直接修改cells[y][x].color不会生效——因为SwiftUI会维护@State的独立副本，覆盖外部的修改。

问题2：Equatable/Hashable实现逻辑错误 #

你用color作为Cell相等性和哈希的判断依据，这会导致：

• 当颜色变化时，Cell的标识（id）改变，ForEach会重新创建整个Cell视图，性能差且状态不稳定
• Grid中ForEach(cells, id: \.self)用整个行的哈希作为id，颜色变化会触发整行重绘，且SwiftUI无法精准跟踪单个Cell的变化

问题3：视图更新触发失败 #

cells是@State的二维值类型数组，直接修改数组元素的属性（比如color），SwiftUI检测不到数组的变化——因为值类型的属性修改不会改变数组元素的引用，所以不会触发视图更新。

修复后的完整代码 #

struct Cell: View, Hashable, Equatable {
    @Binding var color: Color
    let id = UUID()
    
    static func == (lhs: Cell, rhs: Cell) -> Bool {
        return lhs.id == rhs.id
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }

    var body: some View {
        Rectangle()
            .frame(width: 40, height: 40)
            .foregroundColor(color)
    }
}

struct Grid: View {
    // 将颜色状态统一放在父视图管理，用二维数组存储每个单元格的颜色
    @State private var cellColors: [[Color]] = Array(repeating: Array(repeating: .red, count: 10), count: 10)

    var body: some View {
        VStack(spacing: 0) {
            // 通过索引遍历行和列，直接绑定到对应位置的颜色
            ForEach(0..<10, id: \.self) { y in
                HStack(spacing: 0) {
                    ForEach(0..<10, id: \.self) { x in
                        Cell(color: $cellColors[y][x])
                    }
                }
            }
        }
        .background(Color.black)
        .gesture(
            // 设置minimumDistance为0，支持点击修改+拖拽连续修改
            DragGesture(minimumDistance: 0)
                .onChanged { value in
                    let cellSize = 40.0
                    let x = Int(value.location.x / cellSize)
                    let y = Int(value.location.y / cellSize)
                    // 边界检查
                    guard x >= 0, x < 10, y >= 0, y < 10 else { return }
                    cellColors[y][x] = .green
                }
        )
    }
}

修复说明 #

1. 状态提升：把颜色状态从Cell移到Grid的cellColors数组，Cell通过@Binding绑定到对应颜色，确保外部修改能同步到视图。
2. 正确的标识逻辑：Cell的相等性和哈希基于唯一UUID，避免颜色变化导致视图重建，让ForEach能稳定跟踪每个Cell。
3. 触发视图更新：直接修改cellColors数组的元素（值类型替换），SwiftUI能检测到数组变化，精准更新对应的Cell视图。
4. 优化拖拽体验：添加minimumDistance: 0，支持点击单个单元格修改颜色，同时拖拽时连续划过的单元格都会变色。

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