flutter使用get库管理路由,并设页面跳转动画和常见动画

这篇具有很好参考价值的文章主要介绍了flutter使用get库管理路由,并设页面跳转动画和常见动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

get库还是非常强大的一个仓库,里面包含了非常常用的一些方法,比如路由管理,这是最常见和最常用的一个功能了,我们可以先配置一个路由对象,然后在里面配置路由列表,并且设置路由跳转方式。

第一种方式:每个页面单独配置

在路由管理里面单独配置某个页面的进入动画

import 'package:flutter_windows/pages/detail.dart';
import 'package:flutter_windows/pages/home.dart';
import 'package:get/get.dart';
import '../pages/login.dart';

class AppPage {
  static final routes = [
    GetPage(
        name: "/",
        page: () => const Home(),
        transition: Transition.leftToRight),
    GetPage(name: "/login", page: () => const Login()),
    GetPage(name: "/lists", page: () => const Login()),
    GetPage(name: "/detail", page: () => const Detail()),
  ];
}

flutter使用get库管理路由,并设页面跳转动画和常见动画,多端开发,前端,flutter,get

第二种:在全局配置默认的

在main.dart文件中配置GetMaterialApp,并配置(全局的会覆盖单独配置的) 

defaultTransition: Transition.fade,

flutter使用get库管理路由,并设页面跳转动画和常见动画,多端开发,前端,flutter,get

第三种:跳转时配置

在页面中使用Get跳转的时候单独配置,这种方式会覆盖全局的

 Get.to(OtherPage(),transition: Transition.rightToLeftWithFade);

flutter使用get库管理路由,并设页面跳转动画和常见动画,多端开发,前端,flutter,get

总结说一下常用动画和配置

fade: 页面渐变动画,新页面会从透明度为 0 的状态渐变到完全显示。

fadeIn: 渐入动画,新页面会从透明度为 0 的状态渐变到完全显示。

rightToLeft: 从右向左滑动动画,新页面从屏幕右侧滑入显示。

leftToRight: 从左向右滑动动画,新页面从屏幕左侧滑入显示。

upToDown: 从上到下滑动动画,新页面从屏幕顶部滑入显示。

downToUp: 从下到上滑动动画,新页面从屏幕底部滑入显示。

rightToLeftWithFade: 从右向左滑动并渐变动画。

leftToRightWithFade: 从左向右滑动并渐变动画。

zoom: 缩放动画,新页面从小到大缩放显示。

topLevel: 顶层动画,新页面从顶部覆盖到当前页面。

noTransition: 无动画,直接切换页面,没有过渡效果。

cupertino: iOS 风格的切换动画。

cupertinoDialog: iOS 风格的对话框切换动画。

size: 大小变化动画,新页面从小到大放大显示。

circularReveal: 圆形揭示动画。

native: 原生平台的切换动画。

其他属性:
duration: 设置页面切换动画的持续时间,类型为 Duration。例如,可以通过 duration: Duration(milliseconds: 500) 来设置动画持续时间为500毫秒。

curve: 设置动画的曲线效果,类型为 Curve。曲线可以控制动画的速度和变化。GetX 提供了一系列预定义的曲线效果,如 Curves.easeInOut、Curves.fastOutSlowIn、Curves.bounceInOut 等。

fullscreenDialog: 设置是否将新页面作为全屏对话框显示。如果为 true,新页面将全屏覆盖当前页面。例如,fullscreenDialog: true。

opaque: 设置是否将新页面设置为不透明。如果为 true,新页面将完全不透明,遮挡住当前页面。例如,opaque: true。

popGesture: 设置是否允许通过手势返回上一个页面。如果为 true,用户可以通过向右滑动手势返回上一个页面。例如,popGesture: true。

preventDuplicates: 设置是否防止重复打开同一个页面。如果为 true,多次点击打开同一个页面只会显示一次。例如,preventDuplicates: true。

arguments: 传递给新页面的参数,类型为 dynamic。可以通过 arguments: {…} 来传递参数给新页面。

fullscreen: 设置是否将新页面显示为全屏页面。如果为 true,新页面将全屏显示,覆盖状态栏和导航栏。例如,fullscreen: true。

 文章来源地址https://www.toymoban.com/news/detail-810316.html

到了这里,关于flutter使用get库管理路由,并设页面跳转动画和常见动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter的路由router-页面跳转

    在Flutter中,路由(Router)是用于管理不同页面之间导航的机制。它允许您在应用程序中切换和管理不同的屏幕或视图。Flutter提供了多种方式来实现路由,包括基本路由、命名路由和第三方路由管理库。下面是对这些不同方式的详细介绍: Flutter提供了一种基本的路由管理方式

    2024年02月08日
    浏览(39)
  • Flutter动画库:animations(路由过渡动画或者页面切换动画)

    animations 是一个 Flutter 库,它提供了一组用于创建动画效果的工具和组件。 这个库的核心重点是路由过渡动画或者页面切换动画 地址 https://pub-web.flutter-io.cn/packages/animations 安装 看了下官方文档和官方例子,然后就有点懵。差点以为找错库了。还好flutter中的库可以直接点开(

    2024年02月16日
    浏览(31)
  • Flutter中GetX系列九--路由/页面跳转,传值,中间件(GetPage)

    1.1.使用to方法实现页面基本跳转  1.2.使用Get.toNamed()跳转到命名路由 系统跳转方式  Getx跳转方式 1.3.返回上一级页面Get.back() 系统跳转方式 Getx跳转方式​​​​​​​ 1.4.返回到根路由 系统跳转方式   Getx跳转方式 1.5.跳转到下一个页面的,但是没有返回按钮(一般应用于闪屏

    2024年02月16日
    浏览(38)
  • flutter基础入门教程(Dart语法+UI布局+页面路由+后端连接)

    1、环境安装 1基础安装步骤教程 Android Studio安装与配置 https://juejin.cn/post/6844904054569582605 安装Android Studio前,需要先选择安装Java环境,Java需要到Oracle官网上下载安装,需要注册一个Oracle账号。 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html Windows 10 配置Java 环境变量

    2024年02月03日
    浏览(25)
  • Flutter学习四:Flutter开发基础(三)路由管理

    目录 0 引言 1 路由管理  1.1 MaterialPageRoute 1.2 Navigator  1.2.1 Future push(BuildContext context, Route route) 1.2.2  bool pop(BuildContext context, [ result ]) 1.2.3  Future pushNamed(BuildContext context, String routeName,{Object arguments}) 1.3 非命名路由传值 1.4 命名路由  1.4.1 路由表 1.4.2 注册路由表 1.4.3 通过

    2024年02月09日
    浏览(30)
  • react实现路由跳转动画

    下载插件 配置路由 app组件中引入并使用 引入动画样式 实现效果

    2024年02月15日
    浏览(29)
  • Flutter笔记:GetX模块中不使用 Get.put 怎么办

    Flutter笔记 GetX模块中不使用 Get.put 怎么办 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134006728 依赖注入(Dependency Injection,DI)是一种编程模式,它旨在管理和注入类之间的依赖关系,以提高代码

    2024年02月08日
    浏览(37)
  • 【Flutter】Flutter 使用splashscreen包创建启动页面

    大家好,今天我们要聊一聊如何在 Flutter 中使用 splashscreen 包来创建一个漂亮的启动页面。启动页面在许多应用中都是非常重要的一部分,它能够给用户留下深刻的第一印象,并且可以在应用加载数据或者进行初始化操作的时候为用户提供一个视觉效果。 如果你想深入学习

    2024年02月08日
    浏览(61)
  • 【Jetpack】Navigation 导航组件 ③ ( 为 Navigation Graph 页面跳转 action 添加跳转动画 )

    代码地址 : CSDN ( 本博客代码快照 | 推荐下载 0 积分 ) : https://download.csdn.net/download/han1202012/87951959 GitHub ( 可能已经覆盖 ) : https://github.com/han1202012/Navigation 打开 \\\" res/navigation \\\" 下的 Navigation Graph 的 Xml 配置文件 , 进入 Design 编辑模式 , 选中一个 代表 Fragment 页面跳转 Action 对应的箭

    2024年02月11日
    浏览(49)
  • flutter3使用dio库发送FormData数据格式时候的坑,和get库冲突解决办法

    问题1:当你使用 FormData.from(Flutter3直接不能用) 的时候,可能会提示没有这个方法,或者使用 FormData.fromMap(flutter3的dio支持) 的时候也提示没有,这时候可能就是和get库里面的Formdata冲突了 问题1:The method \\\'fromMap\\\' isn\\\'t defined for the type \\\'FormData\\\'. (Documentation)  Try correcting the name to

    2024年01月19日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包