SwiftUI状态变更时过渡效果未即时切换问题求助

问题根源 #

SwiftUI的transition是在视图被插入到视图树或从视图树中移除的瞬间确定的。你当前的代码中，切换usingOpacity时，矩形视图已经存在于视图树中，所以新的transitionType不会被应用，旧的过渡效果（比如slide）会被保留。

解决方案 #

要让过渡类型随usingOpacity动态更新，需要让SwiftUI在usingOpacity变化时，将矩形视图视为一个全新的视图，这样下次插入/移除时就会使用新的过渡类型。可以通过两种方式实现：

方式1：使用.id()修饰符 #

给矩形视图添加.id(usingOpacity)，每次usingOpacity改变时，SwiftUI会重建这个视图，从而应用新的过渡类型：

import SwiftUI

struct FixedTransition: View {
  @State var usingOpacity = false
  @State var showSquare = true

  var transitionType: AnyTransition { usingOpacity ? .opacity : .slide }

  var body: some View {
    VStack(spacing: 16) {
      Text("Current: \(usingOpacity ? "Opacity" : "Slide")").font(.title)
      Toggle("Using Opacity", isOn: $usingOpacity)
      Button(showSquare ? "Hide the Square" : "Show the Square") {
        withAnimation { showSquare.toggle() }
      }
      .buttonStyle(.borderedProminent)

      if showSquare {
        RoundedRectangle(cornerRadius: 15)
          .frame(width: 150, height: 150)
          .foregroundColor(.red)
          .transition(transitionType)
          .id(usingOpacity) // 关键：触发视图重建，更新过渡类型
      }
      Spacer()
    }
    .padding(.horizontal, 16)
  }
}

struct Fixed_Previews: PreviewProvider {
  static var previews: some View {
    FixedTransition()
  }
}

方式2：封装为子视图 #

将矩形视图封装成独立的子视图，把transitionType作为参数传递。当transitionType变化时，子视图会重新计算并应用新的过渡效果：

import SwiftUI

// 封装子视图
struct TransitionSquare: View {
  let transition: AnyTransition
  
  var body: some View {
    RoundedRectangle(cornerRadius: 15)
      .frame(width: 150, height: 150)
      .foregroundColor(.red)
      .transition(transition)
  }
}

struct FixedTransition: View {
  @State var usingOpacity = false
  @State var showSquare = true

  var transitionType: AnyTransition { usingOpacity ? .opacity : .slide }

  var body: some View {
    VStack(spacing: 16) {
      Text("Current: \(usingOpacity ? "Opacity" : "Slide")").font(.title)
      Toggle("Using Opacity", isOn: $usingOpacity)
      Button(showSquare ? "Hide the Square" : "Show the Square") {
        withAnimation { showSquare.toggle() }
      }
      .buttonStyle(.borderedProminent)

      if showSquare {
        TransitionSquare(transition: transitionType)
      }
      Spacer()
    }
    .padding(.horizontal, 16)
  }
}

struct Fixed_Previews: PreviewProvider {
  static var previews: some View {
    FixedTransition()
  }
}

原理说明 #

两种方案的核心都是让SwiftUI在usingOpacity变化时，重新创建矩形视图实例。这样当你点击按钮切换showSquare时，新的过渡类型就会被正确应用，而不是复用之前的过渡配置。

内容的提问来源于stack exchange，提问作者Roger Lee