[SwiftUI] 네비게이션 바 버튼 만들기

▼ 우선 데이터를 만들기 위해서 Store 객체를 만듭니다. @Published 선언을 해서 2개의 색상을 만듭니다. updateDisplay 함수는 단순히 색상을 바꾸는 역할을 합니다. 처음 blue, green 색 에서 updateDisplay 함수가 호출되면 red, orange 색으로 바뀝니다.

---

class Store: ObservableObject {
    @Published var colors: [Color] = [.blue, .green]
    
    func updateDisplay() {
        colors = [.red, .orange]
    }
}

---

---

 

 

 

▼ 다음으로 ContentView에 Store() 객체를 생성해서 포함시킵니다.

---

@main
struct Test1App: App {
    @StateObject var store = Store()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(store)
        }
    }
}

---

---

 

 

 

▼ 이제 HomeView를 생성해서 ScrollView에 두개의 Rectangle 뷰를 추가합니다. store에서 가져온 색상으로 각각 색상을 처리합니다. 이제 높이가 400인 박스뷰가 스크롤 뷰에 추가된 것을 확인할 수 있습니다.

---

struct HomeView: View {
    @EnvironmentObject var store: Store
    
    var body: some View {
        ScrollView {
            Rectangle()
                .fill(store.colors[0])
                .frame(height: 400)
            Rectangle()
                .fill(store.colors[1])
                .frame(height: 400)
        }
    }
}

---

HomeView

---

 

 

 

▼ 이제 네비게이션으로 이동할 설정화면을 만듭니다. store를 선언해서 이전 화면에서 전달받습니다. Update Display라는 버튼을 만들어서 store의 updateDisplay() 함수를 호출합니다.

---

struct SettingsView: View {
    @EnvironmentObject var store: Store
    
    var colors: [Color]?
    
    var body: some View {
        Button {
            store.updateDisplay()
        } label: {
            Text("Update Display")
        }
    }
}

---

---

 

 

 

▼ 이제 ContentView를 조금 수정해보겠습니다. toolbar를 추가해서 해당 버튼을 누르면 설정화면으로 이동하게 합니다.

---

struct ContentView: View {
    @EnvironmentObject var store: Store
    
    var body: some View {
        NavigationStack {
            HomeView()
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        NavigationLink {
                            SettingsView(colors: store.colors)
                                .navigationTitle("Settings")
                        } label: {
                            Image(systemName: "swift")
                        }
                    }
                }
        }
    }
}

---

toolbar 추가

---

 

 

 

▼ 코드 작성이 완료되었습니다. 이제 설정 화면에서 Update Display 버튼을 눌러서 Store객체의 데이터를 변경해보겠습니다.

SettingView

---

 

 

 

▼ 뒤로가기 버튼을 눌러서 다시 메인화면으로 돌아왔습니다. 설정 화면에서 색상을 변경하여 메인의 스클롤뷰의 색상이 변경된 것을 확인할 수 있습니다.

Main

---