Flutter训练营(五)-Flutter路由管理

这是我参与更文挑战的第12天，活动详情查看： 更文挑战

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。就如之前阿里圆心所言，今后前端的趋势是移动端，作为和RN、Flutter三分天下的跨端方案，深入学习Weex尤为重要。

前言

大多数应用程序具有多个页面或视图，并且希望将用户从页面平滑过渡到另一个页面。Flutter的路由和导航功能可帮助您管理应用中屏幕之间的命名和过渡。

管理多个页面时有两个核心概念和类：Route和 Navigator。一个route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。

Navigator 继承自 StatefulWidget，它也是也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能：

● push 将设置的router信息推送到Navigator上，实现页面跳转。

● of 主要是获取 Navigator最近实例的好状态。

● pop 导航到新页面，或者返回到上个页面。

● canPop 判断是否可以导航到新页面

● maybePop 可能会导航到新页面

● popAndPushNamed 指定一个路由路径，并导航到新页面。

● popUntil 反复执行pop 直到该函数的参数predicate返回true为止。

● pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。

● pushNamed 将命名路由推送到Navigator。

● pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。

● pushReplacement 路由替换。

● pushReplacementNamed 这个也是替换路由操作。推送一个命名路由到Navigator，新路由完成动画之后处理上一个路由。

● removeRoute 从Navigator中删除路由，同时执行Route.dispose操作。

● removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由。

● replace 将Navigator中的路由替换成一个新路由。

● replaceRouteBelow 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。

一、路由管理

要在Flutter中切换屏幕，我们可以访问路由以绘制新的Widget。管理多个屏幕有两个核心概念和类：Route 和 Navigator。Route是应用程序的“屏幕”或“页面”的抽象（可以认为是Activity）， Navigator是管理Route的Widget。Navigator可以通过push和pop route以实现页面切换。
在RN中，可以使用react-navigation来实现页面之间的导航。
Flutter 也有类似的实现，使用了 Navigator 和 Routes。一个路由是 App 中“屏幕”或“页面”的抽象，而一个 Navigator 是管理多个路由的 widget 。你可以粗略地把一个路由对应到一个 UIViewController。Navigator 的工作原理和 iOS 中 UINavigationController 非常相似，当你想跳转到新页面或者从新页面返回时，它可以 push() 和 pop() 路由。
在Flutter中，有两个主要的widget用于在页面之间导航：

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

• Navigator 是一个管理路由的widget；

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

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

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

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()));
复制代码

二、路由跳转与传值

Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。

2.1 命名路由

这种路由需要一开始现在创建App的时候定义

new MaterialApp(
      ....
      routes: {
        "nameRoute":(BuildContext context)=>new SecondPage(),
      },
    );
复制代码

然后就可以在程序中使用Navigator.pushNamed来跳转

Navigator.pushNamed(context, "nameRoute");
复制代码

这种路由的缺点是不能传递参数。

2.2 构建路由

在push的时候使用自定义方法构建一个路由

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
   return new ThirdPage(title:"请输入昵称");
}))
复制代码

这种方式就可以传递参数了。

2.3 返回上一页并携带参数

使用Navigator的pop返回可返回上一级，并携带一个参数

Navigator.pop(context,"携带参数");
复制代码

2.4 接收路由返回的参数

注意push系列的方法返回值是一个Future,可以用来接收参数

 Navigator.pushNamed<String>(context, "nameRoute").then( (String value){
   //处理代码
});


 Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){

    return new ThirdPage(title:"请输入昵称");

  })).then( (String result){

       //处理代码

  });
复制代码

注意这里dart中的泛型使用方法后面加上<泛型参数>,与java kotlin有所区别。
简单来说，在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可以通过直接与Android层通信并请求共享的数据来处理来自Android的Intents
在这个例子中，我们注册文本共享Intent，所以其他应用程序可以共享文本到我们的Flutter应用程序
这个应用程序的基本流程是我们首先处理Android端的共享文本数据，然后等待Flutter请求数据，然后通过MethodChannel发送。
首先在在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;
      });
    }
  }
}
复制代码

四、跳转至其他应用

在 iOS 中，要跳转到其他 App，你需要一个特定的 URL Scheme。对系统级别的 App 来说，这个 scheme 取决于 App。为了在 Flutter 中实现这个功能，你可以创建一个原生平台的整合层，或者使用现有的 plugin，例如 url_launcher。
流程如下：如果走完安装流程后运行Flutter时提示：

export LANG=en_US.UTF-8 
Error running pod install
复制代码

需要在配置文件.bash_profile中加上：

export LANG=en_US.UTF-8
复制代码

flutter开发者网站下载url_launcher插件，虽后在 pubspec.yaml 文件中添加依赖:

dependencies:
    url_launcher: ^5.0.3
复制代码

安装：

flutter pub get
复制代码

导入：

import 'package:url_launcher/url_launcher.dart';
复制代码

使用：

① 打开浏览器

_launchURL、_openMapApp为自定义方法名 可以根据自己的场景自定义名称:

_launchURL() async {
     const url = 'https://flutter.io';
     if (await canLaunch(url)) {
          await launch(url);
     } else {
          throw 'Could not launch $url';
     }
}
复制代码

② 打开外部APP

打开外部APP 需要外部APP提供跳转的schema，方法中定义的url为app-scheme-url，安卓跟IOS的url不同，所以分开来判断。

 _openMapApp() async {
     const url = 'geo:52.32,4.917'; //APP提供的schema
     if (await canLaunch(url)) {
          await (launch(url)); //安卓中打开
     } else {
          //iOS中打开
          const url = 'http://maps.apple.com/?ll=52.32,4.917';
          if (await canLaunch(url)) {
            await launch(url);
          } else {
            throw 'Could not launch $url';
          }
     }
}
复制代码