第1章第9节：使用TextField文本输入框接收用户的数据 [SwiftUI快速入门到实战]

• 本课程源码下载：互动教程网 http://hdjc8.com/hdjc/swiftUI/

1. 本节课演示TextField的使用，TextField是一个用来显示可编辑文本界面的控件，主要用于接收和显示来自用户的输入内容。
   

2. 首先添加一个字符串类型属性，用于接收用户在TextField中输入的内容，并在左侧添加@State属性包装器。
   

3. @State是指属性代理，它表示userName属性将和界面上的元素进行绑定。当属性的值发生变化时，SwiftUI会立即通知绑定的视觉元素进行内容的更新。
   

4. 由于给ContentView结构体添加了两个属性，所以需要更新PreviewProvider的属性的值，这样才可以在右侧的预览窗口显示正确的内容。
   

5. 由于userName属性拥有@State属性包装器，所以一旦userName属性的值发生变化，文本视图上的文字内容也会立即刷新。
   

6. 当要恢复同步预览时，Xcode会显示错误提示信息。这是因为程序入口处的代码需要修改，点击此处的错误信息，跳转到错误代码所在的位置。
   

7. 由于ContentView新增了两个属性，所以需要修改此处的初始化方法。
   

8. 此时对初始化代码进行了自动修复，点击此处返回原来的编辑界面。
   

9. 然后点击显示或隐藏导航按钮，隐藏左侧的项目导航区。
   

10. 点击重试按钮，恢复同步预览功能。
    

11. 接着继续代码的编写，依次添加文本视图和TextField等元素。
    

12. 添加另一个文本视图，用来显示nickName属性的值的实时变化。
    

13. 添加一个TextField视图，并设置text属性为userName的值。请注意userName左侧的$符号，该符号是指Binding wrapper绑定包装，表示可以修改属性的值。
    

14. 当用户修改文本输入框里的内容时，在控制台输出属性的值，实时观察属性的值的变化。
    

15. 当用户完成文本框里的输入时，在控制台输出userName属性的值。
    

16. 设置TextField的样式为圆角边框样式。
    

17. 添加第二个TextField，使用户可以输入昵称。由于SwiftUI的所有视觉元素都遵循View协议，可以说所见即View，因此TextField也是一种View。
    

18. 设置VStack视图的内边距，使TextField与屏幕两侧保持一定的距离。
    

19. 由于TextField属于交互控件，所以需要点击此处的实时预览按钮，激活实时预览功能。只有在实时预览模式下，才可以和界面中的元素进行交互操作。
    

20. 在用户名输入框里点击，开始输入用户的名称。
    

21. 使用键盘输入用户的名称。
    

22. 继续输入其它的字符，并观察上方标签里的userName属性值的变化。
    
    
    

23. 完成用户名的输入之后，在昵称输入框里，输入用户的昵称，并观察上方标签里的nickName属性的值的变化。
    

24. 使用SwiftUI，我们不再需要通过手动编码的方式，来刷新界面上的元素。通过绑定包装特性，即可实现界面元素和数据内容的实时绑定。
    

本节源码：

//
//  ContentView.swift
//  Copyright © www.hdjc8.com
//

import SwiftUI

struct ContentView: View {
    @State var username : String = ""
    @State var nickname : String
    
    var body: some View {
        
        VStack{
            
            Text("Your username is \(username)!")
            
            Text("Your nickname is \(nickname)!")
            
            TextField("User Name", text: $username, onEditingChanged: { (value) in
                print("onEditingChanged:\(self.username)")
            }) {
                print("onCommit:\(self.username)")
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            TextField("Nick Name", text: $nickname)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
        }
        .padding()
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(username: "", nickname: "")
    }
}