flutter页面中应用模板方法设计模式

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 extends State {

@mustCallSuper

@override

void initState() {

print(‘[BasePageState]: 记录用户打开 ${widget.pageName} 页面’);

super.initState();

}

@mustCallSuper

@override

void dispose() {

print(‘[BasePageState]: 记录用户离开 ${widget.pageName} 页面’);

super.dispose();

}

/// 封装的 pop。

bool pop([T result]) {

return Navigator.pop(context, result);

}

}

复制代码

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

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

import ‘package:flutter/cupertino.dart’;

import ‘package:flutter/material.dart’;

import ‘package:page_route/base_page.dart’;

class PageOne extends BasePage {

final String title;

PageOne(this.title);

@override

_PageOneState createState() => _PageOneState();

@override

String get pageName => ‘PageOne’;

}