Does the Apple Tutorial for SwiftUI have an error? Or is it an Xcode bug?

user_13299183 0
Viewed 200

In the Apple Tutorial for SwiftUI, under Animating Views and Transitions, what shows on the preview at the end of the tutorial (bottom of the page) isn't what happens when I download the project files and run it on Xcode.

Tutorial: https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

Project Files (you can download from the tutorial page as well):
https://docs-assets.developer.apple.com/published/4790d3c55e/AnimatingViewsAndTransitions.zip

The problem: At the end of the tutorial, in HikeView, when you press "Heart Rate", "Pace" or "Elevation", the graph should change to the respective graph (which is what they show in the preview). However, when I run it on Xcode, the graph just shifts up and down without any other changes.

When I tried to fix the problem on my own I noticed that removing .transition(.slide) from HikeGraph.swift seemed to solve the problem. But why does this transition cause that issue and is there a way to make the graphs work as intended without sacrificing the slide transition?

I am seeking a fix for the graphs, and if possible, a reason as to why the transition was causing the graphs to work incorrectly.

swiftui swift xcode ios
1 Answers

This can be solved without removing the .transition(.side)

Use :

ForEach(data.indices, id: \.self) { index in
    GraphCapsule(
        index: index,
        height: proxy.size.height,
        range: data[index][keyPath: self.path],
        overallRange: overallRange)
    .colorMultiply(self.color)
    .transition(.slide)
    .animation(.ripple(index: index))
}

instead of:

ForEach(data.indices) { index in
        GraphCapsule(
            index: index,
            height: proxy.size.height,
            range: data[index][keyPath: self.path],
            overallRange: overallRange)
        .colorMultiply(self.color)
        .transition(.slide)
        .animation(.ripple(index: index))
    }

ForEach needs an identifier to properly identify the views created, hence without the identifier, the animation is not working perfectly.

user_23858060
Related