两分钟带你快速掌握Flutter的路由与导航-白红宇

在这篇文章中，将带着大家一起认识，，，以及

首页我们来学习在Flutter中如何实现不同页面跳转（导航）？

在Flutter中如何实现不同页面跳转（导航）？

要在Flutter中切换屏幕，我们可以访问路由以绘制新的Widget。管理多个屏幕有两个核心概念和类：Route 和 Navigator。Route是应用程序的“屏幕”或“页面”的抽象（可以认为是Activity）， Navigator是管理Route的Widget。Navigator可以通过push和poproute以实现页面切换。

和Android相似，我们可以在AndroidManifest.xml中声明Activities，在Flutter中，我们可以将具有指定Route的Map传递到顶层MaterialApp实例，但这不是必须的。

在 iOS 中，可以使用管理了 view controller 栈的 UINavigationController 来在不同的 view controller 之间跳转。

在React Native中，可以使用react-navigation来实现页面之间的导航。

也有类似的实现，使用了 Navigator和 Routes。一个路由是 App 中“屏幕”或“页面”的抽象，而一个 Navigator是管理多个路由的 widget 。你可以粗略地把一个路由对应到一个 UIViewController。Navigator的工作原理和 iOS 中 UINavigationController 非常相似，当你想跳转到新页面或者从新页面返回时，它可以 push() 和 pop() 路由。

在Flutter中，有两个主要的widget用于在页面之间导航：

Route是一个应用程序抽象的屏幕或页面；

Navigator 是一个管理路由的widget；

以上两种widget对应Flutter中实现页面导航的有两种选择：

具体指定一个由路由名构成的 Map。（MaterialApp）

直接跳转到一个路由。（WidgetApp）

下面是构建一个 Map 的例子：

void main() {  runApp(MaterialApp(    home: MyAppHome(), // becomes the route named '/'    routes: 
    
      {      '/a': (BuildContext context) => MyPage(title: 'page A'),      '/b': (BuildContext context) => MyPage(title: 'page B'),      '/c': (BuildContext context) => MyPage(title: 'page C'),    },  ));}复制代码

通过把路由的名字 push 给一个 Navigator 来跳转：

Navigator.of(context).pushNamed('/b');复制代码

您还可以使用Navigator的push方法，该方法将给定route添加到导航器的历史记录中。在以下示例中，MaterialPageRoute widget是一种模版路由，它根据平台自适应替换整个页面。在以下示例中，widget是一种模版路由，它使用平台自适应替换整个页面。它需要一个WidgetBuilder作为必需参数。

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => UsualNavscreen()));复制代码

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

在Android中有startActivityForResult来获取跳转页面后返回的结果，那么在中Navigator类不仅用来处理 Flutter中的路由，还被用来获取你刚 push 到栈中的路由返回的结果。通过 await等待路由返回的结果来达到这点。

举个例子，要跳转到“位置”路由来让用户选择一个地点，你可能要这么做：

Map coordinates = await Navigator.of(context).pushNamed('/location');复制代码

之后，在 location 路由中，一旦用户选择了地点，携带结果一起 pop() 出栈：

Navigator.of(context).pop({
   "lat":43.821757,"long":-79.226392});复制代码

如何在Flutter中处理来自外部应用程序传入的Intents？(Android)

Flutter可以通过直接与Android层通信并请求共享的数据来处理来自Android的Intents

在这个例子中，我们注册文本共享Intent，所以其他应用程序可以共享文本到我们的Flutter应用程序

这个应用程序的基本流程是我们首先处理Android端的共享文本数据，然后等待Flutter请求数据，然后通过MethodChannel发送。

首先在在AndroidManifest.xml中注册我们想要处理的Intent：

然后，在MainActivity中，您可以处理intent，一旦我们从intent中获得共享文本数据，我们就会持有它，直到Flutter在完成准备就绪时请求它。

...public class MainActivity extends FlutterActivity {  private String sharedText;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    GeneratedPluginRegistrant.registerWith(this);    Intent intent = getIntent();    String action = intent.getAction();    String type = intent.getType();    if (Intent.ACTION_SEND.equals(action) && type != null) {      if ("text/plain".equals(type)) {        handleSendText(intent); // Handle text being sent      }    }    new MethodChannel(getFlutterView(), "app.channel.shared.data").setMethodCallHandler(      new MethodCallHandler() {        @Override        public void onMethodCall(MethodCall call, MethodChannel.Result result) {          if (call.method.contentEquals("getSharedText")) {            result.success(sharedText);            sharedText = null;          }        }      });  }  void handleSendText(Intent intent) {    sharedText = intent.getStringExtra(Intent.EXTRA_TEXT);  }}复制代码

最后，在Flutter中，您可以在渲染Flutter视图时请求数据。

...class SampleAppPage extends StatefulWidget {  SampleAppPage({Key key}) : super(key: key);  @override  _SampleAppPageState createState() => _SampleAppPageState();}class _SampleAppPageState extends State
    
      {  static const platform = const MethodChannel('app.channel.shared.data');  String dataShared = "No data";  @override  void initState() {    super.initState();    getSharedText();  }  @override  Widget build(BuildContext context) {    return Scaffold(body: Center(child: Text(dataShared)));  }  getSharedText() async {    var sharedData = await platform.invokeMethod("getSharedText");    if (sharedData != null) {      setState(() {        dataShared = sharedData;      });    }  }}复制代码

怎么跳转到其他 App？

在 iOS 中，要跳转到其他 App，你需要一个特定的 URL Scheme。对系统级别的 App 来说，这个 scheme 取决于 App。为了在 Flutter 中实现这个功能，你可以创建一个原生平台的整合层，或者使用现有的 plugin，例如。

未完待续

Flutter入门基础知识

Flutter主题和文字处理

Flutter什么是声明式UI

Flutter布局与列表

Flutter手势检测及触摸事件处理

Flutter状态管理d

Flutter线程和异步UI

Flutter表单输入与富文本

Flutter认识视图(Views)md

Flutter调用硬件、第三方服务以及平台交互、通知

Flutter路由与导航

Flutter项目结构、资源、依赖和本地化

在Flutter中如何实现不同页面跳转（导航）？

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

如何在Flutter中处理来自外部应用程序传入的Intents？(Android)

怎么跳转到其他 App？

未完待续

参考