When: Embedding a Image with a symbol effect in a stack view in SwiftUI, and putting this in a List
Actual: The symbols animate when scrolling that item in and out of the view
Expected: The symbol doesn't animate until the value changes.
I have the following code which is boiled down from my actual code where the animating value is a @Model object property (other animations work fine when their animation's value is watching the same property.)
I've boiled it down to the below examples:
The top example works as expected (no symbol animations on scroll) The bottom example animates the symbols every time they scroll in to view
#Preview {
VStack {
List {
ForEach(1...100, id: \.self) { index in
Image(systemName: "square.3.layers.3d")
.symbolEffect(.bounce, value: index)
}
}
List {
ForEach(1...100, id: \.self) { index in
HStack {
Image(systemName: "square.3.layers.3d")
.symbolEffect(.bounce, value: index)
}
}
}
}
}
This happens on Mac and iOS.
I'm running Xcode 15.3 RC2 but it also happens in Xcode 15.2
I've found this will happen whether embedding in a HStack, VStack or ZStack but seems fine in a Group.
I've tried adding a id()
modifier to the HStack to give it an explicit identifier but this doesn't seem to work.
Is there something I'm missing here?
For anyone else stuck in this issue see the SO answer I accepted here:
https://stackoverflow.com/a/78106284/1735584
Group docs: https://developer.apple.com/documentation/swiftui/group
Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would.