SwiftUI入门之核心3要素：属性/State/Binding

2024-02-21 12:40:03

从属性开始

属性是SwiftUI中定义和存储数据的基本方式。属性类似于Objective-C中的属性，都是用来存储实例变量的值。但是，SwiftUI中的属性有一个关键区别：它是声明式的，这意味着你可以简单地声明一个属性，而无需编写任何代码来初始化它。

struct ContentView: View {
  // 定义一个名为name的属性，类型为String
  @State private var name: String = "World"

  var body: some View {
    // 使用Text视图显示name属性的值
    Text("Hello, \(name)!")
  }
}

在上面的示例中，我们在ContentView结构体中定义了一个名为name的属性，类型为String，并将其初始化为"World"。然后，我们在body属性中使用Text视图显示name属性的值。

深入State

State是SwiftUI中管理可变数据的一个关键概念。State变量存储的是数据，这些数据可能会随着时间的推移而发生变化。例如，你可以使用State变量来存储用户输入的文本或当前显示的视图。

struct ContentView: View {
  // 定义一个名为count的State变量，类型为Int
  @State private var count: Int = 0

  var body: some View {
    // 使用Text视图显示count变量的值
    Text("Count: \(count)")

    // 使用Button视图创建一个按钮，点击按钮时会增加count变量的值
    Button(action: {
      count += 1
    }) {
      Text("Increase Count")
    }
  }
}

在上面的示例中，我们在ContentView结构体中定义了一个名为count的State变量，类型为Int，并将其初始化为0。然后，我们在body属性中使用Text视图显示count变量的值，并使用Button视图创建了一个按钮，点击按钮时会增加count变量的值。

探索Binding

Binding是SwiftUI中将UI元素与数据绑定在一起的关键概念。Binding允许你在UI元素中显示数据，并允许用户修改数据。例如，你可以使用Binding将文本字段与State变量绑定，这样用户就可以在文本字段中输入文本，并将文本保存到State变量中。

struct ContentView: View {
  // 定义一个名为name的State变量，类型为String
  @State private var name: String = "World"

  var body: some View {
    // 使用TextField视图创建一个文本字段，并将name变量与文本字段绑定
    TextField("Enter your name", text: $name)

    // 使用Text视图显示name变量的值
    Text("Hello, \(name)!")
  }
}

在上面的示例中，我们在ContentView结构体中定义了一个名为name的State变量，类型为String，并将其初始化为"World"。然后，我们在body属性中使用TextField视图创建了一个文本字段，并将name变量与文本字段绑定。这样，用户就可以在文本字段中输入文本，并将文本保存到name变量中。我们还使用Text视图显示name变量的值。