SwiftUI 中使用 id(_) 标识视图

2023-11-02 03:39:32

虽然 id() 在 SwiftUI 中鲜为人知，但了解它在某些情况下可以帮助解决重要问题。

id() 的作用是为视图绑定一个唯一的标识符。当标识符的值发生改变时，视图表面上似乎回到了初始状态。然而，实际上，系统创建了一个新的视图，具有不同的标识符。

举个例子：

struct ContentView: View {
  @State private var count = 0

  var body: some View {
    VStack {
      Text("Count: \(count)")

      Button("Increment") {
        count += 1
      }

      // 将 id() 应用于 Button 视图
      Button(action: {}) {
        Text("Reset")
      }
      .id(count)
    }
  }
}

在上面的示例中，当用户点击 "Increment" 按钮时，count 变量会增加。然后，视图会更新以反映 count 的新值。

有趣的是，当用户点击 "Reset" 按钮时，count 变量的值并没有改变。但是，由于 id() 被应用于 "Reset" 按钮，所以系统创建了一个新的 "Reset" 按钮，具有一个新的标识符。

这意味着，即使 "Reset" 按钮实际上没有执行任何操作，它也会导致 "Reset" 按钮的视图状态重置为初始状态。

实用场景

在某些情况下，此行为可能很有用。例如，当需要在视图中实现某种形式的条件渲染时。

想象一下一个包含文本字段和按钮的表单。当用户输入文本并点击按钮时，按钮应该被禁用。然而，当用户清空文本字段时，按钮应该再次被启用。

可以使用 id() 来实现这种行为：

struct ContentView: View {
  @State private var text = ""

  var body: some View {
    Form {
      TextField("Enter text", text: $text)

      Button(action: {}) {
        Text("Submit")
      }
      .disabled(text.isEmpty)
      .id(text)
    }
  }
}