SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


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

输出

TextField

在 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()
}

输出

TextField