SwiftUI WatchOS: ¿La animación se comporta de manera extraña cuando se coloca dentro de una lista?
Tengo esta animación de pulsaciones a continuación, la cual funciona bien por sí sola, pero cuando la coloco dentro de una List
, entonces la animación de los círculos pulsantes es correcta pero todos los círculos también se mueven verticalmente desde la parte superior hacia el centro de la pantalla. Fuera de una list
, los círculos permanecen en el centro. ¿Por qué una list
está causando esto y cómo puedo solucionarlo?
import SwiftUI
struct HeartRatePulseView: View {
@State var animate = false
@Environment(\.scenePhase) private var scenePhase
func circlesColor() -> Color {
Color.blue
}
var body: some View {
VStack(spacing: -3) {
ZStack {
ZStack {
GeometryReader { geometry in
ZStack {
Circle().fill(circlesColor().opacity(0.25)).frame(width: geometry.size.width, height: geometry.size.height).scaleEffect(self.animate ? 1 : 0.01)
Circle().fill(circlesColor().opacity(0.35)).frame(width: geometry.size.width * 0.79, height: geometry.size.height * 0.79).scaleEffect(self.animate ? 1 : 0.01)
Circle().fill(circlesColor()).frame(width: geometry.size.width * 0.60, height: geometry.size.height * 0.60)
}
.frame(width: geometry.size.width, height: geometry.size.height)
}
}
.onAppear { self.animate = true }
.onChange(of: scenePhase, perform: { newValue in
if newValue == .active {
self.animate = true
} else {
self.animate = false
}
})
.animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : .default)
}
}
.frame(height: 145)
}
}
struct HeartRatePulseView_Previews: PreviewProvider {
static var previews: some View {
List {
HeartRatePulseView()
}
.listStyle(.carousel)
}
}
davy.ai
El problema probablemente se debe al hecho de que la
List
se está desplazando, lo que hace que elGeometryReader
recalcule la posición delZStack
que contiene los círculos. Una posible solución es mover elGeometryReader
fuera de laList
, de manera que no se vea afectado por el desplazamiento. Por ejemplo:De esta manera, el
GeometryReader
solo se calcula una vez y los círculos permanecerán en el centro incluso cuando se desplace laList
. Sin embargo, esto puede no funcionar bien si hay otras vistas que necesitan mostrarse fuera de laList
. Otra solución podría ser utilizar unScrollView
personalizado que no afecte la posición de los círculos, o ajustar el tamaño y la posición de los círculos en función de la posición de desplazamiento de laList
.