【SwiftUI】入力フォームを簡単に作れるFormビュー

SwiftUIのFormビューは入力フォームを作るためのコンテナで、簡単にフォームのUIを実装することができる。

Formビューの特徴はListビューと非常に似ており、内部にいくつものビューを並べて配置することができるほか、入力項目の数が縦に多くなれば自動的にスクロールする仕様となっている。

なお、Formビューを使う際の注意としては必ずNavigationViewとセットで使う必要があるということだ。

それでは基本的な実装例を見ていこう。

struct ContentView: View {
    var foods = ["カレー", "焼肉", "ラーメン"]
    @State var name = ""
    @State var selected = 0
    @State var birthDate = Date()
    
    var body: some View {
        NavigationView {
            Form {
                TextField("氏名を入力してください", text: $name)
                Text("こんにちは！\(name)")
                
                DatePicker(selection: $birthDate,
                           label: {Text("生年月日")})
                
                Picker(selection: $selected,
                       label: Text("好きな食べ物")) {
                        ForEach(0..<foods.count) {
                            Text(self.foods[$0])
                        }
                }
                
                Button(action: {}) {
                    Text("確定")
                }
            }
            .navigationBarTitle("入力画面")
        }
    }
}

先に述べたとおり、FormビューはNavigationViewに内包する必要がある。

Formビューには今回4つの項目と、一つのボタンを配置した。

生年月日の項目をタップすると次のようにDatePickerが展開される。

また、好きな食べ物の項目をタップすると、次のように選択用の画面に遷移する。

これはNavigationViewの機能によるもので、フォームでの画面遷移について特に意識せずとも自動的に遷移機能を用意してくれる。

このように、Formビューを使うことで簡単に入力フォームを実装することができるのだ。