SwiftUI - TextField

SwiftUI 支持各种类型的预定义 UI 控件，textfield 就是其中之一。Textfield 控件是一种特殊类型的控件，它显示一个可编辑的文本字段，用户可以在其中输入值。

它通常用于登录或注册表单、搜索栏、数字输入、反馈等。它可以接受不同类型的文本，例如纯文本、安全文本、电子邮件等，以及数字值。它也可以以各种方式设置样式。

在 SwiftUI 中创建 Textfield

在 SwiftUI 中，我们可以借助 TextField View TextField View 创建一个文本字段。此视图创建一个文本字段，以文本的形式从用户那里获取输入值。

它通常需要一个占位符文本，当字段为空时会显示该文本，它可以帮助用户了解要在字段中输入什么，以及一个保存输入值的状态变量。我们还可以编辑字段中输入的数据。

语法

以下是语法 −

TextField(
   _ titleKey: LocalizedStringKey,
   text: Binding Variable
)

参数

此视图使用以下参数 −

• titleKey: 表示字段的用途。

• text: 表示将显示的文本。

重载方法

以下是 TextField 视图常用的重载方法 −

示例

以下 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()
}

输出