SwiftUI：如何正確地允許用戶在拖動手勢后更改拖動元素的顏色

Question

我正在嘗試創建允許用戶在網格中拖動並更改每個觸摸單元格顏色的應用程序。 某種像素藝術繪圖機，但在制作簡單示例后它不起作用，我不知道為什么。

這是我的代碼：

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

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

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

struct Grid: View {
    
    @State private var cells: [[Cell]] = (0..<10).map { _ in
        (0..<10).map { _ in Cell() }
    }

    var body: some View {
        VStack(spacing: 0) {
            ForEach(cells, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(row, id: \.id) { cell in
                        cell
                    }
                }
            }
        }
        .background(Color.black)
        .gesture(
            DragGesture()
                .onChanged { value in
                    let width = 40
                    let height = 40
                    let x = Int(value.location.x / CGFloat(width))
                    let y = Int(value.location.y / CGFloat(height))
                    // Make sure the indices are within the bounds of the grid
                    if x >= 0 && x < 10 && y >= 0 && y < 10 {
                        self.cells[y][x].color = .green
                    }
                }
        )
    }
}

Answer 1

最好為細胞創建單獨的模型。 這是一個快速修復。

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

struct Cell: Identifiable {
    var color: Color = .red
    let id = UUID()
}

struct Grid: View {
    
    @State private var cells: [[Cell]] = (0..<10).map { _ in
        (0..<10).map { _ in Cell() }
    }
    
    var body: some View {
        VStack(spacing: 0) {
            ForEach(cells.indices, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(cells[row], id: \.id) { cell in
                        CellView(cell: cell)
                    }
                }
            }
        }
        .background(Color.black)
        .gesture(
            DragGesture()
                .onChanged { value in
                    let width = 40
                    let height = 40
                    let x = Int(value.location.x / CGFloat(width))
                    let y = Int(value.location.y / CGFloat(height))
                    // Make sure the indices are within the bounds of the grid
                    if x >= 0 && x < 10 && y >= 0 && y < 10 {
                        self.cells[y][x].color = .green
                    }
                }
        )
    }
}

Answer 2

@raja-kishan 方法很好，但您可以像這樣從 Cell Struct 中刪除@State from @State var color: Color =.red 。

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

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

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