【SwiftUI】Formの使い方

(2020/11/8 更新)

Formは設定画面などのデータ入力に使用するコントロールをグループ化するコンテナとして使用します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.1
【Swift】5.3
【iOS】14.1
【macOS】Catalina バージョン 10.15.7
スポンサーリンク

基本的な使い方

Formを使用すると画面全体を覆うスクロールリストが生成され、そこに指定した部品(View)が画面上部から順番に配置されます。
テキストや画像などの静的部品に加えて、テキストフィールド、トグルスイッチ、ボタンなどのユーザーインタラクティブな部品も配置可能です。
10個より多い部品を並べたい場合は、Group{}や、次節で紹介するSection{}で囲む必要があります。これはSwiftUIの制限を回避する為です。

基本的な使い方

スポンサーリンク

部品のグループ化(Section{})

Section{}で囲むと、Form内の部品を視覚的にグループ化できます。
headerおよびfooterで、各セクションの前後に配置するViewを定義します。

部品のグループ化

スポンサーリンク

NavigationViewとの組み合わせ

FormはNavigationViewととても相性が良いです。
組み合わせて使う事で、次のような利点があります。

  1. タイトルが付けられる。
  2. 画面上部にナビゲーションバーが配置され、画面をスクロールしても、部品がステータスバーに重ならなくなる。
  3. そもそも、Picker等の一部部品は、Form内で使用する場合、NavigationViewありきの仕様となっている。

タイトルの設定

NavigationViewのタイトルは、次のModifierで設定します。

※これまで使っていた.navigationBarTitleはiOS14.0から「非推奨」となりました

NavigationViewそのものではなく、その中に配置したView(ここではForm)で指定する事に注意してください。

タイトルの設定

スポンサーリンク

iOS14からの変更点

Formの表示スタイルがiOS14から変更になりました。
iOS13では配置された部品が画面の両端まで使って表示されていましたが、iOS14では各セクションが角丸のボックスで囲われたようになります。
iOS14で以前と同じスタイルのレイアウトにするには、Formの代わりにListを使う必要があります。

スタイルの変更比較

スポンサーリンク

あわせて読みたい記事

【SwiftUI】NavigationViewの使い方
(2020/11/6 更新)階層的な画面遷移を管理するNavigationViewの使い方を解説します。