第144期：flutter的导航和路由

封面图

那些封控做核酸的日子，仿佛还在昨天。这几天核酸检测点撤掉之后，仿佛疫情根本没有发生过一样～

导航和路由

Flutter提供了一个完整的用于在屏幕之间导航和处理深层链接的系统。没有复杂深度链接的小型应用程序可以使用​​Navigator​​​，而具有特定深度链接和导航要求的应用程序也应该使用​​Router​​​来正确处理​​Android​​​和​​iOS​​应用上的深度链接，并在应用程序在web上运行时与地址栏保持同步。

使用​​Navigator​​导航

​​ Navigator​​​导航组可以用正确的过渡动画来展示对应的界面，当然，和web端的路由类似，界面其实也是以​​栈​​的形式保存着。

通过路由的​​buildContext​​​上下文，并且调用对应的​​push()​​​或​​pop()​​方法，我们就可以导航到新的界面，比如：

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

由于​​Navigator​​​保存了一个​​Route​​​对象的堆栈（表示历史堆栈），所以​​push（）​​​方法也使用​​Route​​​对象作为参数。​​MaterialPageRoute​​​对象是​​Route​​​的子类，用于指定​​Material Design​​的过渡动画。

命名路由

对于有些具有简单导航和深度链接需求的应用程序，我们可以使用​​Navigator​​​进行导航，使用​​MaterialApp​​​对象的​​routes​​属性对路由进行配置：

@override
  Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

我们在这里配置的路由就是​​命名路由​​。

命名路由的局限

尽管命名路由可以处理深层链接，但是他们的表现总是一致的，没办法做到自定义。当应用平台接收到一个新的深层链接，不论用户此时在哪个位置，Flutter都会将新的路线推送到导航器上。

使用命名路由的Flutter应用也不支持浏览器的前进按钮。基于这些原因，官方其实是不建议在大多数应用中使用命名路由。

当然，实际开发过程中，我们需要根据实际情况进行调整。

使用路由​​Router​​

具有高级导航和路由要求的Flutter应用程序（例如使用到每个屏幕的直接链接的web应用程序，或具有多个,或者嵌套导航​​Navigator​​​组件的应用程序）应使用诸如​​go_router​​​之类的路由包，该包可以在应用程序收到新的深度链接时解析路由路径并配置​​Navigator​​。

要使用路由，我们需要切换到​​MaterialApp​​​或​​Cupertino App​​上的路由器构造函数，并为其提供路由器配置。

MaterialApp.router(
  routerConfig: GoRouter(
    // …
  )
);

由于像​​go_router​​这样的包是声明性的，所以当接收到深度链接时，它们将始终显示相同的界面。

同时使用​​Router​​​和​​Navigator​​

​​Router​​​和​​Navigator​​​在设计时就可以协同工作。我们可以使用像​​go_router​​​这样的路由包的 API进行路由的跳转，也可以使用​​Navigator​​​的​​push()​​​或​​pop()​​方法进行导航。

当我们使用​​Router​​​或声明性路由包进行导航时，​​Navigator​​​上的每个路由页面都是支持的。这表示，路由是根据页面上的使用了页面上参数的​​Navigator​​构造函数创建的路由。

相反，通过调用​​Navigator.push()​​​等方法的路由导航，将会在导航中添加一个​​pageless​​(无页面)的路由。如果我们使用的是路由包，则页面支持的路由始终是可深度链接的，而无页面的路由则不是。

当从导航器中删除页面支持的路由时，它之后的所有无页面路由也将被删除。例如，如果深度链接通过从导航器中删除页面支持的路由来导航，则之后（直到下一个_pagebacked路由）的所有无页面路由也将被删除。

深度链接 Deep linking

Flutter支持iOS、Android和web浏览器上的深度链接。打开URL会在应用程序中显示该屏幕。通过以下步骤，我们可以使用命名路由（使用routes参数或onGenerateRoute）或使用Router小部件启动和显示路由。

如果我们在web浏览器中运行应用程序，则无需额外设置。路由路径的处理方式与iOS或Android深度链接相同。默认情况下，web应用程序使用模式：​​/#/path/to/app/screen​​从url片段读取深度链接路径，但这可以通过配置应用程序的url策略来更改。

在 Android 上启用 深度链接 Deep linking

只需要在​​AndroidManifest.xml​​​配置文件中的​​<activity>​​标签中添加一个元数据标签和意向过滤器标签即可：

<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="flutterbooksample.com" />
    <data android:scheme="https" />
</intent-filter>

配置之后，重启整个应用即可。

在 ios 上启用 深度链接 Deep linking

需要在​​ios/Runner​​​文件夹下​​Info.plist​​文件中添加两个新的key：

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>flutterbooksample.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>customscheme</string>
    </array>
    </dict>
</array>

​​CFBundleURLName​​是一个唯一的URL，用于将我们的应用程序与其他使用相同方案的应用程序进行区分。

配置完成后，同样需要进行应用的重启。

在web上配置URL策略

flutter web 应用支持两种URL策略：

• hash模式。如：​​flutterexample.dev/#/path/to/screen​​.
• path模式。如：​​lutterexample.dev/path/to/screen​​.

配置起来也很简单，从​​flutter_web_plugins​​插件库导入​​usePathUrlStrategy​​方法，在入口函数中调用即可。

import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  usePathUrlStrategy();
  runApp(ExampleApp());
}

PathUrlStrategy使用历史API，这需要对web服务器进行额外配置，具体怎么配置，应该跟nginx相关～

最后

熟悉了导航和路由，再加深一下对组件里的理解记忆，后面熟悉一下接口请求的方式，基本上就可以开始做flutter应用的开发了～