SwiftUI 表单创建与样式指南

SwiftUI - 表单

SwiftUI 对表单提供了良好支持。表单是一种用于在结构化界面中收集用户输入的容器，常见于联系人列表、设置等场景。与列表类似，表单以垂直可滚动的列显示数据。本章将介绍如何创建表单、自定义表单及其相关功能。

在 SwiftUI 中创建表单

在 SwiftUI 中，可以使用 Form 组件创建表单。Form 包装了所有数据输入控件，如文本字段、切换按钮、选择器等，允许用户在表单中输入数据。表单数据以垂直滚动列表的形式显示。

语法

以下是创建表单的基本语法：

Form{
   // 表单内容
}

示例

以下 SwiftUI 程序创建了一个简单的表单，包含几个文本项：

import SwiftUI
struct ContentView: View {
   var body: some View {
     Form{
       Text("Name")
       Text("Email")
       Text("Date")
     }
   }
}
#Preview {
   ContentView()
}

在 SwiftUI 中的表单中添加控件

为了使表单更具交互性和用户友好性，可以在其中添加多种预定义控件。这些控件增强了表单外观，并允许用户输入数据。常用控件包括：

示例

以下 SwiftUI 程序演示了如何在表单中添加这些控件：

import SwiftUI
struct ContentView: View {
   @State private var name: String = ""
   @State private var email: String = ""
   @State private var about: String = "Write about yourself..."
   @State private var notification = false
   @State private var city: String = "Delhi"

   var body: some View {
     Form{
       TextField("Enter Name", text: $name)
       TextField("Enter Email", text: $email)
       TextEditor(text: $about)
       Toggle("Notification", isOn: $notification)
       Picker("City", selection:$city){
         ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
            s in Text(s)
         }
       }
       Button("Submit", action:{
         print("Submitted")
       })
     }
   }
}
#Preview {
   ContentView()
}

在 SwiftUI 中的表单中添加导航标题

为表单添加标题有助于标识其用途。可以使用 NavigationStack 来设置表单标题，这是最有效的方法，因为它提供了额外的导航功能。NavigationStack 包裹 Form 组件，并使用 navigationTitle() 修饰符设置标题。

语法

以下是添加导航标题的语法：

NavigationStack{
   Form{
   // 表单内容
   }
}.navigationTitle("表单标题")

示例

以下 SwiftUI 程序展示了如何使用 NavigationStack 为表单添加标题：

import SwiftUI

struct ContentView: View {
   @State private var name: String = ""
   @State private var email: String = ""
   @State private var about: String = "Write about yourself..."
   @State private var notification = false
   @State private var city: String = "Delhi"

   var body: some View {
     NavigationStack{
       Form{
         TextField("Enter Name", text: $name)
         TextField("Enter Email", text: $email)
         TextEditor(text: $about)
         Toggle("Notification", isOn: $notification)
         Picker("City", selection:$city){
            ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
              s in Text(s)
            }
         }
         Button("Submit", action:{
            print("Submitted")
         })
       }.navigationTitle("Employee Data")
     }
   }
}
#Preview {
   ContentView()
}

在 SwiftUI 中设置表单样式

SwiftUI 允许通过 formStyle() 修饰符自定义表单样式。此修饰符支持三种模式：automatic、grouped 和 columns，用于改变表单的外观和行为。

语法

formStyle() 修饰符的语法如下：

func formStyle<S>(_ style: S) -> some View where S : FormStyle

预定义的样式包括：

• automatic: 应用默认的系统表单样式。
• columns: 创建非滚动表单，其中标签和值分别对齐显示。
• grouped: 创建分组形式的行。

示例

以下 SwiftUI 程序演示了如何使用 formStyle() 设置表单样式：

import SwiftUI

struct ContentView: View {
   @State private var name: String = ""
   @State private var email: String = ""
   @State private var about: String = "Write about yourself..."
   @State private var notification = false
   @State private var city: String = "Delhi"

   var body: some View {
     NavigationStack{
       Form{
         TextField("Enter Name", text: $name)
         TextField("Enter Email", text: $email)
         TextEditor(text: $about)
         Toggle("Notification", isOn: $notification)
         Picker("City", selection:$city){
            ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
              s in Text(s)
            }
         }
         Button("Submit", action:{
            print("Submitted")
         })
       }.navigationTitle("Employee Data").formStyle(.automatic)
     }
   }
}
#Preview {
   ContentView()
}

通过上述方法，可以灵活创建和定制 SwiftUI 表单，以满足不同的应用需求。