[SwiftUI]リスト（list）の「Section（セクション）」って何？

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

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

セクションとは

セクションとは、いくつかのセル（行）をグループ化する役割があります。

どちらかというと、デザインの話になるんですが、関係ある要素をセクションとしてまとめておくほうが見やすくなるのです。

例えば、以下のような部活の部員をまとめるリストがあったとします。

上３人がサッカー部で、下３人は野球部なんです。

部活のようにグループがあるなら、分けた方が見やすくなりますよね。

そこで、使うのがセクションです。

使用法

Sectionのイニシャライザは次のようになっています。

init(header: View , footer: View, content : ( ) -> content)

• header: ヘッダー（見出し）となるビュー
• footer:フッターとなるビュー
• content: グループに属するビュー

基本的に使うのは、グループ名となるheaderとcontentです。

footerは、特殊な事情がない限りは使いません。

具体的な使い方は、グループをSectionの中括弧{ }で囲みます。

以下は、セクションを使った例です。

 List {
            Section(header: Text("サッカー部")) {
                Text("エンドウ")
                Text("ゴウエンジ")
                Text("カゼマル")
            }
            Section(header: Text("野球部")) {
                Text("シゲノ")
                Text("サトウ")
                Text("マエムラ")
            }
        }

セクションを使ったことで、グループ分けされてより見やすくなりました。

まとめ

セクションは、グループがある要素をまとめることができます。

headerでグループ名を指定し、content内にグループに属するビューを定義すれば使用することができます。