我正在嘗試構建一個包含多個專案的視圖，這些專案應該彼此同步；例如，如果一項為 25%，則其他三項應為 50%、75% 和 100%。
剛開始使用的天真選項.delay(delay)似乎完美地作業，但是一旦我切換應用程式，不同的影片都被重置為完全偏移（不再有任何偏移）。我嘗試了許多hacky解決方法，包括：
- 當視圖被背景化/恢復時切換整個影片容器；這不起作用。（我認為是因為容器與影片狀態一起保留，即使它不可見。）
- 使用
DispatchQueue.main.asyncAfter(); 這與影片沒有任何不同（因為我認為這是內部影片狀態本身丟失。）
請注意，我根本沒有投資于這個特定的解決方案；非常歡迎有關解決此問題的更好方法的任何建議。
| 切換應用前 | 切換應用后 |
|---|---|
 |
 |
struct MyRepeatingItemView: View {
var delay: Double
@State
var isTranslated = false
var body: some View {
Color.red
.opacity(0.2)
.frame(width: 256, height: 256)
.scaleEffect(isTranslated ? 1 : 0.01)
.onAppear {
withAnimation(Animation.linear(duration: 4).repeatForever(autoreverses: false).delay(delay)) {
isTranslated.toggle()
}
}
}
}
struct MyRepeatingContainerView: View {
var body: some View {
ZStack {
Color.blue
.frame(width: 256, height: 2)
Color.blue
.frame(width: 2, height: 256)
MyRepeatingItemView(delay: 0.0)
MyRepeatingItemView(delay: 1.0)
MyRepeatingItemView(delay: 2.0)
MyRepeatingItemView(delay: 3.0)
}
}
}
uj5u.com熱心網友回復：
不同步視圖的解決方法是將它們全部放在一個視圖中，并且該視圖同時同步所有內容。我花了一些時間來制定模式，但這里是：
struct MyRepeatingItemView: View {
@State var isTranslated = false
var body: some View {
ZStack {
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 256)
.opacity(isTranslated ? 0 : 0.25)
.scaleEffect(isTranslated ? 1 : 0.75)
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 256)
.opacity(0.25)
.scaleEffect(isTranslated ? 0.75 : 0.5)
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 256)
.opacity(0.25)
.scaleEffect(isTranslated ? 0.5 : 0.25)
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 256)
.opacity(0.25)
.scaleEffect(isTranslated ? 0.25 : 0)
}
.onAppear {
withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
isTranslated.toggle()
}
}
}
}
struct MyRepeatingContainerView: View {
var body: some View {
ZStack {
Color.blue
.frame(width: 256, height: 2)
Color.blue
.frame(width: 2, height: 256)
MyRepeatingItemView()
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/324358.html