In my test app I have two squares (red and green) that change their size when I click a toggle button. I use two different approaches to change the scale. The red square is scaled using the .visualEffect modifier and the green square is scaled using the .scaleEffect modifier. When I click the button the first time, both squares change size. But when I click again and again, only the green square changes its size. The red square stays the same after the first change. Self._printChanges() show that both views get changes each time. What am I doing wrong? Or is this a bug?
import SwiftUI
import Observation
struct ContentView: View {
@State private var model: Model = Model()
var body: some View {
VStack {
HStack {
RedSquareView()
GreenSquareView()
}
.environment(model)
Button {
model.scaled.toggle()
} label: {
Text("Toggle scale")
}
}
.padding()
}
}
struct RedSquareView: View {
@Environment(Model.self) var model
var body: some View {
let _ = Self._printChanges()
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 100)
.visualEffect { content, geometryProxy in
content.scaleEffect(model.scaled ? 0.5 : 1.0, anchor: .center)
}
.animation(.bouncy, value: model.scaled)
}
}
struct GreenSquareView: View {
@Environment(Model.self) var model
var body: some View {
let _ = Self._printChanges()
Rectangle()
.fill(Color.green)
.frame(width: 100, height: 100)
.scaleEffect(model.scaled ? 0.5 : 1.0, anchor: .center)
.animation(.bouncy, value: model.scaled)
}
}
@Observable
final class Model: Sendable {
var scaled: Bool = false
}
#Preview {
ContentView()
}