SwiftUI学习笔记之@State, @Binding

SwiftUI笔记之@State, @Binding

首先看一段代码

//
//  ContentView.swift
//  SwiftUIGuide
//
//  Created by Jeans Oyoung on 2020/4/28.
//  Copyright © 2020 Jeans Oyoung. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    
    @State var input: String = ""
    
    var body: some View {
        VStack {
            Text(input)
                .frame(width: 200,
                       height: 44,
                       alignment: .center)
            Input(placeholder: "请输入", text: $input)
                .frame(width: 200, height: 44)
        }
        .cornerRadius(8)
        .border(Color(.gray))
    }
}

struct Input: View {
    
    let placeholder: String
    @Binding var text: String
    
    var body: some View {
        TextField(placeholder, text: $text)
            .font(Font.system(size: 22))
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

分析

界面显示

• 一个矩形框
• 一行文本, 初始内容为空
• 一个文本输入框, 没有输入时，提示文字为 外部传入的 placeholder内容

交互操作

• 输入文本时, 上面的一行文本会同步显示输入框中的内容

原理

• ContenView中使用到了自定义View(Input)，使用@Binding的方式将input与Input的text进行绑定, 而Input中的输入框又将Input的text与输入的内容进行绑定, 因此输入框内容变化时, 绑定的ContentView.input内容会跟着被修改

• ContenView.input被标记为@State, 表示这个属性的变化会引起重新刷新视图

• 因此, 数据的传输流为:

  TextField输入 -> Input.text -> ContentView.input -> ContentView.VStack.Text

总结

1. 当自定义视图的数据需要外部传入的时候， 使用普通的属性

2. 当自定义的视图需要通过数据变化更新视图时， 对普通属性加上@State修饰

3. 当自定义的视图需要将视图的变化表现在数据的变化时，对普通属性加上@Binding修饰, @Binding 包含了@State的功能, 但一般不会去对@Binding属性做修改