Swift・SwiftUI

SwiftUIのTextField(UITextField)の使い方【SwiftUI入門】

今回は TextField のサンプルコードを紹介します。

SwiftUIのTextField(UITextField)の使い方

まず、TextField の定義からです。いくつかイニシャライザーがありますが、使用頻度が高そうと言うことで、今回のサンプルでは以下を使用しています。

TextField(title: StringProtocol, text: Binding<String>, onEditingChanged: (Bool) -> Void, onCommit: () -> Void)

第１引数 title: StringProtocol

プレースホルダーを設定出来ます。

第２引数 text: Binding<String>

@State で宣言した入力中文字列を格納・監視する状態変数を指定します。

第３引数 onEditingChanged: (Bool) -> Void

編集中のイベントです。クロージャー引数として Bool 値が渡されていますが、true は編集が開始されたことを示し、false は編集が終了したことを示します。

第４引数 onCommit () -> Void

編集が確定した（リターンキー押下）時にコールされます。

TextFieldStyle と KeyboardType

表示スタイルは以下の４通りです。

  • PlainTextFieldStyle()
  • RoundedBorderTextFieldStyle()
  • SquareBorderTextFieldStyle()
  • DefaultTextFieldStyle()

Plain〜 は枠なし、RoundedBorder〜は角丸の枠あり、SquareBorder〜は普通の長方形のスタイルです。

キーボードタイプはよく使いそうなのは以下あたりでしょうか。

  • default
  • numberPad
  • phonePad
  • decimalPad
  • emailaddress

その他の公式リファレンスはこちらです。

最後に、冒頭の動画サンプルの全体ソースコードです。入力中かどうかや、文字数を監視し、5文字未満の場合アラートを出すと言う様なことをしています。

struct ContentView: View {
    
    @State private var text = ""
    @State private var editing = "非入力中です。"
    @State private var showAlert = false
    
    var body: some View {
        VStack {
            HStack {
                TextField("5文字以上入力してください。", text: $text, onEditingChanged: { isBegin in
                    if isBegin {
                        self.editing = "入力中です。"
                    } else {
                        self.editing = "非入力中です。"
                    }
                }, onCommit: {
                    if self.text.count < 5 {
                        self.showAlert = true
                    }
                })
                .keyboardType(.default)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(32)
                .alert(isPresented: $showAlert) {
                    Alert(title: Text("エラー"), message: Text("5文字以上入力されていません。"), dismissButton: .default(Text("OK")))
                }
            }
            Text(self.editing)
            Text("入力文字数：\(self.text.count) 文字")
        }
    }
}

以上