02：SwiftUI-TextField

 

 

正文

import SwiftUI

struct TextFieldPage : View {
    
    /** @State   属性包装器 数据(state)来驱动UI
     1: 监听
     2：重绘body
     
     SwiftUI 管理你声明为状态的任何财产的存储。 当状态值改变时，视图会使它的外观失效并重绘制 body。使用状态作为给定视图的唯一真实来源。
     State 实例不是值本身；它是一种读取和改变 value 的方法。要访问状态的基础值，请使用其 value 属性。
     因此，当你初始化一个标记为 的属性时@State，你实际上并不是在创建自己的变量，而是提示在后台SwiftUI创建“某物”来存储你设置的内容并从现在开始监视它！你@State var只是充当访问此包装器的委托。

     每次写入@State变量时，都会知道它正在监视它。它还将知道变量是否是从's 中读取的。
     使用此信息，它将能够在更改此变量后重新计算在其中引用了该变量的任何内容。
     SwiftUI @State View body View @State body
     */
    @State var name: String = ""
    @State var password: String = ""
    
    let nameText = Text("请填入昵称").foregroundColor(.gray).font(.system(size: 16))
    let pwdText = Text("请填入密码").foregroundColor(.gray).font(.bold(.system(size: 16))())
    
    var body: some View {
        VStack(spacing: 15) {
            HStack {
                Text("昵称：")
                    .foregroundColor(.secondary)
                
                /**
                 使用$前缀可以访问到状态变量或其属性之一的绑定。
                 双向绑定
                 */
                TextField("name:placeHolder", text: $name, onEditingChanged: { (changed) in
                    print("onEditing: \(changed)")
                }, onCommit: {
                    print("userName: \(self.name)")
                    self.endEditing(true)
                })
            }.padding(10).frame(height: 50).textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
            
            HStack {
                Text("密码：").foregroundColor(.secondary)
                SecureField("password:placeHolder", text: $password) {
                    print("Password: \(self.password)")
                    self.endEditing(true)
                }
            }.padding(10)
                .frame(height: 50)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
        }.offset(y: -150)
            .navigationBarTitle(Text("TextField"))

    }
    
    private func endEditing(_ force: Bool) {
        //        UIApplication.shared.keyWindow?.endEditing(force)
        MainApp.keyWindow?.endEditing(force)
    }
}

// https://stackoverflow.com/questions/56491386/how-to-hide-keyboard-when-using-swiftui


#if DEBUG
struct TextFieldPage_Previews : PreviewProvider {
    static var previews: some View {
        TextFieldPage()
    }
}
#endif