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

为你们倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了，点我Get！！！

在这篇文章中，将带着你们一块儿认识什么是Flutter的路由与导航，如何完成不一样页面跳转？，如何获取路由跳转的返回记过？，以及如何跳转到其余APP？

首页咱们来学习在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 也有相似的实现，使用了 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'),
    },
  ));
}
复制代码

以上代码片断的完整部分能够在课程源码中查找。

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

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

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

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

以上代码片断的完整部分能够在课程源码中查找。

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

在Android中有startActivityForResult来获取跳转页面后返回的结果，那么在Flutter中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发送。

若是你对MethodChannel还不熟悉的话能够经过第8章 Flutter进阶提高：Flutter混合开发教程进行详细的学习

首先在在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>
复制代码

以上代码片断的完整部分能够在课程源码中查找。

而后，在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<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;
      });
    }
  }
}
复制代码

以上代码片断的完整部分能够在课程源码中查找。

怎么跳转到其余 App？

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

你们能够经过《路由、Navigator与页面导航开发指南》来学习Flutter页面导航与路由的更多技巧和实战经验。

未完待续

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

参考

• Flutter从入门到进阶实战携程网App