前回のコードは「景色画像」だけをphotosに入れていました。前節のように「食べ物写真」もデータに追加したいと思います。photosに食べ物データを追加します。

  • 前回のコードに続けて書く
  • photos:[PhotoData] に食べ物のデータを追加する

コード1

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

import SwiftUI

struct ContentView: View {
    var photos:[PhotoData] = [
        PhotoData( imageName:"CC0_01", title:"景色1", message:"森と山です" ),
        PhotoData( imageName:"CC0_04", title:"景色2", message:"きれいな湖です" ),
        PhotoData( imageName:"CC0_06", title:"景色3", message:"フィレンツェです" ),
        PhotoData( imageName:"CC0_07", title:"景色4", message:"ひまわりです" ),
        PhotoData( imageName:"CC0_10", title:"景色5", message:"海に日が沈みます" ),
        PhotoData( imageName:"CC0_05", title:"ハンバーガーセット", message:"おいしいです" ),
        PhotoData( imageName:"CC0_08", title:"カフェラテ", message:"おちつきます" ),
        PhotoData( imageName:"CC0_09", title:"ケーキ", message:"あまいです" ),
        PhotoData( imageName:"CC0_12", title:"お酒", message:"酔います" )
    ]
    
    var body: some View {
        List {
            Section( "景色写真" ) {
                ForEach( photos ) { photo in
                    SceneryRow( data:photo )
                }
            }
        }
        .listStyle( .grouped )
    }
}

食べ物のデータは追加でき、リストも増えたかと思います。

さて、このままでは問題があります。 セクションは景色写真の中に入ってしまっていて不自然です。また前節のように食べ物写真は別の表示にしたいものです。しかしデータを分けるのはうまくありません。このようにphotosにまとめた上で、データの表示を工夫するにはどうすれば良いか、次回説明します。

結果

swiftui_2_4_2_1.png