【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で日本語が打ち込めないことがあります。
その場合でも実機やシミュレータを使えば日本語が打ち込めるようになるので問題ありません。