10.Flutter路由

Fluter路由基础

Flutter 中 Intent 等价于什么？

在 Android 中，Intent 主要有两种使用场景：Activity 之间的切换、调用外部组件。Flutter 不具备 Intent 的概念，Flutter 可以通过 native 整合来触发 Intent。

• Activity 之间的切换
• 调用外部组件：相机、文件选择器

Flutter 为了实现类似的功能，需要借助第三方插件

路由管理

路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android 中 通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

简单示例

路由跳转简单示例：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    // ... //省略无关代码
    TextButton(
      child: Text("open new route"),
      onPressed: () {
        //导航到新路由   
        Navigator.push( 
          context,
          MaterialPageRoute(builder: (context) {
            return NewRoute();
          }),
        );
      },
    ),
  ],
 )

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

Route 和 Navigator

Flutter 中页面切换，使用了 Route 和 Navigator。

• Route 是应用程序的 “ 屏幕 “ 或 “ 页面 “ 的抽象（类似一个 Activity 页面）
• Navigator 是管理多个 Route 的 Widget，Navigator 可以通过 push 或 pop Route 以实现页面切换

示例：通过把路由的名字 push 给一个 Navigator 来跳转：
Navigator.of(context).pushNamed('/b');

MaterialPageRoute

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

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

MaterialPageRoute 构造函数的各个参数的意义：

MaterialPageRoute({
  required this.builder,
  super.settings,
  this.maintainState = true,
  super.fullscreenDialog,
  super.allowSnapshotting = true,
})

• builder 是一个 WidgetBuilder 类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个 widget。我们通常要实现此回调，返回新路由的实例。
• settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
• maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置 maintainState 为 false。
• fullscreenDialog 表示新的路由页面是否是一个全屏的模态对话框，在 iOS 中，如果 fullscreenDialog 为 true，新页面将会从屏幕底部滑入（而不是水平方向）。
• allowSnapshotting

Navigator

Navigator 是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator 通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator 提供了一系列方法来管理路由栈，在此我们只介绍其最常用的两个方法：

Future push(BuildContext context, Route route)

将给定的路由入栈（即打开新的页面），返回值是一个 Future 对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈，result 为页面关闭时返回给上一个页面的数据。

Navigator 还有很多其他方法，如 Navigator.replace、Navigator.popUntil 等。

实例方法

Navigator 类中第一个参数为 context 的静态方法都对应一个 Navigator 的实例方法， 比如 Navigator.push(BuildContext context, Route route) 等价于 Navigator.of(context).push(Route route)

如何获取路由跳转返回的结果？

通过 await 等待路由返回的结果来实现。

// 跳转到 “位置” 路由来让用户选择一个地点：
Map coordinates = await Navigator.of(context).pushNamed('/location');
// 在location路由中，用户选择了地点，携带结果一起pop()出栈
Navigator.of(context).pop({"lat":43.821234, "long":-79.231234});

示例：

// 跳转页
class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          // 打开`TipRoute`，并等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  // 路由参数
                  text: "我是提示xxxx",
                );
              },
            ),
          );
          //输出`TipRoute`路由返回结果
          print("路由返回值: $result");
        },
        child: Text("打开提示页"),
      ),
    );
  }
}

// 目标页面返回值
class TipRoute extends StatelessWidget {
  TipRoute({
    Key key,
    required this.text,  // 接收一个text参数
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

命名路由

什么是命名路由？

所谓 “ 命名路由 “（Named Route）即有名字的路由，给路由起一个名字，然后就可以通过路由名字直接打开新的路由了，这为路由管理带来了一种直观、简单的方式。

路由表

使用命名路由的前提是提供并注册一个路由表（routing table），这样 App 才知道哪个名字与哪个路由组件相对应。路由表的定义如下：

Map<String, WidgetBuilder> routes;

• key 为路由的名字，是个字符串；
• value 是个 builder 回调函数，用于生成相应的路由 widget。

我们在通过路由名字打开新路由时，应用会根据路由名字在路由表中查找到对应的 WidgetBuilder 回调函数，然后调用该回调函数生成路由 widget 并返回

注册路由 routes/initialRoute

在 MyApp 类的 build 方法中找到 MaterialApp，添加 routes 属性，代码如下：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoute(),
    // ... // 省略其他路由注册信息
  } ,
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

MaterialApp 的 initialRoute 初始化路由，该属性决定应用的初始路由页是哪一个命名路由。

MaterialApp(
  title: 'Flutter Demo',
  initialRoute:"/", //名为"/"的路由作为应用的home(首页)
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoute(),
   "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
  } 
);

通过路由名打开新路由页 pushNamed

Future pushNamed(BuildContext context, String routeName,{Object arguments})

Navigator 除了 pushNamed 方法，还有 pushReplacementNamed 等其他管理命名路由的方法

命名路由参数传递 settings.arguments

在打开路由时传递参数：

Navigator.of(context).pushNamed("new_page", arguments: "hi");

在路由页通过 RouteSetting 对象获取路由参数：

class EchoRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //获取路由参数  
    var args=ModalRoute.of(context)?.settings.arguments;
    //...省略无关代码
  }
}

路由生成钩子 onGenerateRoute

类似 ARouter 的拦截器功能。
MaterialApp 有一个 onGenerateRoute 属性，它在打开命名路由时可能会被调用。

之所以说可能，是因为当调用 Navigator.pushNamed(…) 打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的 builder 函数来生成路由组件；如果路由表中没有注册，才会调用 onGenerateRoute 来生成路由。

onGenerateRoute 回调签名如下：

Route<dynamic> Function(RouteSettings settings)

有了 onGenerateRoute 回调，要实现上面控制页面权限的功能就非常容易：我们放弃使用路由表，取而代之的是提供一个 onGenerateRoute 回调，然后在该回调中进行统一的权限控制，如：

MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
	  return MaterialPageRoute(builder: (context){
		   String routeName = settings.name;
       // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
       // 引导用户登录；其他情况则正常打开路由。
     }
   );
  }
);

注意，onGenerateRoute 只会对命名路由生效。

navigatorObservers 和 onUnknownRoute

MaterialApp 中还有 navigatorObservers 和 onUnknownRoute 两个回调属性，前者可以监听所有路由跳转动作，后者在打开一个不存在的命名路由时会被调用

其他

如何在 Flutter 中处理来自外部应用传入的 Intent？

通过 MethodChannel 来实现

怎么跳转到其他 App？

用三方插件：url_launcher

怎么把工作放到后台线程执行？

Flutter 是单线程且跑着一个 event loop。
对于 I/O 操作，通过关键字 async 将方法声明为异步方法，然后通过 await 关键字等待该异步方法执行完成：

loadData() async {
  String url = "xxx";
  http.Response response = await http.get(url);
  setState(
    () {
      widgets = json.decode(response.body);
    }
  )
}