swiftui 首次登录网络权限 swift 输入

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

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



45. 
    



46. 
    



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



50. 使用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: "")
    }
}