소개

전회는 카드의 애니메이션을 깨끗하게 할 수 있었습니다.
그러나, 카드 1장만의 경우는 그것으로 좋지만, 100장의 경우는 1개 1개 만들 수는 없습니다.
이번에는 이것에 대해 해 나갈 것입니다. 완성품↓

　

목차

Identifiable 프로토콜

요약

참고문헌

Identifiable 프로토콜 · 우선은 데이터 모듈 파일 Course를 작성합니다. ・Identifiable 사용하는 것으로, title나 subtitle 등, 다른 데이터 필드가 변경되어도, id 프로퍼티를 사용하면 특정의 데이터를 식별할 수 있습니다. ・전부는 싣지 않습니다만, 데이터는 course[] 컬렉션에 더해 갑니다. 또한 id는 자동 생성이므로 컬렉션에 준비할 필요가 없습니다. Course.swift struct Course: Identifiable { var id = UUID() var title: String var subtitle: String var color: Color var image: String var logo: String var show: Bool var index: Double } var courses = [ Course ( title: "UI Design for iOS 14", subtitle: "20 sections", color: Color(.blue), image: "Illustration 1", logo: "Logo UI Design", show: false, index: -1 ) ] ・ CoursesView 로 되돌려, 전회의 기사에서는 2번째의 카드를 작성했지만, 100장을 만들고 싶을 때는 당연합니다만, 루프를 사용합니다. · item은 왜 id를 가지는지에 대해, 클로저 를 살펴 보겠습니다.
item에 커서를 맞추고 CTRL+CMD+j 를 누르면 Course 으로 날아갑니다.

・ForEach 로 100장의 카드를 만들었다고 하면, 1장 1장의 내용을 결정하지 않으면 안됩니다.
· matchedGeometryEffect의 식별자는 courses[].id로 바뀝니다. 여기의 인수 20은 몇번째의 카드를 탭해도 0번째의 카드가 열립니다.

CoursesView.swift

if show {
    ScrollView {
         CourseItem()
              .matchedGeometryEffect(
                  id: courses[0].id, in: namespace
               )
              .frame(height: 300)
          VStack {
              ForEach(0 ..< 20) { item in
                  CourseRow()
              }
          }
          .padding()
    }
}

· Course.swift를 작성하여 CourseItem.swift로 정수로 결정한 Image와 Text를 데이터 모듈로 변경합니다.

CoursesItem.swift

var course: Course = courses[0]

    var body: some View {
        VStack(alignment: .leading, spacing: 4.0) {
            Spacer()
            HStack {
                Spacer()
                Image(course.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Spacer()
            }
            Spacer()
            Text(course.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
            Text(course.subtitle)
                .font(.footnote)
                .foregroundColor(Color.white)
        }

· 아직 CoursesView.swift로 돌아가서 CourseItem()에 인수를 추가합니다.

CoursesView.swift

ScrollView {
      VStack(spacing: 20) {
           ForEach(courses) { item in
                CourseItem(course: item)
                     .matchedGeometryEffect(
                         id: item.id, in: namespace, isSource: !show
                     )
                     .frame(width: 335, height: 250)
            }
       }
       .frame(maxWidth: .infinity)
}
if show {
   ScrollView {
        CourseItem(course: courses[0])
           .matchedGeometryEffect(id: courses[2].id, in: namespace)
           .frame(height: 300)
        VStack {
             ForEach(0 ..< 20) { item in
                  CourseRow()
          }
    }
    .padding()
}

요약 · 이번에는 Identifiable 프로토콜을 사용하여 Course Struct를 고유하게 식별할 수 있도록 했다. 그러나 선택한 CourseItem은 여전히 ​​courses[0]처럼 고정 상태로 유지됩니다. 다음에 이것을 해결합니다. 소스 코드 Github

참고문헌

Design Code --- SwiftUI for iOS 14