Form ― 設定画面を作る

導入

プロフィール編集、通知設定、環境設定。入力部品を整然と並べた「設定画面」は、Form を使うとiOS標準の見た目で一気に作れます。

説明

Form { ... } は、List に似た入れ物で、入力部品を並べるのに最適化されています。@State と組み合わせて、そのまま動く設定画面になります。

struct ContentView: View {
    @State private var username = ""
    @State private var notify = true
    @State private var volume = 50.0

    var body: some View {
        NavigationStack {
            Form {
                TextField("ユーザー名", text: $username)
                Toggle("通知を受け取る", isOn: $notify)
                Text("音量: \(volume)")
                Slider(value: $volume, in: 0...100)
            }
            .navigationTitle("設定")
        }
    }
}

Form に TextField・Toggle・Slider を並べるだけで、行ごとに区切られた設定画面ができます。値はすべて @State にバインドされているので、操作すればその場で状態が変わります。第6章の状態管理と、この章の一覧・遷移を組み合わせれば、実用的なアプリ画面がもう作れます。

やってみよう

プレビューの各部品を操作してみましょう。Form に Stepper("個数: \(...)", value: ...) のような行を足してみるのもおすすめです。

演習

Form に「ダークモード」を切り替える Toggle を1つ足してください（@State private var dark = false を用意）。