![見出し画像](https://assets.st-note.com/production/uploads/images/136628798/rectangle_large_type_2_04e8eb9bd3525aae4f84dc875aa3fe74.png?width=1200)
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")
}
}
}
これを実行した場合は以下となります。
![](https://assets.st-note.com/img/1712607393856-4zDdz6neye.png?width=1200)
入力を受け付ける部分を作って行きます。
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)
}
}
}
}
この記事が気に入ったらサポートをしてみませんか?