如何在flutter页面中应用模板方法设计模式？

在该设计模式下页面的路由跳转

这里没用到 context 也没使用任何路由插件。

模板方法模式的定义和组成

模板方法模式是一种只需使用继承就可以实现的非常简单的模式。

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为。如果相同和不同的行为都混合在各个子类的实现中，说明这些相同的行为会在各个子类中重复出现。

但实际上，相同的行为可以被搬移到另外一个单一的地方，模板方法模式就是为解决这个问题而生的。在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留待子类来实现。这也很好地体现了泛化的思想。

---- 摘抄自《Javascript设计模式与开发实践》

如何实现？

首先进行抽象，每个页面都有一个路由跳转方法，跳转的时候都要设置路由名称。同时他们可能还要执行 pop 来把当前页面移除。然后还要对每个页面用户的进入离开进行埋点上报。

相同的地方地方在于路由的跳转以及 pop 方法，还有用户行为埋点。不同的地方在于设置路由名称，这一点要子类去实现。

基于此，我们就开始创建一个抽象类 BasePage

/// BasePage 是抽象的页面，所有页面都应该继承于它
/// [ResultType] 是页面 pop 时返回的数据类型。
abstract class BasePage<ResultType> extends StatefulWidget {
  /// 无需context跳转路由的关键，全局导航key
  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  /// 需要子类实现的设置页面名称
  String get pageName;

  /// PageRoute 的 builder
  Widget _pageBuilder(BuildContext context) {
    return this;
  }

  /// 创建一个 PageRoute
  Route<ResultType> createPageRoute(WidgetBuilder builder, RouteSettings settings) {
    return MaterialPageRoute(
      settings: settings,
      builder: builder,
    );
  }

  /// 获取路由设置
  RouteSettings get settings => RouteSettings(name: pageName);

  /// 跳转路由
  Future<ResultType> active({bool replace}) {
    var page = createPageRoute(_pageBuilder, settings);
    assert(page.settings != null); // createPageRoute 函数必须设置 settings
    assert(page.settings.name != null); // settings 中必须包含name。
    if (replace == true) {
      return navigatorKey.currentState.pushReplacement(page);
    } else {
      return navigatorKey.currentState.push(page);
    }
  }
}

复制代码

很简单，目前只能单纯的跳转，但是后期可以很方便的扩展 active() 跳转函数，使跳转更灵活。继承于它的子页面就获得了相应的能力。这里的 active 函数就是模板方法了，因为它封装了调用顺序及跳转逻辑。

好了，现在要把 navigatorKey 注册到 MaterialApp 中去。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: BasePage.navigatorKey,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '模板方法设计模式',),
    );
  }
}
复制代码

oh! 还有一个 BasePageState ，StatefulWidget 和 State 一直是成对出现的不是吗？我们有了继承于 StatefulWidget 的抽象类 BasePage，但是它并不能提供 initState 和 dispose 用于用户行为埋点。那么我们再创建一个抽象类 BasePageState

/// 持有 BasePage 实例的 State
abstract class BasePageState<T extends BasePage> extends State<T> {
  
  @mustCallSuper
  @override
  void initState() {
    print('[BasePageState]: 记录用户打开 ${widget.pageName} 页面');
    super.initState();
  }

  @mustCallSuper
  @override
  void dispose() {
    print('[BasePageState]: 记录用户离开 ${widget.pageName} 页面');
    super.dispose();
  }

  /// 封装的 pop。
  bool pop<T extends Object>([T result]) {
    return Navigator.pop<T>(context, result);
  }

}
复制代码

到这里，我们已经写好了一个最基础的页面模板。

那么就创建第一个页面并且让它继承自模板吧。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:page_route/base_page.dart';

class PageOne extends BasePage<String> {
  final String title;

  PageOne(this.title);

  @override
  _PageOneState createState() => _PageOneState();

  @override
  String get pageName => 'PageOne';
}

class _PageOneState extends BasePageState<PageOne> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('当前页面是 ${widget.title}'),
              RaisedButton(
                onPressed: () => pop('page one 已结束'),
                child: Text('返回结果'),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    print('${widget.pageName}开始获取数据');
    super.initState();
  }

  @override
  void dispose() {
    print('销毁用不到的对象');
    super.dispose();
  }
}
复制代码

看，这样的话，创建一个页面跟平时创建一个 StatefulWidget 并没有多大区别，而且还获得了路由启动能力。使得我们可以随时随地启动一个页面。pop 当前页面的时候也不需要写一长串的 Navigator.pop<T>(context, result)。

个性化路由跳转动画

假使我们要对某个页面加上一些跳转动画，只需要在页面中 override 重写模板的 createPageRoute 方法即可。

先创建第二个页面 PageTwo，然后实现渐隐过度

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:page_route/base_page.dart';

class PageTwo extends BasePage {
  @override
  _PageTwoState createState() => _PageTwoState();

  @override
  String get pageName => 'PageTwo';

  @override
  Route createPageRoute(builder, RouteSettings settings) {
    return PageRouteBuilder(
      transitionDuration: Duration(milliseconds: 500), //动画时间为500毫秒
      settings: settings, // 必须载入 settings
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return new FadeTransition(
          //使用渐隐渐入过渡,
          opacity: animation,
          child: builder(context), //路由B
        );
      },
    );
  }
}

class _PageTwoState extends BasePageState<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('重写 createPageRoute'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('当前页面的路由动画是 重写 createPageRoute 实现的'),
              RaisedButton(
                onPressed: () => pop('page two 已结束'),
                child: Text('返回结果'),
              )
            ],
          ),
        ),
      ),
    );
  }
}
复制代码

可以看到，只要我们遵循单一职责原则，一定程度上就可以使程序的可扩展性得到提升。打开 PageTwo 页面还是一如既往的简单。

void goPageTwo() {
  PageTwo().active();
}
复制代码

快速创建一个页面

我们知道，ide提供了一些快捷模板(live template)。只要输入 stful 就可以快速创建一个 StatefulWidget。我们可以仿照 stful 写一个 page 快捷模板。先打开 stful 看看。

好的，你已经学会创建快捷模板了，于是你创建了一个 page。

创建新的快捷模板时，一定要记得设置模板用的语言。

截图里面代码不全，下面是完全版：

import 'package:flutter/material.dart';
import 'package:page_route/base_page.dart';

class $PAGE_NAME$ extends BasePage {
  @override
  _$PAGE_NAME$State createState() => _$PAGE_NAME$State();

  @override
  String get pageName => '$PAGE_NAME$';
}

class _$PAGE_NAME$State extends BasePageState<$PAGE_NAME$> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$END$'),
      ),
      body: Container(),
    );
  }

}
复制代码

此时只需要像写 stful 一样写 page 就可以快速创建一个页面了。