[iOS App Dev Tutorials] SwiftUI - Navigation and Modal Presentation (1)

Apple Developer Documentation

1. Creating a Navigation Hierarchy

Section 1. Set Up Navigation

@main
struct ScrumdingerApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                ScrumsView(scrums: DailyScrum.sampleData)
            }
        }
    }
}

struct ScrumsView: View {
    let scrums: [DailyScrum]
    
    var body: some View {
        List {
            ForEach(scrums) { scrum in
                NavigationLink(destination: Text(scrum.title)) {
                    CardView(scrum: scrum)
                        .listRowBackground(scrum.theme.mainColor)
                }
            }
        }
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ScrumsView(scrums: DailyScrum.sampleData)
        }
    }
}

ScrumView_Preview와 메인 앱의 View를 NavigationView로 감싼다.

NavigationLink를 통해서 다음 화면으로 넘어가게 만들고 값도 넘겨준다.

 

Section 2. Create the Detail View

struct DetailView: View {
    let scrum: DailyScrum

    var body: some View {
        Text("Hello, World!")
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            DetailView(scrum: DailyScrum.sampleData[0])
        }
    }
}

Struct detailView 안에 scrum안에 변수가 있어서 Previews에서 Struct DetailView 를 호출할 때 안에 변수 값을 매개변수로 넣어줘야한다.

 

struct ScrumsView: View {
    let scrums: [DailyScrum]
    
    var body: some View {
        List {
            ForEach(scrums) { scrum in
                NavigationLink(destination: DetailView(scrum: scrum)) {
                    CardView(scrum: scrum)
                }
                .listRowBackground(scrum.theme.mainColor)
            }
        }
        .navigationTitle("Daily Scrums")
        .toolbar {
            Button(action: {}) {
                Image(systemName: "plus")
            }
            .accessibilityLabel("New Scrum")
        }
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ScrumsView(scrums: DailyScrum.sampleData)
        }
    }
}

Section1 에서 detination을 Text로 했는데 View로 설정해주면 해당 View로 넘어갈 수 있다.

변경 사항에 밑줄을 그어놨다.

 

Section 3. Add Visual Components to the Detail View

import SwiftUI

struct DetailView: View {
    let scrum: DailyScrum

    var body: some View {
        List {
            Section(header: Text("Meeting Info")) {
                Label("Start Meeting", systemImage: "timer")
                    .font(.headline)
                    .foregroundColor(.accentColor)
                HStack {
                    Label("Length", systemImage: "clock")
                    Spacer()
                    Text("\\(scrum.lengthInMinutes) minutes")
                }
                .accessibilityElement(children: .combine)
                HStack {
                    Label("Theme", systemImage: "paintpalette")
                    Spacer()
                    Text(scrum.theme.name)
                        .padding(4)
                        .foregroundColor(scrum.theme.accentColor)
                        .background(scrum.theme.mainColor)
                        .cornerRadius(4)
                }
                .accessibilityElement(children: .combine)
            }
        }
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            DetailView(scrum: DailyScrum.sampleData[0])
        }
    }
}

NavigationView에서 호출한 DetailView를 꾸며보자.

일반 View 처럼 꾸미면 된다.

여기서는 List에 Section을 넣어서 화면을 구성했다.

Section의 매개변수에 header를 넣어줬고, Label과 HStack으로 Section을 채웠다.

결과

 

 

Section 4. Iterate Through Attendees

Section(header: Text("Attendees")) {
    ForEach(scrum.attendees) { attendee in
        Label(attendee.name, systemImage: "person")
    }
}

Section안에 데이터를 ForEach를 사용해서 채운다.

scrum Model에 선언되어 있는 attendees 변수를 들고와 반복을 실행한다.

 

Section 5. Navigate Between Screens

var body: some View {
        List {
            Section(header: Text("Meeting Info")) {
                NavigationLink(destination: MeetingView()){
                    Label("Start Meeting", systemImage: "timer")
                        .font(.headline)
                        .foregroundColor(.accentColor)
                }
               ...
        }
        .navigationTitle(scrum.title)
    }

Section 안에 Label 바깥으로 NavigationLink를 걸어서 Label Section을 클릭하게 되면 MeetingVIew로 넘어간다.