【SwiftUI】Formの使い方

(2021/09/26 更新)

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

スポンサーリンク

環境

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

【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

基本的な使い方

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

基本的な使い方

スポンサーリンク

部品のグループ化(Section)

Sectionを使うと、Form内の部品を視覚的にグループ化できます。
Sectionは、Formの他にList、Picker等でも使用可能です。
header:およびfooter:で、各セクションの前後に配置するViewを定義します。
header:およびfooter:は共に省略可能です。

なお、Xcode12以前で使用していた、以下の形式はDeprecated(非推奨)となりました。

使用例

部品のグループ化

ヘッダーに英字を使う場合の注意点(iOS14以降)

iOS14以降でヘッダーに英字を使うと、デフォルトが大文字表示になります。
大文字変換させたくない場合は、次のように .textCase() モディファイアを指定して下さい。

UntitledImage

スポンサーリンク

NavigationViewとの組み合わせ

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

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

タイトルの設定

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

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

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

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの使い方
(2022/03/09 更新)Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEa...
【SwiftUI】NavigationViewの使い方
(2020/11/6 更新)階層的な画面遷移を管理するNavigationViewの使い方を解説します。