【SwiftUI】TextFieldの使い方

テキスト入力に使うTextField()の使い方を解説します。

【図0:タイトル】

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.1

基本的な使い方

最初の引数には入力域が空の場合に表示される文字列(プレースホルダー)を指定します。
一般的にはそこに何を入力すべきかを表す文字列が入ります。
プレースホルダーが不要の場合は””(空文字)を指定します。

2つめの引数textは、入力された文字列を格納するString型のプロパティを指定します。
ここで使用するプロパティは値が変更できるように、@State等で宣言しておく必要があります。
また、頭に$をつける事でプロパティの値では無く参照を渡し、TextField()がプロパティの値を更新可能にする意味があります。

@Stateについて、詳しくはこちらの記事を参照して下さい。

【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。

使用例

TextField()で入力した文字列が、リアルタイムにText()メッセージに反映されるサンプルです。

【図1:標準的な使い方】

イベントを取得する

イベントを取得するための、引数が2つあります。

onEditingChanged
TextField()に変更が発生したタイミングで実行される処理をクロージャーで指定します。
クロージャーは引数としてブール値を受け取り、変更開始時にはtrueが、変更終了時にはfalseが渡ります。

onCommit
ユーザーがアクションを起こしたタイミングで実行する処理をクロージャーで指定します。
通常はリターンキーが押されたタイミングになります。

使用例

名前を入力するフォームのサンプルです。
次の3つのイベントを処理しています。

  • 入力が終了したタイミングで文字列のトリミングを実行。
  • リターンキーが押されたら、必須入力チェックを行い、メッセージを表示。
  • 入力が開始されたタイミングで、エラーメッセージをクリア。

【図2:イベントを取得する】

TextFieldで使えるModifier

TextFieldで使える代表的なModifierを紹介します。

表示スタイルの指定

TextField()に丸みのある長方形の枠を付加します。
現時点のiOS13では、このタイプか、デフォルトの「枠無し」しか選択できません。

キーボード指定

表示するソフトウェアキーボードを指定します。
次のようなキーボードが指定可能です。

.numberPad 数値のみのキーボード
.decimalPad 小数点入力可能な数値キーボード
.phonePad 電話番号入力用のキーボード
.URL URLエントリ用に最適化されたキーボード
.asciiCapable 標準のASCII文字キーボード
.numbersAndPunctuation 数字と句読点キーボード

最後に

様々な場面で使う事が多いTextField()ですが、一工夫入れる事で使いやすでアプリの使いやすさが変わりますので、しっかりと使い方を覚えておきましょう。

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント