TextField ― 入力を受け取る

導入

ログイン、検索、メモ。アプリは文字入力であふれています。TextField と @State を $ でつなぐと、入力がそのまま状態に反映されます。

説明

TextField("プレースホルダ", text: $name) の $name に注目。$ は「この@Stateと双方向につなぐ」という印（バインディング）です。入力すると name が変わり、name を使う表示も一緒に変わります。

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            TextField("お名前を入力", text: $name)
                .padding()

            Text("こんにちは、\(name) さん")
                .font(.title2)
                .foregroundColor(.blue)
        }
        .padding()
    }
}

@State private var name = "" は空文字からスタート。プレビューの入力欄に文字を打つと、下の Text の \(name) に即座に反映されます。入力 → 状態 → 表示 が自動でつながる、これがバインディングの威力です。

やってみよう

プレビューの入力欄に名前を打ち込んで、下のあいさつがリアルタイムに変わるのを体験しましょう。Text の文面を「ようこそ (name) 様」などに変えてみるのもおすすめです。

演習

入力欄の下に、打った文字の 文字数 を「〇文字」と表示する Text を足してください（name.count が使えます）。