Apple Developer Documentation
developer.apple.com
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로 넘어간다.
'iOS > iOS App Dev Tutorials' 카테고리의 다른 글
[iOS App Dev Tutorials] SwiftUI - Passing Data (1) (0) | 2022.05.12 |
---|---|
[iOS App Dev Tutorials] SwiftUI - Navigation and Modal Presentation (3) (0) | 2022.05.12 |
[iOS App Dev Tutorials] SwiftUI - Navigation and Modal Presentation (2) (0) | 2022.05.12 |
[iOS App Dev Tutorials] SwiftUI - Views (0) | 2022.05.02 |
[iOS App Dev Tutorials] SwiftUI - SwiftUI Essentials (0) | 2022.05.02 |