【SwiftUI】공식 Tutorials 「Animating Views and Transitions」의 해설 Part.1

5765 단어 XcodeSwiftSwiftUI

이 기사는 무엇입니까?



Section1 「Add Hiking Data to the App」로 작성하는 뷰의 코드를 읽어 보았습니다.

환경



macOS 11.2.1
Xcode 12.4
Swift 5.3

HikeView



HikeView 정의
struct HikeView: View {
    var hike: Hike
    @State private var showDetail = false

    var body: some View {
        VStack {
            HStack {
                HikeGraph(hike: hike, path: \.elevation)
                    .frame(width: 50, height: 30)
                    .animation(nil)

                VStack(alignment: .leading) {
                    Text(hike.name)
                        .font(.headline)
                    Text(hike.distanceText)
                }

                Spacer()

                Button(action: {
                    self.showDetail.toggle()
                }) {
                    Image(systemName: "chevron.right.circle")
                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .padding()
                }
            }

            if showDetail {
                HikeDetail(hike: hike)
            }
        }
    }
}

HikeView의 모양


HikeView를 구성하는 뷰 계층 구조


상태 변수 showDetail의 거동


Button(action: {
    self.showDetail.toggle()                
}) {
    ...
}
if showDetail {
    HikeDetail(hike: hike)            
}

좋은 웹페이지 즐겨찾기