Flutter中实现页面管理,用上onResume,onHide

这个暂时不维护了,如果需要监听页面的生命周期,来看这个把
Flutter——这一次真的是监听了页面生命周期

刚开始接触flutter,发现flutter中对页面这个概念的支持并不是很好,并且现有的onResume解决方案用起来都不是很方便,所以自己构建了FlutterPage来解决一些需求。

package地址:https://pub.dev/packages/flutter_page
github地址:https://github.com/lp0int/flutter_page

FlutterPage使用指南

关于FlutterPage的思考

在flutter里面,没有类似于传统Native开发的ActivityViewController的概念,所有的内容都是Widget,这样的模式带来的弊端就是加大了我们对页面管理的能力


已有的功能支持

  • 数据绑定
    在FlutterPage里不在需要setState来更新数据,data和page已经绑定了,修改data.xxx就可以直接反映到View中。

  • 生命周期

    1. create()页面创建时调用,等同于initState
    2. destroy()页面销毁时调用,等同于dispose
    3. onHide()打开新的页面后,当前页面会调用
    4. onResume()打开的新页面关闭后会调用
    5. didChangeAppLifecycleState(AppLifecycleState)WidgetsBindingObserver的生命周期,文档

onResume和onHide的实现思路

Flutter并没有onResume这个生命周期,现在有的第三方实现很多也都是调用Navigator的回调或者是监听路由然后用Route#settings里的属性来实现。在实际使用的时候多少都会有限制或者不执行的问题。

在FlutterPage中,维护一个长度最多为 100 的FlutterPage类型的堆栈,当新的FlutterPage被创建了,先调用栈顶的FlutterPage对象执行onHide方法,然后再把新的FlutterPage推入栈顶。当FlutterPage被销毁了,先移除栈顶的对象,在去获取新的栈顶对象,并执行其onResume()方法


使用

Step 1

FlutterPage不对外暴露setState()方法,而是采用了Provider来进行状态同步,所以需要先实现一个继承自ChangeNotifier的类来管理需要动态改变的数据,并且在属性的set方法中调用notifyListeners()方法来通知页面改变。

class PageData extends ChangeNotifier {
  String _name = "initData";

  String get name => _name;

  set name(String value) {
    _name = value;
    notifyListeners();
  }
}

之后就可以直接创建继承自FlutterPage的Page页面了

Step 2

创建一个类,继承自FlutterPage,FlutterPage的泛型指定为第一步我们实现的类

class StatefulPageDemo extends FlutterPage<PageData> {
  @override
  PageData get data => new PageData();

  @override
  Widget build(BuildContext context, PageData data) {
    return Scaffold(
      appBar: AppBar(),
      body: RaisedButton(
          onPressed: () {
            data.name = data.name + "=";
          },
          child: Text(data.xxx),
      ),
    );
  }

  @override
  String get pageTag => "demo_page";
}

有三个必须要重写的内容,分别是

  • data
    页面需要绑定的数据对象,类型为指定的泛型

  • build()
    页面的生成方法,需要返回一个Widget对象,并且页面绑定的数据对象会作为参数传进来

  • pageTage
    页面的唯一标识

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值