SwiftUI TextField 文字輸入教學

TextField 是最基本的輸入元件，與 Text 不同的是，它需要綁定一個變數來儲存使用者輸入的內容。

基礎綁定 (@State & Binding)

在 SwiftUI 中，輸入框的文字必須綁定到一個狀態變數 (@State)。這顯示了 SwiftUI "Single Source of Truth" (單一數據源) 的設計理念。

struct ContentView: View {
    @State private var name: String = "" // 1. 定義狀態變數

    var body: some View {
        VStack {
            TextField("請輸入你的名字", text: $name) // 2. 綁定到輸入框 (注意 $ 符號)
                .textFieldStyle(.roundedBorder) // 設定外觀樣式
                .padding()
            
            Text("你好，\(name)！") // 3. 顯示輸入的結果
        }
    }
}

當使用者打字時，name 變數會自動更新；反之，如果你用程式碼修改 name，輸入框的內容也會改變。

鍵盤類型與處理

你可以指定輸入框適合的鍵盤類型，例如 Email、數字或密碼。

TextField("電子郵件", text: $email)
    .keyboardType(.emailAddress) // Email 鍵盤
    .textInputAutocapitalization(.never) // 關閉自動大寫
    .autocorrectionDisabled(true) // 關閉自動修正

密碼輸入 (SecureField)

對於密碼，請使用 SecureField 代替 TextField，它會隱藏輸入的文字。

SecureField("請輸入密碼", text: $password)
    .textFieldStyle(.roundedBorder)

聚焦控制 (FocusState)

在 iOS 15 之後，我們可以使用 @FocusState 來控制輸入框的聚焦狀態，或是實作「按下 Return 鍵收起鍵盤」的功能。

struct LoginView: View {
    @State private var username = ""
    @FocusState private var isFocused: Bool // 定義聚焦狀態

    var body: some View {
        TextField("使用者名稱", text: $username)
            .focused($isFocused) // 綁定聚焦狀態
            
        Button("收起鍵盤") {
            isFocused = false // 修改狀態即可控制鍵盤
        }
    }
}

多行輸入 (TextEditor)

如果你需要一個可以輸入多行文字的區域（類似 <textarea>），請使用 TextEditor。

TextEditor(text: $bio)
    .frame(height: 200) // 通常需要給定高度
    .border(.gray, width: 1)

掌握文字輸入是製作互動式 App 的第一步。