TextField 和 SecureField

在 SwiftUI 中，TextField 和 SecureField 是用于获取用户输入的两个重要组件。它们的主要区别在于安全性和数据保护。以下将详细介绍这两个组件的使用方法。

1. TextField

1.1 创建 TextField

TextField 用于接收普通文本输入，通常用于用户名、电子邮件或其他非敏感信息的输入。

示例：简单文本输入框

import SwiftUI

struct TextFieldExample: View {
    @State private var username: String = ""

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username) // 文本输入框
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Text("Hello, \(username)") // 实时显示输入内容
        }
    }
}

1.2 使用 TextField 的属性

  • placeholder：文本框内的提示信息。
  • text：绑定的状态，存储输入的文本。
  • textFieldStyle：可以自定义文本框的样式。

2. SecureField

2.1 创建 SecureField

SecureField 用于接收安全文本输入，例如密码。输入的字符将以圆点形式显示，以保护用户的隐私。

示例：简单密码输入框

struct SecureFieldExample: View {
    @State private var password: String = ""

    var body: some View {
        VStack {
            SecureField("Enter your password", text: $password) // 安全输入框
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Text("Password is set.") // 提示用户密码已设置
        }
    }
}

2.2 使用 SecureField 的属性

  • placeholder：文本框内的提示信息。
  • text：绑定的状态，存储输入的安全文本。

3. 在表单中使用 TextField 和 SecureField

这两个输入框通常可以一起使用，在表单中收集用户信息。

示例：登录表单

struct LoginForm: View {
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {
        Form {
            Section(header: Text("Login")) {
                TextField("Username", text: $username) // 用户名输入框
                SecureField("Password", text: $password) // 密码输入框
                Button("Login") {
                    // 登录操作
                }
            }
        }
    }
}

4. 总结

  • TextField：用于普通文本输入，适合收集非敏感信息。
  • SecureField：用于安全文本输入，适合收集敏感信息，如密码。

通过合理使用这两个输入组件，可以构建安全且用户友好的界面。

Last Updated::