SwiftUI基础组件之TextField详解

小洋人最happy

于 2025-02-19 09:15:00 发布

阅读量1.1k

点赞数 37

文章标签： swiftui textfield oncmommit onEditChanged onChange

本文链接：https://blog.youkuaiyun.com/u010358168/article/details/145703664

版权

文章目录

一、简介

TextField 是 SwiftUI 提供的一个视图，允许用户在界面上输入和编辑文本。它可以与 Swift 的 @State 属性包装器结合使用，实现数据的双向绑定，即用户输入的内容会实时反映在绑定的变量中，反之，变量值的改变也会更新到 TextField 显示上。

二、基本使用

下面是创建一个基本 TextField 的代码示例：

import SwiftUI

struct ContentView: View {
    @State private var inputText: String = ""

    var body: some View {
        VStack {
            TextField("请输入文本", text: $inputText)
               .textFieldStyle(RoundedBorderTextFieldStyle())
               .padding()
            Text("你输入的内容是: \(inputText)")
               .padding()
        }
    }
}

在这里插入图片描述

示例说明：

@State private var inputText: String = ""：定义了一个 @State 变量 inputText，用于存储用户输入的文本，初始值为空字符串。
TextField("请输入文本", text: $inputText)：创建了一个 TextField 实例，第一个参数 “请输入文本” 是占位符文本，当TextField为空时显示；第二个参数 $inputText 是对inputText变量的绑定，使用 $ 符号来获取其绑定值。
.textFieldStyle(RoundedBorderTextFieldStyle())：为TextField应用了一个圆角边框的样式。
Text("你输入的内容是: \(inputText)")：用于显示用户输入的文本，随着inputText值的变化而更新显示内容。

三常用属性

3.1 文本对齐方式（multilineTextAlignment）

可以使用 multilineTextAlignment 修饰符来设置 TextField 中文本的对齐方式，可选值有 .leading（左对齐）、.center（居中对齐）、.trailing（右对齐）等。

import SwiftUI

struct ContentView: View {
    @State private var inputText: String = ""

    var body: some View {
        TextField("请输入文本", text: $inputText)
           .multilineTextAlignment(.center)
           .textFieldStyle(RoundedBorderTextFieldStyle())
           .padding()
    }
}

在这里插入图片描述

3.2 键盘类型（keyboardType）

在 SwiftUI 中，TextField 的 keyboardType 属性用于指定当用户在文本字段中输入时，应该显示哪种类型的键盘。这可以帮助优化用户输入体验，因为不同的输入场景可能需要不同类型的键盘布局。例如，输入电话号码时，数字键盘比标准键盘更合适。

keyboardType 是一个 UIKeyboardType 枚举类型，以下是一些常用的键盘类型：

.default: 默认键盘，一般用于常规文本输入。
asciiCapable: 提供一个能够输入 ASCII 字符的键盘。
.numbersAndPunctuation: 包含数字和标点符号的键盘。
.URL: 专为 URL 输入设计的键盘，包含斜杠和点等常用符号。
.numberPad: 仅包含数字的键盘，适用于纯数字输入场景，如 PIN 码。
.phonePad: 适用于电话号码输入的键盘，包含数字和一些常用的电话号码符号。
.namePhonePad: 适用于输入人名和电话号码的键盘。
.emailAddress: 专为电子邮件地址输入设计的键盘，包含 @ 和 . 等符号。
.decimalPad: 包含数字和小数点的键盘，适用于需要输入小数的场景。
.twitter: 专为 Twitter 输入设计的键盘，包含 @ 和 # 等符号。
.webSearch: 专为网页搜索设计的键盘。
.asciiCapableNumberPad: 提供一个能够输入 ASCII 数字的键盘。

import SwiftUI

struct ContentView: View {
    @State private var email: String = ""

    var body: some View {
        VStack {
            TextField("Enter your email", text: $email)
                .keyboardType(.emailAddress)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your email: \(email)")
        }
        .padding()
    }
}

3.3 自动大写（autocapitalization）

在 SwiftUI 中，TextField 的autocapitalization属性用于控制文本输入时的自动大写行为。这个属性可以帮助开发者根据输入场景优化用户体验，例如在输入人名、句子或其他特定类型的文本时自动大写首字母。

autocapitalization 属性使用的是 TextInputAutocapitalization 枚举，该枚举提供了几个选项来指定自动大写的行为：

.never: 不自动大写任何字符。适用于不需要自动大写的输入场景。
.words: 自动大写每个单词的首字母。适用于输入人名、地名等需要每个单词首字母大写的场景。
.sentences: 自动大写每个句子的首字母。适用于输入完整句子的场景。
.allCharacters: 自动将所有字符大写。适用于需要所有输入字符大写的场景，例如某些代码或标识符输入。

import SwiftUI

struct ContentView: View {
    @State private var name: String = ""

    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .autocapitalization(.words)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your name: \(name)")
        }
        .padding()
    }
}

3.4 语义类型(textContentType)

textContentType属性用于指定文本输入字段的语义类型。这一属性的主要目的是为系统提供关于文本字段内容类型的提示，从而优化自动填充和键盘的建议功能。这在提高用户体验和输入效率方面非常有用，尤其是在需要输入常用信息（如用户名、密码、电子邮件地址等）时。

textContentType 使用的是UITextContentType枚举，该枚举提供了多种选项来描述文本字段的内容类型。以下是一些常用的 textContentType 选项：

.none: 不指定内容类型。
.name: 用户的完整名字。
.namePrefix: 用户名字的前缀（如“Mr.”、“Dr.”等）。
.givenName: 用户的名字。
.middleName: 用户的中间名。
.familyName: 用户的姓氏。
.nickname: 用户的昵称。
.emailAddress: 用户的电子邮件地址。
.telephoneNumber: 用户的电话号码。
.password: 用户的密码。
.newPassword: 用户的新密码，用于注册或更改密码时。
.oneTimeCode: 一次性验证码，通常用于双因素认证。
.URL: URL 地址。
.streetAddressLine1: 街道地址第一行。
.streetAddressLine2: 街道地址第二行。
.addressCity: 城市。
.addressState: 州或省。
.postalCode: 邮政编码。
.countryName: 国家名称。

import SwiftUI

struct ContentView: View {
    @State private var email: String = ""

    var body: some View {
        VStack {
            TextField("Enter your email", text: $email)
                .textContentType(.emailAddress)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your email: \(email)")
        }
        .padding()
    }
}

3.5 textContentType 和 keyboardType区别

3.5.1 textContentType

目的: textContentType 的主要目的是为系统提供关于文本字段内容类型的语义信息。这有助于系统在适当的情况下提供自动填充建议。例如，如果 textContentType 设置为 .emailAddress，系统会在用户输入电子邮件地址时提供自动填充建议。
功能: 它帮助系统识别文本字段的用途，从而提供更智能的自动填充和建议功能。textContentType 可以指定多种内容类型，如姓名、电子邮件、电话号码、密码等。
影响: 主要影响自动填充和输入建议，而不是直接影响键盘布局。

3.5.2 keyboardType

目的: keyboardType 用于指定用户在文本字段中输入时显示的键盘类型。不同的输入场景可能需要不同的键盘布局，例如数字键盘、URL 键盘、电子邮件键盘等。
功能: 它改变了键盘的外观和功能，以适应特定的输入需求。例如，设置为.numberPad会显示仅包含数字的键盘，而设置为 .emailAddress 会显示一个带有@ 和 .的键盘。
影响: 直接影响键盘的布局和可用的按键类型。

3.6 自动更正(disableAutocorrection)

disableAutocorrection 属性用于控制是否启用自动纠正功能。自动纠正是系统提供的一种功能，当用户在输入文本时，系统会尝试根据输入内容提供拼写或语法的建议和更正。如果不指定，系统将使用默认的自动纠正设置，通常是启用状态，具体取决于用户的键盘设置和输入语言。

通过设置disableAutocorrection属性，开发者可以控制是否允许系统对用户输入进行自动纠正。对于某些类型的输入，例如代码、特定术语、名称等，自动纠正可能会导致不必要的更改，因此可以选择禁用。

import SwiftUI

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

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username)
                .disableAutocorrection(true)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your username: \(username)")
        }
        .padding()
    }
}

3.7 编辑状态监听（onEditingChanged）

onEditingChanged 属性用于处理文本字段的编辑状态变化。具体来说，这个属性允许你在用户开始或结束编辑文本字段时执行特定的操作。

功能: 当用户开始或结束编辑 TextField 时，onEditingChanged 会被调用，并传递一个布尔值参数：

true: 表示用户开始编辑文本字段。
false: 表示用户结束编辑文本字段。

用途: 通过 onEditingChanged，你可以在用户交互过程中执行一些特定逻辑，比如验证输入、更新状态、显示或隐藏提示信息等。

使用场景

开始编辑时: 你可能希望在用户开始输入时清除提示文本，或显示某些实时验证消息。
结束编辑时: 你可能需要在用户完成输入后进行输入验证，保存数据，或更新界面状态。

示例：

import SwiftUI

struct ContentView: View {
    @State private var username: String = ""
    @State private var isEditing: Bool = false

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username, onEditingChanged: { editing in
                isEditing = editing
                if editing {
                    print("Started editing")
                } else {
                    print("Ended editing")
                }
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()

            Text(isEditing ? "Editing..." : "Not editing")
        }
        .padding()
    }
}

3.8 提交事件监听（onCommit）

onCommit 属性用于处理用户在完成输入并提交时的操作。具体来说，当用户在键盘上按下“Return”或“Done”键时，onCommit 闭包会被触发。这对于需要在用户完成输入后立即执行某些操作的场景非常有用。

功能: 当用户在 TextField 中按下“Return”或“Done”键时，onCommit 闭包会被调用。你可以在这个闭包中执行任何需要在输入完成后立即进行的操作，比如提交数据、验证输入、触发导航等。

用途: onCommit 常用于处理用户完成输入后的逻辑，比如验证输入、更新数据模型、或进行下一步的界面交互。

使用场景

提交数据: 在用户输入完成后，将数据提交到服务器或存储到本地。
输入验证: 在用户完成输入后立即进行验证，并根据验证结果更新界面或提示用户。
界面导航: 在输入完成后，自动导航到下一个输入字段或界面。

示例：

import SwiftUI

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

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username, onCommit: {
                print("Username entered: \(username)")
                // 在这里可以进行提交或验证操作
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()

            Text("Your username: \(username)")
        }
        .padding()
    }
}

3.9 文本改变监听（onChange）

onChange 是一个非常有用的属性，用于监听和响应文本字段中值的变化。与 onEditingChanged 和 onCommit 不同，onChange 可以在文本内容发生变化时立即执行某些操作，而无需等待用户结束编辑或提交。

功能: 当 TextField 中的文本内容发生变化时，onChange 闭包会被调用。这个属性允许你在用户输入的每个字符变化时执行操作。

用途: 适用于需要实时处理用户输入的场景，比如实时验证、自动保存、动态更新界面等。

使用场景

实时验证: 在用户输入过程中，实时检查输入的有效性，并提供即时反馈。
动态界面更新: 根据用户输入动态更新其他界面元素，比如搜索建议或字符计数。
自动保存: 在用户输入时，自动保存数据到本地存储或远程服务器。

示例-不带参数的闭包：

import SwiftUI

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

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username)
                .onChange(of: username) {
                    // 只关心值变化，不需要新旧值
                    print("Username changed")
                }
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your username: \(username)")
        }
        .padding()
    }
}

示例之带参数的闭包：

import SwiftUI

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

    var body: some View {
        VStack {
            TextField("Enter your username", text: $username)
                .onChange(of: username) { newValue, oldValue in
                    print("Username changed from \(oldValue) to \(newValue)")
                }
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Your username: \(username)")
        }
        .padding()
    }
}

四、综合案例

struct CaseDemoView: View {
    @State private var username: String = ""
    @State private var isEditing: Bool = false
    @State private var characterCount: Int = 0
    @State private var isValid: Bool = true

    var body: some View {
        VStack(spacing: 20) {
            // TextField with multiple properties and handlers
            TextField("Enter your username", text: $username, onEditingChanged: { editing in
                isEditing = editing
            }, onCommit: {
                // Action on commit (Return key pressed)
                validateInput()
                print("Username submitted: \(username)")
            })
            .onChange(of: username) { oldValue,newValue in
                characterCount = newValue.count
                validateInput()
            }
            .disableAutocorrection(true)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()

            // Display character count
            Text("Character count: \(characterCount)")
                .foregroundColor(characterCount > 0 ? .primary : .secondary)

            // Display editing status
            Text(isEditing ? "Editing..." : "Not editing")
                .foregroundColor(isEditing ? .green : .red)

            // Display validation status
            Text(isValid ? "Valid username" : "Username too short")
                .foregroundColor(isValid ? .green : .red)
        }
        .padding()
    }

    // Function to validate the input
    private func validateInput() {
        // Example validation: username must be at least 5 characters
        isValid = username.count >= 5
    }
}

代码说明：

基本输入: 使用 TextField 让用户可以输入用户名。
实时字符计数: 使用onChange来更新字符计数，每次用户输入时都会更新显示。
输入验证: 在 onChange 和 onCommit 中调用 validateInput 函数，检查用户名是否至少有5个字符，并更新验证状态。
禁用自动纠正: 使用 .disableAutocorrection(true) 来禁用自动纠正功能。
编辑状态: 使用 onEditingChanged 来更新isEditing状态，并在界面上显示用户是否正在编辑。
提交操作: 使用onCommit在用户按下“Return”键时进行提交操作，并调用验证函数。
输入变化监听: 使用 onChange 监听 username 的变化，实现动态更新和验证。