取消选择列表行时的SwiftUI动作

Question

我有一个SwiftUI列表，它可以更改一行的属性，例如轻按颜色。
现在我想开始一个动作，例如如果点击另一行，则重置颜色。

我正在寻找一个事件，如果未选中该行，则该行会收到。

这是我的示例代码：

struct ContentView: View {
  @State var data : [String] = ["first","second","third","4th","5th"]
  var body: some View {
    List {
      ForEach (data, id: \.self) {
        item in
        ColoredRow(text: item)
      }
    }
  }
}

struct ColoredRow: View {
  var text: String = ""
  @State var col : Color = Color.white

  var body: some View{
    Text("\(text)")
    .background(col)
    .onTapGesture {
      self.col = Color.red
    }
//  .onDeselect {
//    print("disappeare \(self.text)")
//    self.col = Color.white
//  }
  }
}

Answer 1

让我们回想一下SwiftUI是 reactive （即状态驱动的，而不是事件驱动的），因此，如果我们不想在UI中进行某些更改，则需要找到一种方法来对其进行更改通过 state （用户界面或模型，但使用状态）。

因此，下面对您的代码进行了一些修改以显示可能的方法。在Xcode 11.2 / iOS 13.2上进行了测试。

struct ContentView: View {
    @State var data : [String] = ["first","second","third","4th","5th"]
    @State private var selectedItem: String? = nil
    var body: some View {
        List {
            ForEach (data, id: \.self) {
                item in
                ColoredRow(text: item, selection: self.$selectedItem)
            }
        }
    }
}

struct ColoredRow: View {
    var text: String = ""
    @Binding var selection: String?

    @State var col : Color = Color.white

    var body: some View{
        Text("\(text)")
            .background(selection == text ? Color.red : Color.white)
            .onTapGesture {
                self.selection = (self.selection == self.text ? nil : self.text)
        }
    }
}