【SwiftUI】Formの使い方

FormはiOSの「設定」アプリのようなUIを実現するViewタイプです。
データ入力用の部品(View)をグループ化して表示できます。

【図1:設定アプリ】

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2

基本的な使い方

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

【図2:基本的な使い方】

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

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

【図3:部品のグループ化】

NavigationViewとの組み合わせ

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

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

タイトルの設定

NavigationViewのタイトルは、次のView修飾子で設定します。

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

【図4:NavigationViewとの組み合わせ】

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント