面试题：Swift UI框架的数据绑定与响应式编程

代码示例

import SwiftUI

struct ContentView: View {
    // 使用@State来存储输入框的文本内容，@State会在值变化时触发视图更新
    @State private var inputText = ""
    
    var body: some View {
        VStack {
            // 文本输入框，通过$inputText绑定到@State变量inputText
            TextField("请输入", text: $inputText)
            // 标签，显示与输入框相同的内容，也绑定到@State变量inputText
            Text(inputText)
        }
    }
}

@State原理

@State 是SwiftUI中用于声明可变状态的属性包装器。它告诉SwiftUI这个值是视图的内部状态，并且当这个值发生变化时，SwiftUI会自动重新渲染依赖于该状态的视图部分。@State 变量只能在视图结构体内部声明，并且它们的值的改变会触发视图更新。例如在上述代码中，inputText 被声明为 @State 变量，当用户在 TextField 中输入内容导致 inputText 值改变时，包含 Text 视图的部分会因为依赖 inputText 而自动重新渲染以显示最新的值。

@Binding原理

@Binding 用于在视图之间传递对状态的引用，实现数据的双向绑定。当一个视图需要修改另一个视图的状态时，可以使用 @Binding。在上述代码中虽然没有直接展示 @Binding 的跨视图传递，但如果有一个子视图需要操作 inputText ，就可以通过 @Binding 传递。@Binding 实际上是一个对 State 的引用，它使得多个视图可以共享和修改同一个状态值，进而实现双向绑定。比如，假设有一个子视图 SubView 接收 @Binding 类型的 text：

struct SubView: View {
    @Binding var text: String
    var body: some View {
        TextField("子视图输入", text: $text)
    }
}

在主视图 ContentView 中可以这样使用：

struct ContentView: View {
    @State private var inputText = ""
    var body: some View {
        VStack {
            SubView(text: $inputText)
            Text(inputText)
        }
    }
}

这样在 SubView 中的 TextField 输入内容，就会改变 ContentView 中 inputText 的值，同时 Text 视图也会因为 inputText 的改变而更新显示内容，实现了双向绑定。

星途面试题库

面试题：Swift UI框架的数据绑定与响应式编程

知识考点

面试题答案

代码示例

@State原理

@Binding原理