To Do List (1)

이전에 사용하던 UIKit이 아닌 SwiftUI를 사용하여 ToDoList를 만들어 본다.

이전에 내배캠에서 하던 양식을 그대로 해서 만들어보려고 한다.

LV 1. ToDoList 화면 만들기

1. 디자인

NavigationBar 추가

우선 추가하기 버튼이 있는곳은 NavigationBar를 사용하여 만들 예정이다.

우선 NavigationBar를 먼저 만들어 본다.

struct ContentView: View {
    var body: some View {
        NavigationStack{
            VStack {
                Text("Test")
            }
            .toolbar {
                ToolbarItem(id: "add", placement: .navigationBarTrailing) {
                    Button("add", systemImage: "plus.app") {
                        print("Add")
                    }
                }
            }
        }
    }
}

아무 생각없이 Toolbar를 먼저 추가했다.

하지만 NavigationBar가 보이지 않았다.

NavigationStack이 빠졌기 때문이다.

그래서 추가를 해주고 나니 보인다.

List(TableView) 추가

UIKit에서는 TableView라고 불렀지만 SwiftUI에서는 List로 사용된다.

struct ContentView: View {
    var body: some View {
        NavigationStack{
            VStack {
                List {
                    Text("test")
                    Text("test1")
                    Text("test2")
                }
            }
            .toolbar {
                ToolbarItem(id: "add",
                            placement: .navigationBarTrailing) {
                    Button("add",
                           systemImage: "plus.app") {
                        print("Add")
                    }
                }
            }
        }
    }
}

Vstack 안에 List를 넣어주었다.

테스트로 3개의 행을 넣어줬다.

2. 데이터 모델링

struct TodoModel {
    let id: Int
    let title: String
    let isCompleted: Bool
}

우선 심플하게 이렇게 구성을 해주었다.

하지만 SwiftData를 사용하기 위해선 class로 사용해야해서 바꿔준다.

import SwiftData

@Model
class TodoModel {
    var id: Int
    var title: String
    var isCompleted: Bool
    
    init(id: Int, title: String, isCompleted: Bool) {
        self.id = id
        self.title = title
        self.isCompleted = isCompleted
    }
}

그리고 앱으로 가서

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

이렇게 Container를 추가해준다.