SwiftUI: Animate layout changes when using Layout (iOS 16/macOS 13) - swiftui

Question

I'm using the new Layout protocol and try to animate the views when the layout changes. My layout it similar to this example and does not require any arguments from the parent view (so there are no states that are passed into it): https://swiftwithmajid.com/2022/11/16/building-custom-layout-in-swiftui-basics/
So far I was only able to do it by using the .animation modifier on Layout which triggers a deprecation warning:
MyLayout {
...
}
.animation(.default)
What is the correct way to do this? There seems to be nothing I can pass as value in the animation modifier to get rid of the deprecation warning. I also tried using withAnimation in placeSubviews but that does not work.
EDIT: Added link to example layout.
Here's the full code from Majid's tutorial + animation modifier:
struct ContentView: View {
var body: some View {
FlowLayout {
ForEach(0..<5) { _ in
Group {
Text("Hello")
.font(.largeTitle)
Text("World")
.font(.title)
Text("!!!")
.font(.title3)
}
.border(Color.red)
}
}
.animation(.default)
}
}
struct FlowLayout: Layout {
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
var totalHeight: CGFloat = 0
var totalWidth: CGFloat = 0
var lineWidth: CGFloat = 0
var lineHeight: CGFloat = 0
for size in sizes {
if lineWidth + size.width > proposal.width ?? 0 {
totalHeight += lineHeight
lineWidth = size.width
lineHeight = size.height
} else {
lineWidth += size.width
lineHeight = max(lineHeight, size.height)
}
totalWidth = max(totalWidth, lineWidth)
}
totalHeight += lineHeight
return .init(width: totalWidth, height: totalHeight)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
var lineX = bounds.minX
var lineY = bounds.minY
var lineHeight: CGFloat = 0
for index in subviews.indices {
if lineX + sizes[index].width > (proposal.width ?? 0) {
lineY += lineHeight
lineHeight = 0
lineX = bounds.minX
}
subviews[index].place(
at: .init(
x: lineX + sizes[index].width / 2,
y: lineY + sizes[index].height / 2
),
anchor: .center,
proposal: ProposedViewSize(sizes[index])
)
lineHeight = max(lineHeight, sizes[index].height)
lineX += sizes[index].width
}
}
}

Answer 1

So the animation is dependent on the content size, especially its width. You can get that with a GeometryReader and use its width as the animation value.
struct ContentView: View {
var body: some View {
GeometryReader { geo in
FlowLayout {
ForEach(0..<5) { _ in
Group {
Text("Hello")
.font(.largeTitle)
Text("World")
.font(.title)
Text("!!!")
.font(.title3)
}
.border(Color.red)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center) // to balance the GeometryReader effect
.animation(.default, value: geo.size.width)
}
}
}