Flutter使用路由

本文介绍了Flutter中如何使用路由进行页面跳转。首先在pubspec.yaml中引入Fluro库,然后在main函数中配置路由,并在Application类中创建静态router属性。在其他文件中,通过NavigatorUtil调用定义好的路由进行页面跳转。此外,还展示了如何定义路由处理函数和配置路由路径。项目中,可以调用这些方法实现不同页面间的导航。
摘要由CSDN通过智能技术生成

Flutter使用路由

1、意义

在用flutter开始写项目时,因为此项目中有着许许多多的页面,需要去进行跳转,从此界面跳转到另一个界面,此时就可以开始使用路由了。

2、使用方法
1、先去声明

在pubspec.yaml中引入fluro,我的版本是1.7.7

2、main中去使用
void main()async {
  FluroRouter router = FluroRouter();
  Routes.configureRoutes(router);
  Application.router = router;
  initializeDateFormatting().then((_) => runApp(MyApp()));
  //路由跳转
}

这个时候中的router中创建了一个application的文件

import 'package:fluro/fluro.dart';

class Application{
  static FluroRouter router;
}
3、其他文件去调用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t7c76QF9-1626250936537)(/Users/wuzhangxiao/Library/Application Support/typora-user-images/image-20210714155703526.png)]

在创建的NavigatorUtil中,都是进行到此界面

样例

//跳转到实验界面
static void goExperimentTabs(BuildContext context) {
  Application.router.navigateTo(context, Routes.experimenthome,
      transition: TransitionType.inFromRight);
}

这个之中还声明了进入到此界面后,是怎么进入的。

router_handlers文件是:此声明是什么界面,进入到什么界面。

样例

//登录
var loginHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return new LoginPage();
});

这个是主动输出一个界面的布局。

在routes中

样例

static String getVideo = "/getVideo";
static String getSelectPlate ="/getSelectPlate";//选择板块
static void configureRoutes(FluroRouter router) {
  router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        print("ROUTE WAS NOT FOUND  !!!!");
        print('找不到路由,404');
      });


  /// 第一个参数是路由地址,第二个参数是页面跳转和传参,第三个参数是默认的转场动画
  router.define(login, handler: loginHandler);
  router.define(root, handler: homeHandler);
  router.define(home, handler: homeHandler);
三、项目中调用方法

在这个界面我要开始去进行跳转,这个时候就可以开始去调用我们的路由,跳转到我们所需要的界面。

Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => UserSelectPlatPage()));
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值