SwiftUIのチュートリアルを試す(Save data )

基本的な構造を作って行きます。まず表示するデータの内容を決めます。以下、名前と誕生日。新規ファイルを作りコードを書いて行きます。

import Foundation

struct Friend {
    let name: String
    let birthday: Date   
}

作ったデータを表示する部分を作ります。

import SwiftUI

struct ContentView: View { 
    @State private var friends: [Friend] = [   
        Friend(name: "Elton Lin", birthday: .now),
        Friend(name: "Jenny Court", birthday: Date(timeIntervalSince1970: 0)) 
    ]

    var body: some View {   
        NavigationStack {       
            List(friends, id: \.name) { friend in             
                HStack {                 
                    Text(friend.name)
                    Spacer()
                    Text(friend.birthday, format: .dateTime.month(.wide).day().year()) 
                }
            }
            .navigationTitle("Birthdays")
        }
    }
}

これを実行した場合は以下となります。

入力を受け付ける部分を作って行きます。

Listのモディファイアとしてセーフエリアに表示できるようにして行きます。

.safeAreaInset()

入力する項目は名前と誕生日。名前の直接入力と誕生日は選んで入力できるようにします。

 .safeAreaInset(edge: .bottom) {  
                VStack(alignment: .center, spacing: 20) {
                    Text("New Birthday")
                        .font(.headline)
                    DatePicker(selection: $newDate, in: Date.distantPast...Date.now, displayedComponents: .date) {
                        TextField("Name", text: $newName)  
                            .textFieldStyle(.roundedBorder)
                    } 
                }   
            }

これを新しく追加、保存するボタンを作ります。ボタンを押すと配列に追加し、入力欄を空欄にします。

 Button("Save") {
                        let newFriend = Friend(name: newName, birthday: newDate)
                        friends.append(newFriend)
                        
                        newName = ""
                        newDate = .now
                    }     

全体です。

        .safeAreaInset(edge: .bottom) {  
                VStack(alignment: .center, spacing: 20) {
                    Text("New Birthday")
                        .font(.headline)
                    DatePicker(selection: $newDate, in: Date.distantPast...Date.now, displayedComponents: .date) {
                        TextField("Name", text: $newName)  
                            .textFieldStyle(.roundedBorder)
                    } 
                    Button("Save") {
                        let newFriend = Friend(name: newName, birthday: newDate)
                        friends.append(newFriend)

  　　　　　　　　　　　    newName = ""
                        newDate = .now
                    }     
                    .bold()
                }   
                .padding()
                .background(.bar)
            }

ここからが本番。データの永続化、保存ができるようにしていきます。

最初に作ったデータの内容の

import Foundation
import SwiftData

@Model
class Friend {

    let name: String
    let birthday: Date

    init(name: String, birthday: Date) {
        self.name = name
        self.birthday = birthday
    }
}

起動時に最初に読み込まれるコードを編集して行きます。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

を変更して行きます。

import SwiftData

.modelContainer(for: Friend.self)

を追加して

import SwiftUI
import SwiftData

@main
struct BirthdaysApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .modelContainer(for: Friend.self)
        }
    }
}

とします。

ContentView()に

import SwiftData

を追加。

friends.append(newFriend)

を

context.insert(newFriend)

全て

import SwiftUI
import SwiftData

struct ContentView: View {
    @Query(sort: \Friend.birthday) private var friends: [Friend]
    @Environment(\.modelContext) private var context

    @State private var newName = ""
    @State private var newDate = Date.now

    var body: some View {
        NavigationStack {
            List(friends) { friend in
                HStack {
                    if friend.isBirthdayToday {
                        Image(systemName: "birthday.cake")
                    }

                    Text(friend.name)
                        .bold(friend.isBirthdayToday)
                    Spacer()
                    Text(friend.birthday, format: .dateTime.month(.wide).day().year())
                }
            }
            .navigationTitle("Birthdays")
            .safeAreaInset(edge: .bottom) {
                VStack(alignment: .center, spacing: 20) {
                    Text("New Birthday")
                        .font(.headline)
                    DatePicker(selection: $newDate, in: Date.distantPast...Date.now, displayedComponents: .date) {
                        TextField("Name", text: $newName)
                            .textFieldStyle(.roundedBorder)
                    }
                    Button("Save") {
                        let newFriend = Friend(name: newName, birthday: newDate)
                        context.insert(newFriend)

                        newName = ""
                        newDate = .now
                    }
                    .bold()
                }
                .padding()
                .background(.bar)
            }            
        }
    }
}