SwiftUIwithAnimation在條件內不起作用

我想要一個只有有條件可見的影片視圖。當我這樣做時，我會得到不可預測的行為。特別是，在以下情況下，我希望在 onAppear 中呼叫一個永遠重復的影片，無論它在何處或何時初始化，它總是可以作業，但實際上它的行為是不穩定的。我應該如何理解這種行為？我應該如何為有條件出現的視圖中的值設定影片？

案例1：當示例開始時，沒有圓圈（如預期的那樣），當單擊按鈕時，圓圈開始作為影片（如預期），如果單擊關閉，則標簽保持影片（它不應該作為影片value 位于 false if 陳述句后面），如果再次單擊，則圓圈將卡在全尺寸并且標簽保持影片

struct TestButton: View {
  @State var radius = 50.0
  @State var running = false
  let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
  
  var body: some View {
    VStack {
      Button(running ? "Stop" : "Start") {
        running.toggle()
      }
      if running {
        Circle()
          .fill(.blue)
          .frame(width: radius * 2, height: radius * 2)
          .onAppear {
            withAnimation(animation) {
              self.radius = 100
            }
          }
      }
    }
  }
}

情況 2：無論您單擊多少次按鈕，都不會出現影片。

struct TestButton: View {
  @State var radius = 50.0
  @State var running = false
  let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
  
  var body: some View {
    VStack {
      Button(running ? "Stop" : "Start") {
        running.toggle()
      }
      if running {
        Circle()
          .fill(.blue.opacity(0.2))
          .frame(width: radius * 2, height: radius * 2)
      }
    }
    // `onAppear` moved from `Circle` to `VStack`.
    .onAppear {
      withAnimation(animation) {
        self.radius = 100
      }
    }
  }
}

案例 3：影片就像案例 1 中的第一個按鈕單擊后一樣運行。

struct TestButton: View {
  @State var radius = 50.0
  @State var running = true  // This now starts as `true`
  let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
  
  var body: some View {
    VStack {
      Button(running ? "Stop" : "Start") {
        running.toggle()
      }
      if running {
        Circle()
          .fill(.blue.opacity(0.2))
          .frame(width: radius * 2, height: radius * 2)
      }
    }
    .onAppear {
      withAnimation(animation) {
        self.radius = 100
      }
    }
  }
}

uj5u.com熱心網友回復：

最好加入animation您想要影片的值，在您的情況下，它是radius明確地在包含影片視圖的容器上。

這是方法的演示。使用 Xcode 13.2 / iOS 15.2 測驗

struct TestButton: View {
    @State var radius = 50.0
    @State var running = false
    let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)

    var body: some View {
        VStack {
            Button(running ? "Stop" : "Start") {
                running.toggle()
            }
            VStack {           // responsible for animation of
                               // conditionally appeared/disappeared view
                if running {
                    Circle()
                        .fill(.blue)
                        .frame(width: radius * 2, height: radius * 2)
                        .onAppear {
                            self.radius = 100
                        }
                        .onDisappear {
                            self.radius = 50
                        }
                }
            }
            .animation(animation, value: radius)  // << here !!
        }
    }
}

標籤：

上一篇：斯威夫特每次我在tableView中滾動時，被選中的單元格都會被取消選中

下一篇：實體狀態未更新——SwiftUI