更改 ForEach 中刚刚单击的对象的值答案

【问题标题】：Changing value of just clicked object in ForEach更改 ForEach 中刚刚单击的对象的值
【发布时间】：2021-06-27 22:56:49
【问题描述】：

当我单击顶部的单元格时，我只希望文本“单击”出现在该对象上。为什么我会在其他单元格上看到此文本？我该如何解决这个问题？

单元格视图

struct CellView: View {
    @Binding var text: String
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 30)
                .foregroundColor(Color(UIColor.secondarySystemBackground))
                .frame(width: 300, height: 100)
            Text(text)
        }
    }
}

内容视图

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack {
            ForEach(0 ..< 5) { item in
                
                Button(action: {
                    self.text = "Clicked"
                }) {
                    CellView(text: $text) 
                }
            }
        }
    }
}

【问题讨论】：

标签： foreach swiftui

【解决方案1】：

您正在更新用于所有单元格的单个字符串text。当它更改时，所有单元格都将使用该单个字符串进行更新。这里有几个选项：

你可以让单元负责存储和更新它自己的状态：

struct CellView: View {
    @State var text: String = ""

    var body: some View {
        Button(action: {
            self.text = "Clicked"
        }) {
            ZStack {
                RoundedRectangle(cornerRadius: 30)
                    .foregroundColor(Color(UIColor.secondarySystemBackground))
                    .frame(width: 300, height: 100)
                Text(text)
            }
        }
    }
}

struct CellClickContentView: View {
    var body: some View {
        VStack {
            ForEach(0 ..< 5) { item in
                CellView()
            }
        }
    }
}

或者您可以以某种方式将每个单元格的状态存储在父视图中：

class CellState: ObservableObject, Identifiable {
    var id = UUID()
    @Published var text = ""
}

struct CellView: View {
    @ObservedObject var state: CellState

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 30)
                .foregroundColor(Color(UIColor.secondarySystemBackground))
                .frame(width: 300, height: 100)
            Text(state.text)
        }
    }
}

struct CellClickContentView: View {
    @State var states: [CellState] = (0..<5).map { _ in CellState() }

    var body: some View {
        VStack {
            ForEach(states) { state in
                Button(action: {
                    state.text = "Clicked"
                }) {
                    CellView(state: state)
                }
            }
        }
    }
}

【讨论】：

【解决方案2】：

您会在其他单元格上看到文本，因为这是您在所有单元格中显示的内容。试试这样的：

struct ContentView: View {
    @State var text: String = ""
    @State var selection: Int?
    
    var body: some View {
        VStack {
            ForEach(0 ..< 5) { item in
                Button(action: {
                    selection = item
                    text = "Clicked"
                }) {
                    if selection == item {
                        CellView(text: $text)
                    } else {
                        CellView(text: .constant(""))
                    }
                }
            }
        }
    }
}

【讨论】：