[英]SwiftUI: List is messing up animation for its subviews inside an HStack
I'm making a WatchOS app that displays a bunch of real-time arrival times.我正在制作一个显示大量实时到达时间的 WatchOS 应用程序。 I want to place a view, a real-time indicator I designed, on the trailing end of each cell of a List that will be continuously animated.
我想在列表的每个单元格的尾端放置一个视图,一个我设计的实时指示器,将连续动画。
The real-time indicator view just has two image whose opacity I'm continuously animating.实时指示器视图只有两个图像,我不断为其不透明度设置动画。 This View by itself seems to work fine:
这个视图本身似乎工作正常:
However, when embedded inside a List then inside an HStack the animation seems to be affecting the position of my animated view not only its opacity.但是,当嵌入到列表中然后嵌入到 HStack 中时,动画似乎不仅影响了动画视图的不透明度。
animated view inside a cell单元格内的动画视图
The distance this view travels seems to only be affected by the height of the HStack.这个视图行进的距离似乎只受 HStack 高度的影响。
Animated view code:动画视图代码:
struct RTIndicator: View {
@State var isAnimating = true
private var repeatingAnimation: Animation {
Animation
.spring()
.repeatForever()
}
private var delayedRepeatingAnimation: Animation {
Animation
.spring()
.repeatForever()
.delay(0.2)
}
var body: some View {
ZStack {
Image("rt-inner")
.opacity(isAnimating ? 0.2 : 1)
.animation(repeatingAnimation)
Image("rt-outer")
.opacity(isAnimating ? 0.2 : 1)
.animation(delayedRepeatingAnimation)
}
.frame(width: 16, height: 16, alignment: .center)
.colorMultiply(.red)
.padding(.top, -6)
.padding(.trailing, -12)
.onAppear {
self.isAnimating.toggle()
}
}
}
All code:所有代码:
struct SwiftUIView: View {
var body: some View {
List {
HStack {
Text("Cell")
.frame(height: 100)
Spacer()
RTIndicator()
}.padding(8)
}
}
}
Here is found workaround.这里找到了解决方法。 Tested with Xcode 12.
使用 Xcode 12 测试。
var body: some View {
List {
HStack {
Text("Cell")
.frame(height: 100)
Spacer()
}
.overlay(RTIndicator(), alignment: .trailing) // << here !!
.padding(8)
}
}
Although it's pretty hacky I have found a temporary solution to this problem.虽然它很hacky,但我找到了这个问题的临时解决方案。 It's based on the answer from Asperi.
它基于 Asperi 的答案。
I have create a separate View called ClearView which has an animation but does not render anything visual and used it as a second overall in the same HStack.我创建了一个名为 ClearView 的单独视图,它具有动画但不呈现任何视觉效果,并将其用作同一 HStack 中的第二个整体。
struct ClearView: View {
@State var isAnimating = false
var body: some View {
Rectangle()
.foregroundColor(.clear)
.onAppear {
withAnimation(Animation.linear(duration: 0)) {
self.isAnimating = true
}
}
}
}
var body: some View {
List {
HStack {
Text("Cell")
.frame(height: 100)
Spacer()
}
.overlay(RTIndicator(), alignment: .trailing)
.overlay(ClearView(), alignment: .trailing)
.padding(8)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.