SwiftUI-TextField组件学习

TextField 是 SwiftUI 中用于获取用户输入的组件。它通常用于收集文本信息，比如用户名、密码或搜索查询。TextField 可以非常灵活地定制和样式化，支持多种功能，如占位符、输入限制、文本变化监听等。

基本用法

TextField 最基本的用法是绑定一个 String 类型的变量，该变量会自动更新文本框中的内容。

@State private var username: String = ""

var body: some View {
    TextField("Enter username", text: $username)
        .padding()
        .border(Color.gray, width: 1)
}

样式和修饰符

TextField 样式

1. textFieldStyle() - 设置 TextField 的样式

• TextFieldStyle 用来定义输入框的外观。
• 常用的预定义样式：
  • DefaultTextFieldStyle：默认样式，没有特殊的外观变化。
  • RoundedBorderTextFieldStyle：带圆角的边框样式。
  • PlainTextFieldStyle：简单的无装饰样式。

TextField("Enter your text", text: $username)
    .textFieldStyle(RoundedBorderTextFieldStyle())  // 使用圆角边框样式

常用修饰符

1.padding() - 设置内边距

• 为TextField添加内边距。

TextField("Enter your name", text: $name)
    .padding()

2.background() - 设置背景颜色或视图

• 为 TextField 设置背景颜色或视图。

TextField("Enter your email", text: $email)
    .padding()
    .background(Color.gray.opacity(0.1))
    .cornerRadius(5)

3.foregroundStyle() - 设置文本颜色

• 设置TextField中的文本颜色。

TextField("Enter text", text: $input)
    .foregroundStyle(.blue)

4.font() - 设置文本字体

• 设置文本的字体样式。

TextField("Enter text", text: $input)
    .font(.title)

5.frame() - 设置宽度、高度等

• 设置TextField的尺寸。

TextField("Enter your name", text: $name)
    .frame(width: 300, height: 50)

6.border() - 设置边框

• 为TextField添加边框。

TextField("Enter text", text: $input)
    .padding()
    .border(Color.gray, width: 1)

7.cornerRadius() - 设置圆角

• 设置TextField的圆角。

TextField("Enter text", text: $input)
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .cornerRadius(10)

8.opacity() - 设置透明度

• 控制TextField的透明度。

TextField("Enter text", text: $input)
    .opacity(0.8)

9.disabled() - 禁用输入框

• 禁用 TextField，使其不可编辑。

TextField("Enter text", text: $input)
    .disabled(true)

10.lineLimit() - 限制行数

• 设置文本框可以显示的最大行数。

TextField("Enter multiline text", text: $text)
    .lineLimit(2)  // 限制文本框显示2行

11.multilineTextAlignment() - 设置多行文本对齐

• 设置多行文本的对齐方式（如左对齐、居中等）。

TextField("Enter multiline text", text: $text)
    .multilineTextAlignment(.center)  // 文本居中对齐

12.keyboardType() - 设置键盘类型

• 设置TextField显示的键盘类型。

TextField("Enter email", text: $email)
    .keyboardType(.emailAddress)  // 使用邮箱键盘

13.autocapitalization() - 设置自动大写

• 控制TextField在输入时是否自动将首字母大写。

TextField("Enter text", text: $input)
    .autocapitalization(.sentences)  // 自动将句首字母大写

14.autocorrectionDisabled() - 禁用自动纠错

• 禁用自动拼写纠正功能。

TextField("Enter text", text: $input)
    .autocorrectionDisabled(true)  // 禁用自动纠错

15.onChange(of:) - 监听文本变化

• 监听文本框内容的变化，执行某个动作。

TextField("Enter text", text: $input)
    .onChange(of: input) { newValue in
        print("Text changed: \(newValue)")
    }

16.onEditingChanged - 监听编辑状态

• 当 TextField 的编辑状态变化时执行某个动作。

TextField("Enter text", text: $input, onEditingChanged: { isEditing in
    if isEditing {
        print("Started editing")
    } else {
        print("Finished editing")
    }
})

17.onCommit - 监听回车键事件

• 当用户按下回车键时执行某个操作。

TextField("Enter text", text: $input, onCommit: {
    print("Text committed")
})

18.submitLabel() - 设置提交按钮标签

• 在键盘上显示自定义的"提交"按钮。

TextField("Enter text", text: $input)
    .submitLabel(.done)  // 设置为"完成"按钮

19.accentColor()或者tint() - 设置光标颜色

• 设置输入框的光标的颜色(accentColor在未来会被废弃，建议使用tint来设置光标的颜色)

TextField("", text: $username)
                .padding(8)
                .background(Color.gray.opacity(0.1))
                .cornerRadius(5)
                .font(.system(size: 18, weight: .medium))
                .accentColor(.red)
TextField("Enter password",text: $password)
                    .padding()
                    .textFieldStyle(DefaultTextFieldStyle())  // 使用圆角边框样式
                    .tint(.red)                

占位符（Placeholder）

• 占位符用于指示 TextField 中应该输入的内容。它会在用户未输入时显示。当用户开始输入时，占位符会消失。

TextField("Enter your email", text: $email)
    .padding()
    .border(Color.gray)

安全输入框（SecureField）

• SecureField 用于输入密码等敏感信息，输入的内容会被隐藏。

@State private var password: String = ""

var body: some View {
    SecureField("Enter password", text: $password)
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(5)
}

自定义占位符的颜色和字体

ZStack(alignment: .leading) {
            if username.isEmpty {
                Text("Enter your name")
                    .foregroundColor(.gray)  // 设置占位符颜色
                    .font(.system(size: 18, weight: .medium))  // 设置占位符字体
                    .padding(.leading, 8)
            }
            
            TextField("", text: $username)
                .padding(8)
                .background(Color.gray.opacity(0.1))
                .cornerRadius(5)
                .font(.system(size: 18, weight: .medium))
        }
        .padding()