今回は 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) 文字")
}
}
}以上
コメントを残す