Wrapping views with a VStack breaks animation, but using an extension to do the same thing fixes it.
I was having issues with views transitioning between being visible and not visible inside of List. They would appear, but the animation would be jerky. I switched to using a Section, and the animation looked much better. However, the spacing between views and padding wasn't what I wanted. So I wrapped some of the views inside the Section with a VStack.
But first, this is how my view SectionView looks:
struct SectionView<Content: View>: View {
let title: String
@ViewBuilder var content: () -> Content
var body: some View {
Section {
Text(title)
.font(.title3.bold())
content()
}
.listRowInsets(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.contentShape(.rect)
}
}
Below was in a separate view:
SectionView(title: "Title") {
Group {
HStack {
// Stuff here
}
if let selectedMonth {
VStack(alignment: .leading, spacing: 10) {
// Stuff here
}
}
}
.animation(.smooth, value: selectedMonth)
}
This, however, broke the animations again when the VStack appears. It went back to being jerky. So instead of wrapping the content inside of a VStack, I created an extension to do the same thing.
extension View {
@ViewBuilder
func condensed() -> some View {
VStack(alignment: .leading, spacing: 10, content: {
self
})
}
}
So now instead of wrapping it in a VStack, I do this:
if let selectedMonth {
Group {
// Stuff here
}
.condensed()
}
The animations look good again. I just can't figure out why that is. Can anyone help me understand this?