Listの表示内容は Section で区切ることができます。Sectionごとにタイトルをつけてデータを整理することも可能です。今回はSectionの使い方を紹介します。

  • 前回のコードに続けて書く

  • Listブロック内のText3つと画像1つを、それぞれ Section ブロックで包む

  • Sectionに ”テキストセクション” , “画像セクション” とタイトルを追加

  • Listオブジェクトのスタイルを .listStyle( .grouped ) に変更

    • セクションごとにグループ化された表示になる

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import SwiftUI

struct ContentView : View {
    var body: some View {
        List {
            Section( "テキストセクション" ) {
                Text( "あいうえお" )
                Text( "かきくけこ" )
                Text( "さしすせそ" )
            }
            
            Section( "画像セクション" ) {
                Image( "CC0_01" )
                .resizable()
                .scaledToFit()
            }
        }        
        .listStyle( .grouped )
    }
}

結果

swiftui_2_2_3_1.png