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

快来打我* 2022-01-20 15:19 321阅读 0赞

> [为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了，点我Get！！！][Flutter_-_App_Get]

在这篇文章中，将带着大家一起认识[`什么是Flutter的路由与导航`][Flutter_-_App_Get]，[`如何完成不同页面跳转？`][Flutter_-_App_Get]，[`如何获取路由跳转的返回记过？`][Flutter_-_App_Get]，以及[`如何跳转到其他APP？`][Flutter_-_App_Get]

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

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

> Android：

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

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

> iOS：

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

> React Native：

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

[Flutter][Flutter_-_App_Get] 也有类似的实现，使用了 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: <String, WidgetBuilder> {
          '/a': (BuildContext context) => MyPage(title: 'page A'),
          '/b': (BuildContext context) => MyPage(title: 'page B'),
          '/c': (BuildContext context) => MyPage(title: 'page C'),
        },
      ));
    }
    复制代码

> 以上代码片段的完整部分可以在[课程源码][Flutter_-_App_Get]中查找。

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

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

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

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

> 以上代码片段的完整部分可以在[课程源码][Flutter_-_App_Get]中查找。

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

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

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

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

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

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

> 以上代码片段的完整部分可以在[课程源码][Link 1]中查找。

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

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

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

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

> 如果你对MethodChannel还不熟悉的话可以通过[第8章 Flutter进阶提升：Flutter混合开发][Flutter_-_App_Get]教程进行详细的学习

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

<activity
      android:name=".MainActivity"
      android:launchMode="singleTop"
      android:theme="@style/LaunchTheme"
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection"
      android:hardwareAccelerated="true"
      android:windowSoftInputMode="adjustResize">
      
      <intent-filter>
        <action android:name="android.intent.action.SEND" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:mimeType="text/plain" />
      </intent-filter>
    </activity>
    复制代码

> 以上代码片段的完整部分可以在[课程源码][Flutter_-_App_Get]中查找。

然后，在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_-_App_Get]中查找。

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

...
    class SampleAppPage extends StatefulWidget {
      SampleAppPage({Key key}) : super(key: key);
    
      @override
      _SampleAppPageState createState() => _SampleAppPageState();
    }
    
    class _SampleAppPageState extends State<SampleAppPage> {
      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;
          });
        }
      }
    }
    复制代码

> 以上代码片段的完整部分可以在[课程源码][Flutter_-_App_Get]中查找。

## 怎么跳转到其他 App？ ##

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

> 大家可以通过[《路由、Navigator与页面导航开发指南》][Navigator]来学习Flutter页面导航与路由的更多技巧和实战经验。

## 未完待续 ##

*  Flutter入门基础知识
 *  Flutter主题和文字处理
 *  Flutter什么是声明式UI
 *  Flutter布局与列表
 *  Flutter手势检测及触摸事件处理
 *  Flutter状态管理d
 *  Flutter线程和异步UI
 *  Flutter表单输入与富文本
 *  Flutter认识视图(Views)md
 *  Flutter调用硬件、第三方服务以及平台交互、通知
 *  Flutter路由与导航
 *  Flutter项目结构、资源、依赖和本地化

## 参考 ##

*  [Flutter从入门到进阶实战携程网App][Flutter_-_App_Get]

转载于:https://juejin.im/post/5ca15e6051882567e32fc575

[Flutter_-_App_Get]: https://link.juejin.im?target=https%3A%2F%2Fcoding.imooc.com%2Fclass%2F321.html%3Fmc_marking%3Df0d19be86650c0e77daa6fe37e140ded%26amp%3Bmc_channel%3Dshouji
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fcoding.imooc.com%2Fclass%2F321.html
[url_launcher]: https://link.juejin.im?target=https%3A%2F%2Fpub.dartlang.org%2Fpackages%2Furl_launcher
[Navigator]: https://link.juejin.im?target=https%3A%2F%2Fcoding.imooc.com%2Fclass%2Fchapter%2F321.html%23Anchor