前回までにListとSectionの使い方を紹介しました。今回はSectionを活かしたスタイルの紹介です。

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

  • Listブロックの.listStyle() の指定を変えて違いを確認する

    • .plain
    • .insetGrouped
    • .sidebar

表示結果はコードの後に示します。

コード

 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( .insetGrouped )
    }
}

結果

.plain

swiftui_2_2_4_1.png

.insetGrouped

swiftui_2_2_4_2.png

swiftui_2_2_4_3.png

.sidebarに必要な追加設定

iOS17以降では.sidebarを使う場合, 各セクションが閉じているかどうかを確認する値の設定が必要になりました.

  • セクションが開いているかどうかを受け取る@StateのBool変数を用意する
  • Sectionを作る時, isExpandedにBool変数を結びつける

コード2

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

import SwiftUI

struct ContentView : View {
    @State var section1Expanded:Bool = false
    @State var section2Expanded:Bool = false
    
    var body: some View {
        List {
            Section( "テキストセクション", isExpanded:$section1Expanded ) {
                Text( "あいうえお" )
                Text( "かきくけこ" )
                Text( "さしすせそ" )
            }
            
            Section( "画像セクション",  isExpanded:$section2Expanded ) {
                Image( "CC0_01" )
                .resizable()
                .scaledToFit()
            }
        }        
        .listStyle( .sidebar )
    }
}