この記事は何？

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)
    }                
}