如何在 GetPage Flutter 中使用自定义转换

Posted 2023-03-07

【中文标题】如何在 GetPage Flutter 中使用自定义转换

【英文标题】：How to use Custom Transition in GetPage flutter

【发布时间】：2021-04-24 19:29:35

【问题描述】：

我有 CustomPageRoute 用于导航到具有自定义转换的新页面。

为了导航，我使用以下代码：

Navigator.push(
    context,
    CustomPageRoute(
        NewScreen(),
    ),
),

这很好用，但现在我想在 getx 库中使用 GetPage 来添加依赖项。

GetPage(
    name: Routes.NEW_SCREEN,
    page: () => NewScreen(),
    binding: NewScreenBinding(),
),

所以我必须使用Get.toNamed(Routes.NEW_SCREEN) 导航，而我的自定义转换不起作用。

如何将我的自定义转换与GetPage 集成

这是我的自定义过渡：

class CustomPageRoute<T> extends PageRoute<T> 
  final Widget child;

  CustomPageRoute(this.child);

  @override
  Color get barrierColor => Colors.black;

  @override
  String get barrierLabel => '';

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 600);

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) 
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  

【参考方案1】：

我认为这可以更简单一些。像这样创建一个类...

class Go 
  static Future<dynamic> to(dynamic page, dynamic arguments) async 
    Get.to(
      page,
      arguments: arguments,
      transition: Transition.fadeIn, // choose your page transition accordingly
      duration: const Duration(milliseconds: 300),
    );
  

然后在您的视图或控制器中

Go.to(
  () => OtpView(),
  arguments: 'your dynamic argument' 
);

【参考方案2】：

您可以在 GetMaterialApp 小部件中从 main.dart 更改默认过渡

GetMaterialApp(
     defaultTransition: Transition.fadeIn,
      //or customTransition
      initialBinding: InitialBindings(),
      initialRoute: '/',
      getPages: [
       ...
      ],
      ...
    );
    

或者您可以像这样在 GetPage 对象中添加过渡：

GetPage(
    name: Routes.NEW_SCREEN,
    page: () => NewScreen(),
    binding: NewScreenBinding(),
    transition: Transition.fadeIn,
    //or customTransition
),

您还可以编辑此过渡的持续时间 通过编辑默认值

transitionDuration

或者您可以通过编辑的值来使用 CustomTransition 对象

customTransition