[iOS App Dev Tutorials] SwiftUI - Passing Data (1)

Apple Developer Documentation

1. Passing Data with Bindings

Section 1. Add a Theme View

struct ThemeView: View {
    let theme: Theme
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 4)
                .fill(theme.mainColor)
            Label(theme.name, systemImage: "paintpalette")
                .padding(4)
        }
        .foregroundColor(theme.accentColor)
        .fixedSize(horizontal: false, vertical: true)
    }
}

struct ThemeView_Previews: PreviewProvider {
    static var previews: some View {
        ThemeView(theme: .buttercup)
    }
}

해당 view를 재사용해서 다른 view에서 반복적으로 보이게 할 것이다.

1. SwiftUI View 생성
2. theme 상수를 정의하고, preview에 전달 받을 값 설정
3. ZStack으로 다른 뷰들 보다 앞으로 나와있게 설정
4. 레이블과 Image로 view 설명
5. 글자를 읽기 쉽게하기 위해, foregroundColor(글자 색)을 대비되는 색으로 설정하고 세로 크기를 레이블의 고유 크기와 일치하게 설정
6. 패딩을 주고 마무리

 

Section 2. Add Theme Picker

struct ThemePicker: View {
    @Binding var selection: Theme
    
    var body: some View {
        Picker("Theme", selection: $selection) {
 
        }
    }
}

• 이 Binding은 theme picker를 통해 변화된 theme을 부모 view에 넘겨준다.
• $ 문법을 사용해서 selection을 바인딩을 전달한다.

 

enum Theme: String, CaseIterable, Identifiable {
    ...

    var id: String {
        name
    }
}

• CaseIterable을 사용하면 열거형의 case에 쉽게 접근할 수 있다.
• 테마 이름을 id로 사용하여 CaseItable과 Identifable을 준수하게 한다.

 

Picker("Theme", selection: $selection) {
      ForEach(Theme.allCases) { theme in
          ThemeView(theme: theme)
              .tag(theme)
      }
  }

CaseIterable을 사용했기 때문에 allCases를 사용하고, ForEach로 모든 케이스를 순회한다.

ThemeView의 매개변수로 반복되는 case인 theme를 넣는다.

💡 tag의 값은 열거형 같은 해쉬 가능한 타입이 될 수 있다.

 

struct DetailEditView: View {
    @State private var data = DailyScrum.Data()
    @State private var newAttendeeName = ""
    
    var body: some View {
		...
		ThemePicker(selection: $data.theme)
		}
}

ThemePicker에서 Selection을 @Binding으로 선언하고 Picker에서 $selection으로 해줬기 때문에

상위 view인 DetailEditView에서 선언한 @State data와 같은 구조로 들어갈 수 있다.

 

Theme Picker는 변환된 선택 값을 데이터로 다시 전달한다.