GetX:Transition 转场动画

  1. 使用
  2. 常用的 Transition 枚举值
  3. 配合 duration 使用
  4. 全局默认动画

使用

Transition定义了 页面从 A 跳转到 B 时的过渡动画效果。比如:从右边滑入、淡入淡出、缩放、无动画等等。

GetPageGet.to 系列方法中都可以用:

Get.to(
  NextPage(),
  transition: Transition.fadeIn,
);


GetPage(
  name: AppRoutes.Detail, // Detail = '/detail'
  page: () => DetailView(),
  transition: Transition.downToUp,
),

常用的 Transition 枚举值

Transition.fade → 直接淡入淡出。

Transition.fadeIn → 新页面从透明到完全显示。

Transition.rightToLeft → 新页面从右往左滑入。

Transition.leftToRight → 新页面从左往右滑入。

Transition.upToDown → 从上往下。

Transition.downToUp → 从下往上。

Transition.zoom → 页面从小到大放大进入。

Transition.cupertino → iOS 风格的右滑进入、右滑返回。

Transition.native → 根据平台选择默认动画(iOS 用 Cupertino,Android 用 Material)。

Transition.noTransition → 没有动画,直接切换。

配合 duration 使用

Get.to(
  NextPage(),
  transition: Transition.zoom,
  duration: Duration(milliseconds: 500),
);

全局默认动画

如果想让所有页面默认使用某种动画,可以在 GetMaterialApp 里设置:

GetMaterialApp(
  defaultTransition: Transition.fade,
  transitionDuration: Duration(milliseconds: 400),
  getPages: [
    GetPage(name: '/home', page: () => HomePage()),
    GetPage(name: '/login', page: () => LoginPage()),
  ],
);

×

喜欢就点赞,疼爱就打赏