在该设计模式下页面的路由跳转
image
这里没用到 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 看看。
image
好的，你已经学会创建快捷模板了，于是你创建了一个 page。
image
创建新的快捷模板时，一定要记得设置模板用的语言。
image
截图里面代码不全，下面是完全版：
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 就可以快速创建一个页面了。
网友评论