Flutter中如何为Get.off()页面跳转添加PageRouteBuilder动画？

我使用代码Get.off(() => const AllergyConfigurationScreen());实现页面跳转，请问是否可以通过集成PageRouteBuilder来为该跳转添加动画效果？

相关代码示例 #

preferences_controller.dart #

case 0:
          // 表单验证
          if (!updateVeganFormKey.currentState!.validate()) {
            updateVeganFormKey.currentState!.save();
            return;
          }

          if (!updateDairyFormKey.currentState!.validate()) {
            updateDairyFormKey.currentState!.save();
            return;
          }

          Map<String, dynamic> Diet = {
            'Diet': {
              'IsVegan': isVegan.value,
              'IsDairyFree': isDairyFree.value,
            },
          };

          // 更新Diet映射中的'isVegan'字段
          Diet['Diet']['IsVegan'] = isVegan.value;
          Diet['Diet']['IsDairyFree'] = isDairyFree.value;

          // 创建要更新到Firestore的数据
          Map<String, dynamic> dietData = {
            'Preferences': {
              'Allergy': {
                'IsEgg': userController.user.value.preferences['Allergy']
                    ?['IsEgg'],
                'IsNut': userController.user.value.preferences['Allergy']
                    ?['IsNut'],
              },
              'Diet': {
                'IsVegan': isVegan.value,
                'IsDairyFree': isDairyFree.value,
              },
            },
          };
          await userRepository.updateSingleField(dietData);

          // 更新rx用户值
          userController.user.value.preferences['IsVegan'] = isVegan.value;
          userController.user.update((user) {
            user?.preferences['Diet'] ??= {};
            user?.preferences['Diet']['IsVegan'] = isVegan.value;
          });

          userController.user.value.preferences['IsDairyFree'] =
              isDairyFree.value;
          userController.user.update((user) {
            user?.preferences['Diet'] ??= {};
            user?.preferences['Diet']['IsDairyFree'] = isDairyFree.value;
          });

          Get.off(() => const AllergyConfigurationScreen());
          break;

PageRouteBuilder() 示例代码 #

PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const AllergyConfigurationScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );

当然可以。GetX的Get.off方法支持传入自定义的PageRoute对象，你只需要把PageRouteBuilder实例直接作为参数传给Get.off，替换原来的页面构造器回调即可。

修改后的跳转代码如下：

Get.off(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const AllergyConfigurationScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

这样就能在跳转时应用你定义的从右侧滑入的动画效果了。

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