SwiftUI - TextField
SwiftUI 支持各种类型的预定义 UI 控件,textfield 就是其中之一。Textfield 控件是一种特殊类型的控件,它显示一个可编辑的文本字段,用户可以在其中输入值。
它通常用于登录或注册表单、搜索栏、数字输入、反馈等。它可以接受不同类型的文本,例如纯文本、安全文本、电子邮件等,以及数字值。它也可以以各种方式设置样式。
在 SwiftUI 中创建 Textfield
在 SwiftUI 中,我们可以借助 TextField View TextField View 创建一个文本字段。此视图创建一个文本字段,以文本的形式从用户那里获取输入值。
它通常需要一个占位符文本,当字段为空时会显示该文本,它可以帮助用户了解要在字段中输入什么,以及一个保存输入值的状态变量。我们还可以编辑字段中输入的数据。
语法
以下是语法 −
TextField( _ titleKey: LocalizedStringKey, text: Binding Variable )
参数
此视图使用以下参数 −
titleKey: 表示字段的用途。
text: 表示将显示的文本。
重载方法
以下是 TextField 视图常用的重载方法 −
TextField | 说明 |
---|---|
TextField(_:text:) | 用于创建一个文本字段,其中的文本标签由给定的文本生成字符串。 |
TextField(_:text:prompt:) | 用于创建带有文本标签和提示的文本字段。 |
TextField(_:value:format:prompt:) | 用于创建将格式样式与标签一起应用于有界值的文本字段。 |
TextField(_:text:axis:) | 用于创建带有可滚动文本字段的文本字段。 |
示例
以下 SwiftUI 程序创建带有标签和占位符文本的文本字段。
import SwiftUI struct ContentView: View { @State private var fname : String = "" @State private var lname : String = "" @State private var contact : String = "" @State private var age : String = "" var body: some View { VStack{ TextField("Enter First Name", text: $fname) TextField(text: $lname, label: {Text("Enter Last Name ")}) TextField("Contact Number", text: $contact, prompt: Text("Contact Number")) TextField("Enter Age", text: $age) } } } #Preview { ContentView() }
输出

在 SwiftUI 中设置 TextField 的样式
众所周知,每个 UI 控件都有其默认样式,当用户未对其使用任何特定样式时,它们将显示这些样式,TextField 也是如此。它也有其默认样式,但我们可以在 textFieldStyle() 修饰符的帮助下更改文本字段的默认样式。
此修饰符可以使用自定义样式或标准样式来设置文本字段的样式。除了 textFieldStyle() 修饰符之外,我们还可以使用其他修饰符(例如 .background()、.foregroundStyle()、font() 等)来设置给定文本字段的样式。
语法
以下是语法 −
func textFieldStyle(_ style: S) -> some View
参数
它只接受一个参数,即文本字段的样式。它可以是预定义的,例如 automatic、plain、roundedBorder 等,或者符合 textFieldStyle 协议的自定义样式。
示例
以下 SwiftUI 程序用于设置文本字段视图的样式。
import SwiftUI struct ContentView: View { @State private var fname: String = "" @State private var lname: String = "" @State private var contact: String = "" @State private var age: String = "" @State private var submit = false var body: some View { VStack { Form { // Text Fields TextField("Enter First Name", text: $fname) .textFieldStyle(RoundedBorderTextFieldStyle()) .foregroundColor(.brown) .textInputAutocapitalization(.characters) TextField("Enter Last Name", text: $lname) .textFieldStyle(PlainTextFieldStyle()) .background(Color.yellow) .foregroundColor(.black) .textInputAutocapitalization(.characters) TextField("Contact Number", text: $contact, prompt: Text("Contact Number")) .textFieldStyle(RoundedBorderTextFieldStyle()) .foregroundColor(.mint) TextField("Enter Age", text: $age) .textFieldStyle(DefaultTextFieldStyle()) .border(Color.mint, width: 2) // Submit button Button(action: { Submit() }) { Text("Submit") .font(.title) .frame(maxWidth: 100, alignment: .center) .padding() .background(.green) .foregroundStyle(.white) .cornerRadius(10) }.padding(.top, 10) // Display Message if submit { Text("Form is Submitted") .font(.headline) .foregroundColor(.mint) } } } .padding() } func Submit() { if !fname.isEmpty && !lname.isEmpty { submit = true } else { submit = false } } } #Preview { ContentView() }
输出
