Flutter快学快用24讲--11 路由设计：Flutter 中是如何实现 Scheme 跳转的

上一课时我们已经创建好了项目的基础框架结构，其中有一个 router.dart 文件，该文件的作用是实现 App 内的一个路由管理和跳转。本课时是基于该功能模块，着重介绍如何实现 App 内外的路由跳转。

Scheme

在介绍路由跳转实现之前，我们先来了解下 Scheme 的概念，Scheme 是一种 App 内跳转协议，通过 Scheme 协议在 APP 内实现一些页面的互相跳转。一般可以使用以下格式协议。

[scheme]://[host]/[path]?[query]

这种格式不仅可以使用在 App 内部实现可跳转，还可以适用于外部拉起 App 指定页面的功能。内部跳转类似于前端的页面路由，只不过前端的页面路由是直接用链接来处理，在 App 中是无法像前端一样能够使用链接实现路由管理。外部跳转则需要分别从 Android 和 iOS 来介绍，其中主要的不同点是一些平台配置，下面我们先来看看内部如何实现路由跳转。

内部跳转

按照上面的协议规则，我们将 Scheme 设置为项目 App 名字 tyfApp ，由于是 App 跳转 host 可以不设置，path 为具体的 pages 页面，query 则为 pages 需要的参数，举例如下。

tyfapp://userPageIndex?userId=1001

基础版本

根据这个规则，实现 router.dart 逻辑。首先需要 import 相应的 pages 页面，例如这里我们需要两个页面的跳转和一个 Web 页面。

import 'package:two_you_friend/pages/common/web_view_page.dart';
import 'package:two_you_friend/pages/home_page/index.dart';
import 'package:two_you_friend/pages/user_page/index.dart';

web_view_page.dart 使用第三方库，在遇到 http 或者 https 的协议时，使用该页面去打开，具体代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
/// 通用跳转逻辑
class CommonWebViewPage extends StatelessWidget {
  /// url 地址
  final String url;
  /// 构造函数
  CommonWebViewPage({Key key, this.url}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: url,
      appBar: AppBar(
        backgroundColor: Colors.blue,
      ),
    );
  }
}

使用第三方库 flutter_webview_plugin 来打开具体的网页地址，该组件一个是 url 具体的网址，一个是 appBar 包含 title 和主题信息。如果非网页地址，并符合页面规范的协议时，我们需要解析出跳转的页面以及页面需要的参数。

/// 解析跳转的url，并且分析其内部参数
Map<String, dynamic> _parseUrl(String url) {
  if(url.startsWith(appScheme)) {
    url = url.substring(9);
  }
  int placeIndex = url.indexOf('?');
  if(url == '' || url == null) {
    return {'action': '/', 'params': null};
  }
  if (placeIndex < 0) {
    return {'action': url, 'params': null};
  }
  String action = url.substring(0, placeIndex);
  String paramStr = url.substring(placeIndex + 1);
  if (paramStr == null) {
    return {'action': action, 'params': null};
  }
  Map params = {};
  List<String> paramsStrArr = paramStr.split('&');
  for (String s