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’;

}

class _PageOneState extends BasePageState {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: Container(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

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 {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(‘重写 createPageRoute’),

),

body: Container(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

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 $PAG{E}_{N}AME$ extends BasePage {

最后

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

相信它会给大家带来很多收获：

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

• 无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！
• 我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
收获：**

[外链图片转存中…(img-fHK5dlin-1714745703518)]

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

• 无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！
• 我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！