Flutter学习笔记 -- 路由管理

Flutter的路由管理主要通过Navigator实现,包括静态路由和动态路由。静态路由通过定义routes表进行界面注册,如MyApp中的/page1和/page2。动态路由常用于参数传递,如Navigator.push()创建带有参数的新页面。路由管理遵循栈结构,通过push和pop实现界面的前进与后退。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

Flutter的路由是用于管理一组居右某种进出规制的界面组件,以便实现各个界面之间有规律的跳转,而遵循这一规制并存放路由信息的事物称为路由栈。
熟悉Android开发的都知道Intent,Android中的界面跳转可以通过Intent来实现,在项目中我们通过Intent可以轻松实现自己路由管理。而在Flutter中,这个路由就是Navigator,跳转到某个界面可以用Navigator.push()、返回上一个界面可以用Navigator.pop()

一、静态路由

静态路由就是在明确知道跳转哪个界面时使用的。routes就是定义路由表的属性,eg:

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: '静态路由',),
      routes: <String, WidgetBuilder>{
        '/page1': (BuildContext context) => FirstPage(),
        '/page2': (BuildContext context) => SecondPage()
      },
       onUnknownRoute: (RouteSettings settings) {
        return new MaterialPageRoute(builder: (context) {
          return new ErrorPage();
        });
      },
    );
  }
}

routes属性定义的是路由表信息,相当于注册,在实际项目中为了保证健硕性,需要使用onUnknowRoute属性定义路由跳转出错界面。

注册完需要跳转的界面后,如何跳转呢,代码如下:

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: OutlinedButton(
          child: const Text('跳转到page1'),
          onPressed: () {
            Navigator.pushNamed(context, '/page1');
          },
        ),
      ),
    );
  }

直接调用Navigator.pushNamed()方法就可以实现界面跳转了,其中第二个参数就是routes路由表中定义的键值对中的key。而Navigator.push()的方式跳转是不需要定义路由表信息的:

Navigator.push(context, new MaterialPageRoute(builder: (context) {
    return FirstPage();
});

跳转一个界面调用Navigator.push(),那么退出一个界面返回上一个界面,调用Navigator.pop()即可。在Flutter中,路由管理是栈形式的,遵循“先进后出”的顺序,所有会自己找到栈中上一个界面返回。

二、动态路由

既然有静态路由,那么也有动态路由。动态路由主要用于两个界面的参数传递。

Navigator.push(context, new MaterialPageRoute(builder: (context) {
  return new FirstPage(title: '需要传递的参数');
}));

添加跳转动画:

Navigator.push(context, PageRouteBuilder(
      transitionDuration: Duration(milliseconds: 500), 
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return new FadeTransition(
          opacity: animation,
          child: FirstPage() 
        );
      }));
}),
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值