SwiftUI - 表單

---

---

SwiftUI 對錶單提供了良好的支援。表單是用於在結構化介面中儲存使用者輸入的容器。它們通常用於修改輸入或資料的地方，例如聯絡人列表、設定等。就像列表一樣，它也以垂直可滾動的列顯示資料。因此，在本章中，我們將學習如何建立表單、自定義表單以及更多關於表單的內容。

在 SwiftUI 中建立表單

在 SwiftUI 中，我們可以藉助 Form 元件建立表單。此元件包裝用於資料輸入的所有控制元件，例如文字欄位、切換按鈕、選擇器等。透過這些控制元件，我們可以在表單中新增資料。它以垂直滾動列表顯示資料。

語法

以下是語法：

Form{
   // Form Content
}

示例

以下 SwiftUI 程式建立了一個簡單的表單。

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

輸出

在 SwiftUI 中的表單中新增控制元件

為了使表單更具吸引力和使用者友好性，我們可以在其中新增多個預定義控制元件。它們增強了表單的外觀，並允許使用者根據自己的需求輸入資料。在表單中，您可以使用以下控制元件輸入資料：

控制元件	語法	描述
TextField	TextField("標籤", text: Binding<String>)	它用於建立一個文字欄位，使用者可以在其中輸入字串。
TextEditor	TextEditor(text: Binding<String>)	它用於插入文字編輯器。文字編輯器用於在表單中插入長文字，例如摘要、描述、訊息等。
Toggle	Toggle(isOn: Binding<String>)	它用於建立一個切換按鈕，或者我們可以說它用於建立一個開/關按鈕。它始終表示布林值，即真或假。
Button	Button("標籤", action:)	它用於建立一個按鈕。
Pickers	Picker("標籤", selection:Binding<String>)	它用於建立一個列表，從中我們可以選擇專案。

示例

以下 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() 修飾符，允許我們設定表單的標題。儘管我們也可以使用 VStack 和 Text 設定表單的標題，但 NavigationStack 仍然是建立標題併為表單提供其他功能的最有效和直接的方法。

語法

以下是語法：

NavigationStack{
   Form{
   // Form Content
   }
}.navigationTitle("Form Title")

示例

以下 SwiftUI 程式用於使用 NaivationStack 插入表單標題。

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() 修飾符設定表單的樣式。此修飾符以三種不同的模式更改表單的外觀和行為：自動、分組和列。我們可以根據需要選擇任何一種模式。

語法

以下是語法：

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

它只接受一個引數，即我們要應用的樣式，預定義的樣式如下：

• 自動：它應用預設的系統表單樣式。

• 列：它建立一個非滾動表單，其尾隨對齊的標籤列位於其值的領先對齊列旁邊。

• 分組：它建立表單行的組。

示例

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

輸出