SwiftUI中TextField和TextEditor的使用

在SwiftUI中，TextField是用于接收用户输入的文本框组件。它允许用户在应用程序中输入文本，并可以与其他视图和数据进行交互。TextField提供了丰富的样式和功能，使得用户输入变得简单而灵活。TextEditor是一个多行文本输入控件，当你希望用户输入多行文本时，可以使用它。

TextField的使用

TextField通常需要一个类似于提示的占位符文本，以及一个接受用户输入的状态变量(通常是一个被@State修饰的String类型的值)。
比如下面这段简单的代码，设置了默认的缺省提示文字username，并且绑定了username这个属性，用于记录用户输入的内容。

struct TextFieldDemo: View {
  @State var username: String = ""

  var body: some View {
    NavigationView {
      VStack {
        TextField("username", text: $username)
          .padding()

        Spacer()
      }
    }
  }
}

TextField样式

SwiftUI中的TextField样式（textFieldStyle）主要有以下几种：

1. PlainTextFieldStyle：简单的文本框样式，没有背景或边框。
   示例代码：.textFieldStyle(PlainTextFieldStyle())
2. RoundedBorderTextFieldStyle：带有圆角边框的文本框样式。
   示例代码：.textFieldStyle(RoundedBorderTextFieldStyle())
3. DefaultTextFieldStyle：默认的文本框样式，根据系统和环境自动选择合适的样式。
   示例代码：.textFieldStyle(DefaultTextFieldStyle())
   

通过这种简单的设置，估计很难满足设计的要求，所以还要结合其他修饰符的使用，比如背景色，前景色，圆角，边框等等。

关于颜色特别说明一下：
.foregroundColor()：设置输入的文字的颜色。
.background()：整个输入框的背景颜色。
.colorMultiply()：输入框内部输入部分的颜色。

colorMultiply()是SwiftUI中的一个修饰符，用于修改视图的颜色。具体来说，colorMultiply()会将视图的颜色与指定的颜色进行混合，从而改变视图的整体颜色效果。

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .foregroundColor(.yellow)
            .colorMultiply(.red)
    }
}

比如上面这个代码，文字的颜色就会变为偏橘黄色。

在TextField中，虽然设置.colorMultiply()能改变输入框内部的颜色，但是会和设置的.foregroundColor()混合，不能达到我们想要的效果。比如下面代码和效果图。

混合后文字的颜色不是红色的。所以在用.colorMultiply()的时候还是要小心。

修改缺省提示文字的样式：
在创建TextField的时候，选择带prompt参数的初始化方法，如下：

TextField("username",
      text: $username,
      prompt: Text("enter your username")
          .foregroundColor(.red)
          .font(.subheadline)
          .fontWeight(.bold)
        )

其中prompt参数设置了一个Text组件，并且设置了颜色，字体等信息，这个prompt就是设置缺省文字。

TextField修饰符

TextField("enter username", text: $username)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .textContentType(.telephoneNumber)
  .keyboardType(.numberPad)
  .autocorrectionDisabled()

.textContentType()文字内容修饰符是设置我们希望文本框输入的内容类型，如emailAddress邮箱地址、URL链接地址或者telephoneNumber电话号码等.

.keyboardType()键盘类型修饰符，是当我们在真机或者模拟器中使用点击文本框时，设置唤起的键盘的类型。这里我们假设这是一个输入电话号码的文本框，我们希望输入时，iOS 的软键盘就自动切换为数字格式的键盘。

.autocorrectionDisabled()禁用自动纠正修饰符，接收Bool类型的值，当值 true 时，则唤起软键盘的时候就会禁用软键盘在输入时，iOS 自动纠正输入的内容。

SecureField使用

SecureField是用于接收用户输入的安全文本框组件，通常用于输入敏感信息，如密码。
SecureField隐藏用户输入的文本内容，用圆点或其他符号代替，保护用户的隐私和安全。

SecureField("Enter password", text: $password)

onEditingChanged和onCommit

TextField有两个回调方法：

onEditingChanged: @escaping (Bool) -> Void

onEditingChanged: TextField在用户开始编辑文本和完成编辑文本后调用onEditingChanged闭包。闭包接收一个指示编辑状态的布尔值，用户开始编辑时为true，完成编辑时为false。

onCommit: @escaping () -> Void = {})

当用户按回车键时，TextField调用onCommit闭包。

具体使用如下代码：

struct TextFieldDemo: View {
  @State var username: String = ""

  var body: some View {
    NavigationView {
      VStack(spacing: 30.0) {

        TextField("username", text: $username, onEditingChanged: { isEditing in
          print("isEditing: \(isEditing)")
        }, onCommit: {
          print("Edit finished")
        })
          .textFieldStyle(RoundedBorderTextFieldStyle())
          .textContentType(.telephoneNumber)
          .keyboardType(.numberPad)
          .autocorrectionDisabled()

        Spacer()
      }
      .padding()
    }
  }
}

TextField Formatter（格式化）

在SwiftUI中，可以使用TextField的初始化方法中的formatter参数来设置文本框的格式化器（Formatter）。格式化器用于控制文本框中输入文本的格式，例如限制输入字符、添加特定格式等。以下是关于如何使用formatter参数的说明：

TextField("Enter amount", value: $amount, formatter: NumberFormatter())

前两个参数无需多说，NumberFormatter()是一个NumberFormatter实例，用于格式化文本框中的数值输入，Formatter还有很多种，常见的有NumberFormatter，其他的就看需求了，这里不赘述了。

Formatter作用：

• 限制输入：Formatter可以限制用户输入的内容，如只允许输入数字。
• 格式化显示：Formatter可以控制文本框中数值的显示格式，如小数位数、千位分隔符等。
• 数据转换：Formatter可以将用户输入的文本转换为特定类型的数据，如将文本转换为数值类型。

TextEditor的使用

在SwiftUI中，TextEditor是一个多行文本输入控件，当你希望用户输入多行文本时，可以使用它，例如在笔记应用程序或聊天应用程序中，用户可以输入多行消息。TextEditor组件的行为很像UIKit中的UITextView。

创建TextEditor，需要创建一个状态变量来存储用户的输入，然后将该状态绑定到TextEditor。这里有一个例子:

很多用于TextField的修饰符同样适用于TextEditor。

写在最后

本篇文章比较简单，有点杂乱，哈哈，希望能够帮助到有需要的朋友，如果觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。