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

6931 단어 XcodeSwiftSwiftUI

이 기사는 무엇입니까?



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

환경



macOS 11.2.1
Xcode 12.4
Swift 5.3

HikeDetail 뷰


struct HikeDetail: View {
    let hike: Hike
    @State var dataToShow = \Hike.Observation.elevation

    var buttons = [
        ("Elevation", \Hike.Observation.elevation),
        ("Heart Rate", \Hike.Observation.heartRate),
        ("Pace", \Hike.Observation.pace)
    ]

    var body: some View {
        return VStack {
            HikeGraph(hike: hike, path: dataToShow)
                .frame(height: 200)

            HStack(spacing: 25) {
                ForEach(buttons, id: \.0) { value in
                    Button(action: {
                        self.dataToShow = value.1
                    }) {
                        Text(value.0)
                            .font(.system(size: 15))
                            .foregroundColor(value.1 == self.dataToShow ? Color.gray
                                                                        : Color.accentColor)
                            .animation(nil)
                    }
                }
            }
        }
    }
}

HikeDetail 뷰의 외관


HikeDetail을 구성하는 뷰 계층 구조


상태 변수 detailToShow의 거동


ForEach(buttons, id: \.0) { value in
    Button(action: {
        self.dataToShow = value.1
    }) {
    Text(value.0)
        .foregroundColor(value.1 == self.dataToShow ? Color.gray : Color.accentColor)
    }                
}

좋은 웹페이지 즐겨찾기