Flutter 路由与导航

站长

2024年04月27日 12:45 · 阅读数 41

如果说 UI 框架的视图元素的基本单位是组件，那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言，如何从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转，通常被称为路由管理或导航管理。

我们首先需要知道目标页面对象，在完成目标页面初始化后，用框架提供的方式打开它。比如，在 Android/iOS 中我们通常会初始化一个 Intent 或 ViewController，通过 startActivity 或 pushViewController 来打开一个新的页面

1、路由管理

Flutter 路由管理中有两个非常重要的概念：

Route：路由是应用程序页面的抽象，对应 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 管理。
Navigator：Navigator 是一个组件，管理和维护一个基于堆栈的历史记录，通过 push 和 pop 进行页面的跳转。

根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式：

基本路由。无需提前注册，在页面切换时需要自己构造页面实例。
命名路由。需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由。

2、Navigator

const Navigator({
   Key key,
   this.pages = const <Page<dynamic>>[],
   this.onPopPage,
   this.initialRoute,
   this.onGenerateInitialRoutes = Navigator.defaultGenerateInitialRoutes,
   this.onGenerateRoute,
   this.onUnknownRoute,
   this.transitionDelegate = const DefaultTransitionDelegate<dynamic>(),
   this.reportsRouteUpdateToEngine = false,
   this.observers = const <NavigatorObserver>[],
 })

Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能

Flutter 路由与导航

push 将设置的router信息推送到Navigator上，实现页面跳转。
of 主要是获取 Navigator最近实例的状态。
pop 导航到新页面，或者返回到上个页面。
canPop 判断是否可以导航到新页面
maybePop 可能会导航到新页面
popAndPushNamed 指定一个路由路径，并导航到新页面。
popUntil 反复执行pop 直到该函数的参数predicate返回true为止。
pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
pushNamed 将命名路由推送到Navigator。
pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
pushReplacement 路由替换。
pushReplacementNamed 这个也是替换路由操作。推送一个命名路由到Navigator，新路由完成动画之后处理上一个路由。
removeRoute 从Navigator中删除路由，同时执行Route.dispose操作。
removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由。
replace 将Navigator中的路由替换成一个新路由。
replaceRouteBelow 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。

Navigator类中第一个参数为context的静态方法都对应一个Navigator的实例方法，比如Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route) ，下面命名路由相关的方法也是一样的。

3、MaterialPageRoute

MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute是Material组件库的一个Widget，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于iOS，当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

 MaterialPageRoute({
    @required this.builder,
    RouteSettings settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })

builder是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例

typedef WidgetBuilder = Widget Function(BuildContext context);

settings包含路由的配置信息，如路由名称、是否初始路由(首页)
maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
fullscreenDialog：表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）

4、基本路由

在 Flutter 中，基本路由的使用方法和 Android/iOS 打开新页面的方式非常相似。要导航到一个新的页面，我们需要创建一个 MaterialPageRoute 的实例，调用 Navigator.push 方法将新页面压到堆栈的顶部。

而如果我们想返回上一个页面，则需要调用 Navigator.pop 方法从堆栈中删除这个页面

class OnePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       child: RaisedButton(
           child: Text('push two screen'),
           onPressed:(){
             Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
               return TwoPage();
             }));
           }
       ),
     ),
   );
 }
}

class TwoPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('第二个界面'),),
     body: Container(
       child: RaisedButton(
           child: Text('pop one screen'),
           onPressed:(){
             Navigator.pop(context);
           }
       ),
     ),
   );
 }
}

Flutter 路由与导航

5、命名路由

基本路由使用方式相对简单灵活，适用于应用中页面不多的场景。而在应用中页面比较多的情况下，再使用基本路由方式，那么每次跳转到一个新的页面，我们都要手动创建 MaterialPageRoute 实例，初始化页面，然后调用 push 方法打开它，还是比较麻烦的

所以，Flutter 提供了另外一种方式来简化路由管理，即命名路由。我们给页面起一个名字，然后就可以直接通过页面名字打开它了

要想通过名字来指定页面切换，我们必须先给应用程序 MaterialApp 提供一个页面名称映射规则，即路由表 routes，这样 Flutter 才知道名字与页面 Widget 的对应关系。

final Map<String, WidgetBuilder> routes;
typedef WidgetBuilder = Widget Function(BuildContext context);

路由表实际上是一个 Map，其中 key 值对应页面名字，而 value 值则是一个 WidgetBuilder 回调函数，我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字，我们就可以使用 Navigator.pushNamed 来打开页面了。

MaterialApp(
   ...
   // 注册路由
   routes:{
     "two_page":(context)=>TwoPage(),
   },
);
// 使用名字打开页面
Navigator.pushNamed(context, "two_page");

不过由于路由的注册和使用都采用字符串来标识，这就会带来一个隐患：如果我们打开了一个不存在的路由会怎么办？

在注册路由表时，Flutter 提供了 UnknownRoute 属性，我们可以对未知的路由标识符进行统一的页面跳转处理。

 
MaterialApp(
    ...
    // 注册路由
    routes:{
      "two_page":(context)=>TwoPage(),
    },
    // 错误路由处理，统一返回 UnknownPage
    onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnknownPage()),
);

// 使用名字打开页面
Navigator.pushNamed(context, "abc");

Flutter 路由与导航

6、页面传参

与基本路由能够精确地控制目标页面初始化方式不同，命名路由只能通过字符串名字来初始化固定目标页面。为了解决不同场景下目标页面的初始化需求，Flutter 提供了路由参数的机制，可以在打开路由时传递相关参数，在目标页面通过 RouteSettings 来获取页面参数。

static Future<T> pushNamed<T extends Object>(
   BuildContext context,
   String routeName, {
   Object arguments,
  })

class _OnePageState extends State<OnePage> {
 String _msg = "";
 @override
 Widget build(BuildContext context) {
   return Container(
       child: Column(
         children: [
           RaisedButton(
               child: Text('push two screen 传递参数',style: TextStyle(fontSize: 20),),
               onPressed:(){
                 Navigator.pushNamed(context, "two_page",arguments: "one")
                 .then((value) => {
                   this.setState(() {
                     _msg = value;
                   })
                 });
               }
           ),
           SizedBox(height: 20),
           Text("我是二级界面传递过来的参数: $_msg",style:TextStyle(color: Colors.red,fontSize: 20))
         ],
       )
   );
 }
}


class TwoPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // 取出路由参数
   String msg = ModalRoute.of(context).settings.arguments as String;
   return Scaffold(
     appBar: AppBar(title: Text('第二个界面'),),
     body: Container(
       child: Column(
         children: [
           RaisedButton(
               child: Text('pop one screen',style: TextStyle(fontSize: 20)),
               onPressed:(){
                return Navigator.pop(context,"two");
               }
           ),
           SizedBox(height: 20),
           Text("我是第一个界面传递过来的参数: $msg",style:TextStyle(color: Colors.red,fontSize: 20))
         ],
       )
     ),
   );
 }
}

Flutter 路由与导航

代码地址：github.com/SunshineBro…

转载自:https://juejin.cn/post/6930508768983646216