소개

Card의 내용은 쭉 임시의 데이터를 두고 있었으므로, 이번은 리얼의 데이터와 바꾸는 작업을 합니다.
또한 Visual Effect Blur에서 iPad의 배경 투명도를 시험해보십시오.

완성품↓

목차

데이터 모델 추가

Visual Effect Blur

요약

참고문헌

데이터 모델 추가 · 우선은 Card의 내용을 범용할 수 있도록, CourseDetail.swift 를 새롭게 작성해, 흰색 괄호중의 List를 가져옵니다. 　 　

· CourseDetail.swift 에 selectedItem 와 namespace 는 존재하지 않기 때문에 CourseView.swift 로부터 인수를 받아야 합니다.

CoursesView.swift

if selectedItem != nil {
   ZStack(alignment: .topTrailing) {
        CourseDetail(course: selectedItem!, nameSpace: namespace)

   CloseButton()
..........
}

CoursesDetail.swift

var course: Course = courses[0]
var nameSpace: Namespace.ID

    var body: some View {
        VStack {
            ScrollView {
                CourseItem(course: course)
                    .matchedGeometryEffect(id: course.id, in: nameSpace)
                    .frame(height: 300)
                VStack {
                    ForEach(courseSections) { item in
                        CourseRow(item: item)
                        Divider() //区切り
                    }
                }
                .padding()
            }
        }
        .background(Color("Background 1"))
        .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
        .matchedGeometryEffect(id: "container\(course.id)", in: nameSpace)
        .edgesIgnoringSafeArea(.all)
    }
}

・ 9번째 의 때, data model Course.swift 를 만들었으므로, 그것과 같이 다른 data model 을 더합니다.
· 실제 업무의 경우에는 aws/firebase 또는 벤더가 제공한 API에서 데이터를 읽는 것이 일반적입니다. 지금처럼 데이터를 치는 경우는, 뭔가 수정이 있었을 경우에 1회 1회 릴리스 할 필요가 있으므로, 주의해 주세요.
　

· 두 번째 때 작성한 CourseRow.swift는 이번에 추가한 데이터 모듈을 사용합니다.
· 이것으로 데이터 모듈의 사용 회전이 완료됩니다.

CoursesView.swift

var item: CourseSection = courseSections[0]

var body: some View {
    HStack(alignment: .top) {
        Image(item.logo)
            .renderingMode(.original)
            .frame(width: 48.0, height: 48.0)
            .imageScale(.medium)
            .background(item.color)
            .clipShape(Circle())
            .foregroundColor(.white)
        VStack(alignment: .leading, spacing: 4.0) {
            Text(item.title)
                .font(.subheadline)
                .bold()
            Text(item.subtitle)
                .font(.subheadline)
                .bold()
        }
        Spacer()
    }
}

　

Visual Effect Blur · WWDC2020 샘플 앱 Fruta 에 Visual Effect Blur 를 사용하여 무료 라이센스를 위해 원래 소스 코드를 가져옵니다.
　

・조속히 사용해 봅니다.

CoursesView.swift

if selectedItem != nil {
    ZStack(alignment: .topTrailing) {
        CourseDetail(course: selectedItem!, nameSpace: namespace)

        CloseButton()
            .padding(.trailing, 16)
            .onTapGesture {
                withAnimation(
                    .spring()) {
                    show.toggle()
                    selectedItem = nil
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        isDisabled = false
                    }
                }
            }
    }
    .zIndex(2)
    .frame(maxWidth: 500)
    .frame(maxWidth: .infinity)
    .background(VisualEffectBlur().edgesIgnoringSafeArea(.all))

　 　 　

・ Fruta 로부터 다운로드한 소스 코드를 보면, 배경의 스타일은 많은 선택사항이 있습니다.


CoursesView.swift

background(VisualEffectBlur(blurStyle: .dark).edgesIgnoringSafeArea(.all))

요약 소스 코드 Github

참고문헌

Design Code --- SwiftUI for iOS 14

htps //w w. 안쵸 rbぉgs. 이 m /에서 원하는 ls / 6