SwiftUI 文本输入

在 Swift 语言中，SwiftUI 是一种简洁、直观和声明式的用户界面框架。它可用于构建跨多平台的应用程序，并具有高度自定义和可重用的组件。本文将介绍如何使用 SwiftUI 实现文本输入功能，以及一些相关的概念和技巧。

文本输入控件

SwiftUI 提供了多种文本输入控件，用于接收用户的输入。下面是一些常用的文本输入控件：

TextField

TextField 是 SwiftUI 中最常用的文本输入控件。它允许用户在应用程序中输入单行文本，并可以响应用户输入的变化。

struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        TextField("请输入内容", text: $text)
            .padding()
            .textFieldStyle(.roundedBorder)
上述代码中，我们创建了一个 TextField，并将 $text 绑定到文本输入框的内容。$text 使用了 @State 属性包装器，使得输入内容可以在应用程序中进行状态管理和更新。
为了美化文本输入框，我们使用了 .padding() 方法添加内边距，以及 .textFieldStyle(.roundedBorder) 方法设置输入框的样式。
SecureField
SecureField 用于接收密码输入，它和 TextField 的使用方式类似。
struct ContentView: View {
    @State private var password: String = ""
    var body: some View {
        SecureField("请输入密码", text: $password)
            .padding()
            .textFieldStyle(.roundedBorder)
上述代码中，我们创建了一个 SecureField，并将 $password 绑定到密码输入框的内容。用户输入的密码会被隐藏，以保护用户隐私。
TextEditor
TextEditor 是一个多行文本输入控件，用于接收用户输入的多行文本。它可以自动调整大小，并支持滚动。
struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        TextEditor(text: $text)
            .padding()
            .border(Color.gray, width: 1)
上述代码中，我们创建了一个 TextEditor，并将 $text 绑定到文本框的内容。为了美化文本输入框，我们使用了 .padding() 方法添加内边距，以及 .border() 方法添加边框。
DatePicker
DatePicker 是一个日期选择器，用于接收用户选择的日期。
struct ContentView: View {
    @State private var selectedDate = Date()
    var body: some View {
        DatePicker("选择日期", selection: $selectedDate, displayedComponents: .date)
            .padding()
上述代码中，我们创建了一个 DatePicker，并将 $selectedDate 绑定到选择的日期。displayedComponents 参数可以控制日期选择器展示的组件，如 .date 表示只显示日期。
Picker
Picker 是一个列表选择器，用于给用户提供多个选项供其选择。
struct ContentView: View {
    let options = ["Option 1", "Option 2", "Option 3"]
    @State private var selectedOption = 0
    var body: some View {
        Picker("选择选项", selection: $selectedOption) {
            ForEach(0 ..< options.count) {
                Text(self.options[$0])
        .pickerStyle(SegmentedPickerStyle())
        .padding()
上述代码中，我们创建了一个 Picker，并将 $selectedOption 绑定到选中的选项。我们使用 ForEach 循环遍历所有选项，并使用 Text 显示每个选项的文本。最后，我们使用 .pickerStyle(SegmentedPickerStyle()) 方法设置选择器的样式为分段选择器，并使用 .padding() 方法添加内边距。
Toggle
Toggle 是一个开关控件，用于接收用户的开关选择。