【SwiftUI超入門】TextFieldの使い方
この記事の目次
TextFieldとは
TextFieldとは文字を入力するためのUI部品です。
入力された文字は@Stateの付いた変数に格納されます。
TextFieldは
| TextField(プレースホルダー, text: $入力を格納する変数) |
と記述します。
プレースホルダーというのは何も値が入力されていない時に薄く表示される文字のことです。
また、入力を格納する変数の前に『$』をつける必要があります。
実際に使ってみる
それではTextFieldを実際に使ってみましょう。
SwiftUIのプロジェクトを作成してください。
今回は好きな動物を入力したら、『好きな動物は〇〇』といったように表示されるようにしていきます。
まずは入力した値が格納される変数を作りましょう。
ContentViewの中に
| @State var favoriteAnimal = “” |
と記述しましょう。
次に作った変数『favoriteAnimal』の内容が表示されるようにします。
| Text(“Hello, world!”) |
を
| Text(“好きな動物は\(favoriteAnimal)”) |
と書き換えましょう。
これで『favoriteAnimal』の内容が表示されるようになりました。
次にTextFieldを配置しましょう。
VStackの中に記述したいので、まずはTextをVStackで囲みましょう。
Textを『command』を押しながらクリックします。
いろいろ出てくるので、『Embed in VStack』を押しましょう。
するとTextがVStackで囲まれます。
次にVStackの中にTextFieldを記述しましょう。
| TextField(“好きな動物を入力してください”, text: $favoriteAnimal) |
このように記述します。
一つ目の引数に指定した文字列は
『プレースホルダー』となり、TextFieldの背景に薄く表示されます。
プレースホルダーは入力した文字列が格納される変数の値が
空の場合のみ
表示されます。
この状態で実行し、TextFieldに好きな動物を入力するとテキストとして表示されるはずです。
『Live Preview』ボタンを押してみましょう。
TextFieldにカーソルを合わせて、適当に好きな動物を入力すると
入力した文字列がTextに表示されます。
Xcodeのバージョンによっては、Previewで日本語が打ち込めないことがあります。
その場合でも実機やシミュレータを使えば日本語が打ち込めるようなるので大丈夫です。
onSubmit
TextFieldにonSubmitというモディファイアを使えば、TextFieldを使っている状態でリターンキーを押した時に、何らかの処理をすることができます。
onSubmitは
| TextField(“プレースホルダー”, text: $入力を格納する変数) .onSubmit { 行いたい処理 } |
と記述します。
実際に使ってみる
それでは、実際に使ってみましょう。
前回作ったTextFieldのプロジェクトを開いてください。
今回はリターンキーを押したら変数『favoriteAnimal』の中身が空になるようにしてみます。
TextFieldに
| .onSubmit { favoriteAnimal = “”} |
と記述しましょう。
このコードではTextFieldを使っている状態でリターンキーを押したら変数『favoriteAnimal』の値が空になります。
実際にそうなるのか確かめてみましょう。
プレビューで適当に好きな動物を入力してください。
この状態でリターンキーを押すと変数『favoriteAnimal』の値が消えます。
このようにonSubmitを使うとリターンキーを押した時に何らかの処理を行うことができます。