前回でデータの変更が可能になりました. 今回はデータを追加する方法を紹介します. まずデータを増やすためのボタンを設置します. ボタンの設置のためリストのヘッダをカスタマイズします.

  • ContentViewを開き, List内のSectionの書き方を変更する
    • Sectionの( “景色写真” )を消す
    • Section { ~ } の後に header: { Viewデザイン } を追加する
      • 「景色写真」の文字は, headerの中のTextで表示する
      • ヘッダに文字だけでなく, 他のView部品を入れられるようになる

コード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
27
28
29
30
31
32
33
34
35
36
37
38
39

import SwiftUI

struct ContentView: View {
    @State var photos:[PhotoData] = [
        PhotoData( type:"景色", imageName:"CC0_01", title:"景色1", message:"森と山です" ),
        PhotoData( type:"景色", imageName:"CC0_04", title:"景色2", message:"きれいな湖です" ),
        PhotoData( type:"景色", imageName:"CC0_06", title:"景色3", message:"フィレンツェです" ),
        PhotoData( type:"景色", imageName:"CC0_07", title:"景色4", message:"ひまわりです" ),
        PhotoData( type:"景色", imageName:"CC0_10", title:"景色5", message:"海に日が沈みます" )
    ]
    
    var body: some View {
        List {
            Section {
                ForEach( $photos ) { bind_photo in
                    NavigationLink( destination:{
                        SceneryDetail( data:bind_photo )
                    },
                    label: {
                        SceneryRow( data:bind_photo.wrappedValue )
                    })
                }
            }
            header: {
                HStack {
                    Text( "景色写真" )
                    
                    Spacer()
                    
                    Image( systemName:"plus" )
                    .font( .title2 )
                    .foregroundStyle( Color.accentColor )
                }
            }
        }
        .listStyle( .grouped )
        .navigationTitle( "写真集" )
    }
}

結果

swiftui_3_1_2_1.png

ヘッダの右端に ＋マーク が追加できました.

次に＋マークをボタンに変更し, 押した時新しいデータが追加されるような処理を追加します.

  • Buttonのlabel:の中にImage( systemName:”plus” )を入れる
    • ボタンを押した時PhotoDataを新規作成し, new_data変数に格納する
    • photosに .append を使って新しいデータを追加する

コード2

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import SwiftUI

struct ContentView: View {
    @State var photos:[PhotoData] = [
        PhotoData( type:"景色", imageName:"CC0_01", title:"景色1", message:"森と山です" ),
        PhotoData( type:"景色", imageName:"CC0_04", title:"景色2", message:"きれいな湖です" ),
        PhotoData( type:"景色", imageName:"CC0_06", title:"景色3", message:"フィレンツェです" ),
        PhotoData( type:"景色", imageName:"CC0_07", title:"景色4", message:"ひまわりです" ),
        PhotoData( type:"景色", imageName:"CC0_10", title:"景色5", message:"海に日が沈みます" )
    ]
    
    var body: some View {
        List {
            Section {
                ForEach( $photos ) { bind_photo in
                    NavigationLink( destination:{
                        SceneryDetail( data:bind_photo )
                    },
                    label: {
                        SceneryRow( data:bind_photo.wrappedValue )
                    })
                }
            }
            header: {
                HStack {
                    Text( "景色写真" )
                    
                    Spacer()
                    
                    Button {
                        let new_data = PhotoData( type:"景色", imageName:"CC0_06", title:"新規", message:"追加したデータです" )
                        photos.append( new_data )
                    }
                    label: {
                        Image( systemName:"plus" )
                        .font( .title2 )
                        .foregroundStyle( Color.accentColor )
                    }
                }
            }
        }
        .listStyle( .grouped )
        .navigationTitle( "写真集" )
    }
}

＋マークがボタンとして押せるようになり, 押すとデータが追加されます.

＋ボタンを押す前

swiftui_3_1_2_2.png

＋ボタンを押した結果

swiftui_3_1_2_3.png