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

Apple Developer Documentation

3. Creating the Edit View

Section 1. Update the Data Model

struct Data {
        var title: String = ""
        var attendees: [Attendee] = []
        var lengthInMinutes: Double = 5
        var theme: Theme = .seafoam
    }
    
    var data: Data {
        Data(title: title, attendees: attendees, lengthInMinutes: Double(lengthInMinutes), theme: theme)
    }
}

아래 data는 DailyScrum의 속성 값을 받고 계산된 데이터를 반환한다.

 

Section 2. Add an Edit View for Scrum Details

Form {
    Section(header: Text("Meeting Info")) {
        TextField("Title", text: $data.title)
        HStack {
            Slider(value: $data.lengthInMinutes, in: 5...30, step: 1) {
                Text("Length")
            }
            Spacer()
            Text("\\(Int(data.lengthInMinutes)) minutes")
        }
    }
}

$ 구문을 사용해서 data.title에 바인딩을 해준다.

TextField에 브레이크 포인터를 걸어보니 앱에서 텍스트 필드에 값을 넣어줄 때 마다 실시간으로 data.title에 값이 변한다.

 

Section 3. Display Attendees in the Edit View

Section(header: Text("Attendees")) {
    ForEach(data.attendees) { attendee in
        Text(attendee.name)
    }
    .onDelete { indices in
        data.attendees.remove(atOffsets: indices)
    }
}

onDelete를 사용했기 때문에, 섹션을 슬라이드하면 해당 섹션 인덱스의 참석자가 삭제된다.

remove(atOffets: indices)가 해당 셀을 지우는 역할을 한다.

 

HStack {
    TextField("New Attendee", text: $newAttendeeName)
    Button(action: {
        withAnimation {
            let attendee = DailyScrum.Attendee(name: newAttendeeName)
            data.attendees.append(attendee)
            newAttendeeName = ""
        }
    }) {
        Image(systemName: "plus.circle.fill")
    }
    .disabled(newAttendeeName.isEmpty)
}

TextField의 값을 newAttendeeName으로 동적으로 입력 받은다음, 버튼을 클릭했을 때 그 값으로 새로운 참석자를 생성한다. 그리고 배열에 추가하고 newAttendeeName을 초기화한다.

 

Section 4. Add Accessibility Modifiers

Slider(value: $data.lengthInMinutes, in: 5...30, step: 1) {
    Text("Length")
}
.accessibilityValue("\\(Int(data.lengthInMinutes)) minutes")
Spacer()
Text("\\(Int(data.lengthInMinutes)) minutes")
.accessibilityHidden(true)

슬라이더에 접근성을 추가할 수 있고, Text에 접근성을 숨길 수도 있다.

 

Section 5. Present the Edit View

.sheet(isPresented: $isPresentingEditView) {
    NavigationView {
        DetailEditView()
            .navigationTitle(scrum.title)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") {
                        isPresentingEditView = false
                    }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Done") {
                        isPresentingEditView = false
                    }
                }
            }
    }
}

해당 View를 모달 시트로 전달한다. 상단 툴바와 navigationTitle을 사용하기 위해 NavgationView를 사용했다.

isPresentingEditView가 True이면 모달이 나오고 False가 되면 모달이 내려간다.

모달의 상태도 State로 설정해야하는 것 같다.