[SwiftUI][iOS]Section（セクション）の使い方

SwiftUI

2021.05.292021.09.21

2021/5/29

「Section（セクション）について知りたい」

「Section（セクション）ってどうやって使えばいいの？」

という人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

SwiftUIのSectionについて解説します。

Section（セクション）とは
使い方
まとめ
おわりに

Section（セクション）とは

Sectionは、ListやFormなどの項目をグループ分けするViewです。

例えば、Sectionを使わない場合、上の画像のように都道府県の名前が並んでいます。

これだとちょっと見にくいので地域ごとに分けたくなりますよね。

この時、項目ごとに分けてくれるのがSectionです。

使い方

Sectionは、リストやフォームに入れこすることで使用出来ます。

また、Sectionにはヘッダーとフッターを指定することが出来ます。

        List {
            Section(header: Text("ヘッダー")) {
                Text("ヘッダーのみ")
            }
            Section(header: Text("ヘッダー"), footer: Text("フッター")) {
                Text("ヘッダーとフッター")
            }
            Section() {
                //コンテンツ
                Text("コンテンツのみ")
            }
            
        }

指定されたヘッダーは、灰色で表示されます。

これとは逆に、指定されたフッターは、そのまま表示されます。

上のコードでは、ヘッダーとフッターにテキストを使用していますが、ヘッダーにはImageビューやHStackでまとめたビューも表示することが出来ます。

            Section(header: HStack {
                Image(systemName: "gear")
                Text("設定")
            }) {
                Text("ヘッダーのみ")
            }