第1章第10节：使用SecureField密文输入框接收用户的密码 [SwiftUI快速入门到实战]-CSDN博客

本教程介绍了如何在SwiftUI中使用SecureField来创建一个安全的密码输入框。通过添加@State属性绑定，实现实时显示用户输入的密文，并在用户完成输入后打印密码。此外，还讲解了如何调整代码以适应SecureField，并展示如何在实时预览模式下测试交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

当用户在输入密码时，我们需要使用密文来显示用户输入的内容，这就需要借助SecureField视图。要使用该视图，首先给当前的结构体添加一个属性。
该属性用于存储用户输入的密码，并在属性的左侧添加了一个@State属性代理标记，从而使属性和界面元素进行绑定。
修改当前的文本视图，以实时显示属性的值。这里实时显示密码，只是为了方便演示密文输入框的使用。由于密码属于隐私，通常不会显示密码信息的。
添加一个密文输入框，并设置指定的占位符。同时设置它的text的值为password属性的值，并通过美元符号和password属性进行绑定包装。
当用户完成密码的输入之后，在尾随的闭包语句中，打印用户输入的密码信息。接着点击此处的文件名称，打开文件名称列表。
打开并编辑此处的文件。
由于我们给ContentView添加了一个属性，所以需要修改程序入口处的代码。
对ContentView的初始化代码进行修改，并将password的属性的初始值设置为空。接着返回上一个文件。
然后同样对PreviewProvider的代码进行一些修改。
对ContentView的初始化代码进行修改，将password的属性的初始值设置为空。
设置输入框的边框样式为圆角样式。
由于SecureField属于交互控件，所以需要点击此处的实时预览按钮，激活实时预览功能。只有在实时预览模式下，才可以和界面中的元素进行交互操作。
在密文输入框里点击，开始密码的输入。
使用键盘输入用户的密码。
TextField以明文的方式显示用户输入的字符，而SecureField则以圆点代替显示字符。接着继续输入其它的字符，并观察上方标签里的密码属性值的变化。

SwiftUI快速入门到实战

最后点击此处的实时预览按钮，取消实时预览功能，并结束本节课程。

本节源码：

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

import SwiftUI

struct ContentView: View {
    @State var password : String
    
    var body: some View {
        
        VStack{
            
            Text("Your password is \(password)!")
            
            SecureField("Your password", text: $password) {
                print("Your password is \(self.password)!")
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
        }
        .padding()
        
    }
}

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