【SwiftUI】Formビュー

はじめに

SwiftUIのFormビューの使い方です。Formは入力フォームなどでよく使われます。
⚠️本記事は入力フォームの作り方ではなくFormビューの使用や使い方に関しての記事です。

基本的なFormの使い方

Formの中にサブビューを設置します。最も単純なものは以下です。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Form {
            Text("Hello, world!")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

サブビューは10個まで入れられます。これはSwiftUIの仕様ですべてのビューにおいて10個までと決まっています。

Form {
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
}

Sectionとの組み合わせ

11個以上サブビューを入れる場合はGroupやSectionビューを使用します。Groupで囲むと見た目は変わりません。htmlでいうdivタグに近いものと考えています。一方でSectionはひとつのかたまりのようになり見た目が変わります。ちょうどiOS標準の設定アプリがSectionを利用してかたまりごとに区切られています。

Form {
    Section {
        Text("Hello, world!")
	Text("Hello, world!")
	Text("Hello, world!")
    }

    Section {
        Text("Hello, world!")
        Text("Hello, world!")
	Text("Hello, world!")
	Text("Hello, world!")
	Text("Hello, world!")
	Text("Hello, world!")
	Text("Hello, world!")
    }
}

NavigationViewとの組み合わせ

これもiOS標準の設定アプリと同様にFormはNavigationViewと組み合わせて使うのが一般的です。NavigaitonViewはタイトルとボタンを持つことができ、ユーザーが何かアクションを行ったときに新しいビューを表示する機能もあります。タイトル表示のために利用する場合はNavigationViewの中のFormに.navigationTitle("タイトル名")のモディファイヤをつければよいです。

NavigationView {
    Form {
        Section {
            Text("Hello, world!")
        }
        Section {
            Text("Hello, world!")
        }
    }
        .navigationTitle("SwiftUI") // タイトルを設定
}

ヘッダーとフッター

Sectionにはヘッダーとフッターをつけることができます。Formにつけるとエラーになるので注意。
iOS14以上ではヘッダーにアルファベットを使うとデフォルトで大文字になってしまうようなのですが、Sectionに.textCase(nil)のモディファイヤをつければ解決します。

stackoveflowの記事 （下記記事内のヘッダー、フッターの書き方は現在推奨されていません。）
SwiftUI Section header - use non uppercase?

NavigationView {
    Form {
        Section {
            Text("Hello, world!")
        } header: {        // ヘッダーの設置
            Text("Section 1")
        }
        Section {
            Text("Hello, world!")
        } footer: {        // フッターの設置
            Text("Section 2")
        }
    }
        .navigationTitle("SwiftUI")
}