使用FadeTransition和Hero动画推送时，页面太快无法再次推送时图标不会消失

Question

使用 FadeTransition 和 Hero 动画推送时，当页面太快而无法再次推送时，图标会冻结在屏幕上。有人有解决这个错误的想法吗？

使用 Fade Transition Builder 推送到页面的代码。

Navigator.push(
  context,
  PageRouteBuilder(
    maintainState: false,
    allowSnapshotting: false,
    opaque: false,
    pageBuilder: (_, Animation<double> start, Animation<double> end) {
      return TestUnsuccess(
        test: end,
      );
    },
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 1000),
  ),
);

Answer 1

使用PageRouteBuilder with opaque: true：设置的opaque属性 PageRouteBuilder 设置为 true。这确保了目标页面 在转换过程中覆盖整个屏幕，防止冻结 元素不可见。

 Navigator.push(
  context,
  PageRouteBuilder(
    maintainState: false,
    opaque: true, // Ensure that the destination page covers the entire screen
    pageBuilder: (_, Animation<double> start, Animation<double> end) {
      return TestUnsuccess(
        test: end,
      );
    },
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: Hero(
          tag: 'unique_tag', // Ensure each Hero has a unique tag
          child: child,
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 1000),
  ),
);

确保源页面和目标页面中的

Hero

小部件具有相同的唯一标记。这应该有助于防止图标在快速导航期间冻结在屏幕上。