SwiftUI中绑定状态的Text动画不一致问题求助

我正尝试在两个SwiftUI视图间实现滑动转场，整体功能正常，但绘制绑定状态数据的Text标签时，该Text控件的动画和视图其余部分完全不同——绑定的Text用淡入动画，而非滑动动画。如何确保绑定到状态的Label与视图其余部分使用相同的动画？

示例代码 #

struct ParentView: View {

  @State var step = 1
  @State var userSelection: String? = nil

  var body: some View {
    GeometryReader { geometry in
      VStack {
        Spacer()
        
        HStack(spacing: 0) {
          FirstView(userSelection: $userSelection, step: $step)
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.red)
          
          SecondView(userSelection: $userSelection, step: $step)
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.blue)
        }
        .frame(width: geometry.size.width * 2)
        .offset(x: -geometry.size.width * CGFloat(step - 1))
        .animation(.default, value: UUID()) // 动画应用在这里!!
      }
    }
  }
}

struct FirstView: View {
    @Binding var userSelection: String?
    @Binding var step: Int
    
    var body: some View {
        VStack {
          Text("Option 1")
            .onTapGesture {
              userSelection = "Option 1"
              step += 1
            }

            Text("Option 2")
            .onTapGesture {
              userSelection = "Option 2"
              step += 1
            }
        }
    }
}


struct SecondView: View {
  @Binding var userSelection: String?
  @Binding var step: Int
  
    var body: some View {
        VStack {
            Text("Go Back")
            .onTapGesture {
              userSelection = nil
              step -= 1
            }

            Text(userSelection ?? "")
        }
    }
}

动画效果说明 #

切换到SecondView时，视图背景和"Go Back"文字会执行滑动动画，但显示userSelection的Text控件却以淡入方式出现，两种动画不一致。

问题根源在于两点：

• 动画绑定的UUID()每次都会生成新值，导致动画触发逻辑混乱；同时userSelection的变化会触发Text控件的默认淡入动画，和滑动动画冲突。
• 需要将动画绑定到真正的状态触发源step，并禁用Text因userSelection变化产生的默认动画。

修改后的代码 #

struct ParentView: View {

  @State var step = 1
  @State var userSelection: String? = nil

  var body: some View {
    GeometryReader { geometry in
      VStack {
        Spacer()
        
        HStack(spacing: 0) {
          FirstView(userSelection: $userSelection, step: $step)
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.red)
          
          SecondView(userSelection: $userSelection, step: $step)
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.blue)
        }
        .frame(width: geometry.size.width * 2)
        .offset(x: -geometry.size.width * CGFloat(step - 1))
        .animation(.default, value: step) // 绑定到step变量，而非UUID
      }
    }
  }
}

struct FirstView: View {
    @Binding var userSelection: String?
    @Binding var step: Int
    
    var body: some View {
        VStack {
          Text("Option 1")
            .onTapGesture {
              userSelection = "Option 1"
              step += 1
            }

            Text("Option 2")
            .onTapGesture {
              userSelection = "Option 2"
              step += 1
            }
        }
    }
}


struct SecondView: View {
  @Binding var userSelection: String?
  @Binding var step: Int
  
    var body: some View {
        VStack {
            Text("Go Back")
            .onTapGesture {
              userSelection = nil
              step -= 1
            }

            // 禁用Text的默认动画，让它跟随父视图的滑动动画
            Text(userSelection ?? "")
                .animation(nil, value: userSelection)
        }
    }
}

解释 #

• 将父视图的动画绑定到step变量：只有当step变化时才触发滑动动画，符合视图切换的逻辑，避免了不必要的动画触发。
• 在SecondView的Text上添加.animation(nil, value: userSelection)：禁用该Text因userSelection变化产生的默认淡入动画，让它完全跟随父视图的滑动动画，保证整个视图的动画一致性。

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