前回、SwiftUIの重要なしくみである @State を紹介しました。@Stateを用いることで扱えるオブジェクトも増えます。今回紹介する TextField もその1つです。

  • 前回のコードに続けて書く
  • @State var input_text:String = “あいうえお” を追加
  • ユーザが入力できる TextField オブジェクトを追加
    • TextField( “空文字時の表示”, text: つなぐ文字列変数 )
    • TextFieldへのユーザ入力によって値の変化が発生する
    • 値の変化を受け入れるため、TextFieldに@Stateの文字列変数を紐づける
      • 値を渡すとき $ をつける
        • 変数input_textが つなぎ先 であることを示す
  • Text( input_text ) を追加
    • input_textの変化を画面に反映する

@Stateの変数をつなぐことでTextFieldが動作します。まずコードを書き動かしてみましょう。次に結果の下にある説明を読んでください。

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import SwiftUI

struct ContentView: View {
    @State var message:String = ""
    @State var input_text:String = "あいうえお"
    
    var body: some View {
        VStack {
            Text( message )
            .frame( width: .infinity, height: 50 )
            
            Button { 
                print( "押しました" )
                message = "押しました"
            }
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }

            Link( 
                "外部リンク",
                destination: URL( string:"https://wdkk.co.jp/" )!
            )
			.padding( 20 )

            TextField( "プレイスホルダー", text: $input_text )
            .padding( 10 )
            .border( .gray, width: 1.0 )
            .padding( 20 )
            
            Text( input_text )
            .padding( 20 )
            .frame( width: .infinity, height: 50 )
        }
    }
}

結果

swiftui_1_4_5_1.png

TextFieldへの入力後

swiftui_1_4_5_2.png

@StateとBinding

TextFieldはユーザの入力で値が変化するオブジェクトです。よって変更可能な領域(@Stateの変数)を用意する必要があります。今回のコードでは @State var input_text をつくりTextFieldにつなげます。これを Binding と呼びます。@Stateの変数に$をつけるとBinding変数 に変化し、TextFieldにつなげるようになります。

別の視点でみれば 「$をつけて渡した変数は、どこかで自由に書き換えられて良い許可を出している」 と捉えることもできます。