SwiftUi的TextField怎么用

使用SwiftUI的TextField

SwiftUI是苹果在2019年发布的全新UI框架，它提供了一种声明式、简洁和直观的方式来构建用户界面。TextField是SwiftUI中的一个视图，用于接受用户的文本输入。

创建一个简单的TextField

要创建一个TextField，首先需要导入SwiftUI框架，并在视图中添加一个TextField视图。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("请输入文本", text: $text)
            .padding()
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

上面的代码中，我们创建了一个名为ContentView的视图，并在其中添加了一个TextField视图。通过使用@State属性包装器，我们将text属性声明为可变状态，并在TextField中使用$前缀将其绑定到文本字段。padding()方法用于设置TextField的内边距，.textFieldStyle(RoundedBorderTextFieldStyle())用于设置TextField的样式为圆角边框样式。

处理TextField的文本输入

当用户输入文本时，我们可以通过onEditingChanged和onCommit闭包来处理TextField的文本输入。onEditingChanged闭包在用户开始或停止编辑TextField时被触发，onCommit闭包在用户点击Return键时被触发。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("请输入文本", text: $text, onEditingChanged: { isEditing in
            // 处理开始或停止编辑时的逻辑
            if isEditing {
                // 开始编辑
            } else {
                // 停止编辑
            }
        }, onCommit: {
            // 处理点击Return键的逻辑
        })
        .padding()
        .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

在上面的代码中，我们通过添加onEditingChanged闭包和onCommit闭包来处理开始或停止编辑TextField以及点击Return键的逻辑。

设置TextField的键盘类型和样式

TextField提供了许多不同的键盘类型和样式供选择。要设置键盘类型和样式，可以使用keyboardType()和textContentType()修饰符。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("请输入文本", text: $text)
            .padding()
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .keyboardType(.numberPad) // 设置键盘类型为数字键盘
            .textContentType(.creditCardNumber) // 设置文本内容类型为信用卡号码
    }
}

在上面的代码中，我们使用.keyboardType(.numberPad)将键盘类型设置为数字键盘，并使用.textContentType(.creditCardNumber)将文本内容类型设置为信用卡号码。

限制和格式化TextField的输入

我们还可以通过使用autocapitalization()、disableAutocorrection()、multilineTextAlignment()和textFieldStyle()修饰符来限制和格式化TextField的输入。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("请输入文本", text: $text)
            .padding()
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .autocapitalization(.none) // 禁用自动大写
            .disableAutocorrection(true) // 禁用自动纠正
            .multilineTextAlignment(.center) // 设置文本对齐方式为居中
            .textFieldStyle(PlainTextFieldStyle()) // 设置文本字段样式为普通样式
    }
}

在上面的代码中，我们使用.autocapitalization(.none)将自动大写功能禁用，.disableAutocorrection(true)禁用自动纠正功能，.multilineTextAlignment(.center)将文本对齐方式设置为居中，.textFieldStyle(PlainTextFieldStyle())将文本字段样式设置为普通样式。

自定义TextField的外观

通过使用foregroundColor()、background()和font()修饰符，我们可以自定义TextField的外观。

import SwiftUI

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