Flutter组件生命周期和App生命周期示例解析

目录
  • 引言
  • 无状态组件(StatelessWidget)
  • 有状态组件(StatefulWidget)
  • StatefulWidget生命周期详细分析
    • 1. createState
    • 2. initState
    • 3. didChangeDependencies
    • 4. build
    • 5. didUpdateWidget
    • 6. deactivate
    • 7. dispose
    • 8. reassemble
  • App生命周期
  • 结束语

引言

在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周期其实就是Widget的生命周期。 在 Flutter 中一切皆 组件,而组件又分为 StatefulWidget(有状态) 和 StatelessWidget(无状态)组件

无状态组件(StatelessWidget)

无状态组件,可以理解为将外部传入的数据转化为界面展示的内容,只会渲染一次。

有状态组件(StatefulWidget)

有状态组件,是定义交互逻辑和业务数据,可以理解为具有动态可交互的内容界面,会根据数据的变化进行多次渲染。

StatefulWidget生命周期详细分析

1. createState

当StatefulWidget被创建时立即执行createState。createState 函数执行完毕后表示当前组件已经在 Widget 树中,此时有一个非常重要的属性mounted设置为true。

2. initState

该函数为 State 初始化调用,只会被调用一次。因此,通常会在该回调中做一些一次性的操作,如执行 State 各变量的初始赋值,获取服务端数据等。

3. didChangeDependencies

该函数是在该组件依赖的 State 发生变化时会被调用。didChangeDependencies 方法调用后,组件的状态变为 dirty,立即调用 build 方法。

4. build

主要是在方法中创建各种组件,绘制到屏幕上,由于 build 会被调用多次,因此在该函数中只能做返回 Widget 相关逻辑,避免因为执行多次而导致状态异常。因此此方法可以在每一帧中调用,此方法中应该只包含构建组件的代码,不应该包含其他额外的功能,尤其是耗时任务。

5. didUpdateWidget

该函数主要是在组件重新构建,比如说热重载,父组件发生 build 的情况下,子组件该方法才会被调用,其次该方法调用之后一定会再调用本组件中的 build 方法。此方法中通常会用当前组件与前组件进行对比。Framework 调用完此方法后,会将组件设置为 dirty 状态,然后调用 build 方法,因此无需在此方法中调用 setState 方法。

6. deactivate

在组件被移除节点后会被调用,在某些情况下,框架将重新插入 State 对象到树的其他位置(例如,如果包含该树的子树 State 对象从树中的一个位置移植到另一位置),框架将会调用 build 方法来提供 State 对象适应其在树中的新位置。

7. dispose

永久移除组件,并释放组件资源。调用完 dispose后,mounted 属性被设置为 false,也代表组件生命周期的结束,此时再调用 setState 方法将会抛出异常。

8. reassemble

主要在开发阶段使用,在 debug 模式下,每次热重载都会调用该函数,因此在 debug 阶段可以在此期间增加一些 debug 代码,来检查代码问题。

App生命周期

App的生命周期的监听,在Flutter中需要通过监听器WidgetsBindingObserver监听器中的AppLifecycleState方法来是实现。

class AppLifePage extends StatefulWidget {
  CEAppLifePage({Key key}) : super(key: key);
  @override
  _AppLifePageState createState() => _AppLifePageState();
}
//  实现WidgetsBindingObserver观察者
class _AppLifePageState extends State<AppLifePage> with WidgetsBindingObserver{
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this); //添加观察者
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("App生命周期"),),
      body: Text('Flutter App 生命周期'),
    );
  }
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print("didChangeAppLifecycleState: $state");
    switch (state) {
        case AppLifecycleState.resumed:
          print('应用程序可见且响应用户输入。');
          break;
        case AppLifecycleState.paused:
          print('应用程序不可见且无法响应用户输入,运行在后台。');
          break;
        case AppLifecycleState.inactive:
          print('应用程序处于非激活状态,无法响应用户输入。');
          break;
        case AppLifecycleState.detached:
          print('应用程序仍寄存在Flutter引擎上,但与平台 View 分离。');
          break;
      }
  }
  //  当前系统改变了一些访问性活动的回调
  @override
  void didChangeAccessibilityFeatures() {
    super.didChangeAccessibilityFeatures();
    print("didChangeAccessibilityFeatures");
  }
  //  低内存回调
  @override
  void didHaveMemoryPressure() {
    super.didHaveMemoryPressure();
    print("didHaveMemoryPressure");
  }
  //  用户本地设置变化时调用,如系统语言改变
  @override
  void didChangeLocales(List<Locale> locale) {
    super.didChangeLocales(locale);
    print("didChangeLocales");
  }
  //  应用尺寸改变时回调,例如旋转
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    Size size = WidgetsBinding.instance.window.physicalSize;
    print("didChangeMetrics  :宽:${size.width} 高:${size.height}");
  }
  //  系统切换主题时回调
  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    print("didChangePlatformBrightness");
  }
  //  文字系数变化
  @override
  void didChangeTextScaleFactor() {
    super.didChangeTextScaleFactor();
    print(
        "didChangeTextScaleFactor  :${WidgetsBinding.instance.window.textScaleFactor}");
  }
  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this); //  销毁观察者
  }
}

重点是重写 didChangeAppLifecycleState 方法,AppLifecycleState 中的状态包括:resumed、inactive、paused、detached。

resumed:应用程序可见且响应用户输入。

inactive:应用程序处于非激活状态,无法响应用户输入。在iOS上,打电话、响应TouchID请求、进入应用程序切换器或控制中心都处于此状态。在Android上,分屏应用,打电话,弹出系统对话框或其他窗口等。

pause:应用程序不可见且无法响应用户输入,运行在后台。处于此状态时,引擎将不会调用 Window.onBeginFrame 和 Window.onDrawFrame。

detached:应用程序仍寄存在Flutter引擎上,但与平台 View 分离。处于此状态的时机:引擎首次加载到附加 到一个平台 View的过程中,或者由于执行 Navigator pop ,view 被销毁。

结束语

以上就是Flutter组件生命周期和App生命周期示例解析的详细内容,更多关于Flutter 组件APP生命周期的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter有无状态类与State及生命周期详细介绍

    目录 无状态类 有状态类 状态 State生命周期 Flutter中的生命周期类似于Vue.React中的生命周期一样,有初始化.状态更新.停用.销毁等. 在React中,组件分为函数式组件和类式组件,它们的区别就是一个无状态.一个有状态.那么在Flutter中亦是如此,它有两种类,一种是无状态类,一种是有状态类.其生命周期的使用就是有状态类的特定用法. 无状态类 无状态类内部有build方法,在表面上看 每次数据更新都会执行build方法.但实际上,在组件树中,当每次数据发生变更时,无状态类都

  • Flutter状态管理Provider示例解析

    目录 什么是状态管理 常见的状态管理框架有哪些 Provider Redux GetX Provider 使用 添加依赖 导入应用 定义需要共享的数据 在应用程序入口初始化 使用共享数据 状态管理的好处 结束语 什么是状态管理 状态管理是一个十分广泛的概念,因为状态无处不在.从广义角度讲状态管理就是页面跟代码.跟服务器进行数据同步.例如:你在某购物应用内,添加了一件商品,你需要在购物车页面进行展示.这就是一种状态.相反的,你在商品页面点击了添加到购物车,却在购物车页面没有发现或者过段时间它才展示

  • Flutter Widget之FutureBuilder使用示例详解

    目录 正文 正文 本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁. 例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用. 但是涉及Future时,你如何构建Flutter小部件呢? 输入FutureBuilder,这是处理Futures的构造器 FutureBuilder( future: _data, builder: _myBuilderFunction, ) FutureBuilder让你

  • Flutter 包管理器和资源管理使用学习

    目录 什么叫包管理器 Flutter 包管理器 Pub仓库 资源管理 配置图片资源 配置全局字体资源 结束语 什么叫包管理器 包管理器就是用来管理程序运行依赖的一个配置应用.在程序运行中,我们会用到各种各样的第三方程序包,若我们手动管理这些程序,他将变得十分臃肿.这时候便诞生了包管理器,类似于手机中的AppStore.比如说我们手机中的某个程序更新了,我们就可以通过AppStore来更新.同样的我们可以通过包管理来更新我们程序中用到的依赖包. Flutter 包管理器 Flutter包管理器是Y

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter StreamBuilder组件实现局部刷新示例讲解

    目录 一.前言 二.StreamBuilder 简介 三.StreamBuilder的实际应用 总结 一.前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作.包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求. 本文记录的是通过St

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • Flutter组件生命周期和App生命周期示例解析

    目录 引言 无状态组件(StatelessWidget) 有状态组件(StatefulWidget) StatefulWidget生命周期详细分析 1. createState 2. initState 3. didChangeDependencies 4. build 5. didUpdateWidget 6. deactivate 7. dispose 8. reassemble App生命周期 结束语 引言 在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周

  • Android四大组件之Activity深入解读生命周期

    目录 一.什么是Activity 二.Activity之间的跳转 三.Activity 生命周期 3.1.Activity生命周期的基本状态 3.2.Activity 生命周期的7个方法 3.3.Activity 生命周期的三个循环 简介:在Android组件中最基本也是最为常见的四大组件: Activity Service服务 Content Provider内容提供者 BroadcastReceiver广播接收器 一.什么是Activity Activity是一个应用程序组件,提供一个屏幕,

  • 微信小程序App生命周期详解

    微信小程序App生命周期: onLaunch--当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow --当小程序启动,或从后台进入前台显示,会触发 onShow onHide --当小程序从前台进入后台,会触发 onHide onError --当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 //app.js App({ /** *当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: fun

  • 微信APP生命周期及页面生命周期示例详解

    目录 官方文档 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 官方文档 https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注册一个App 1 在注册app的时候,可以判断小程序的进入场景 2

  • 详解WPF中的APP生命周期以及全局异常捕获

    目录 APP生命周期 窗体生命周期事件 全局异常捕获 APP生命周期 wpf项目目录中有一个App.xaml.cs文件,该文件中App是一个partical类,与之对应的另一partical部分在App.g.i.cs文件中,该文件是在编译的时候WPF自动生成的.程序的入口Main方法在该文件中定义. [System.STAThreadAttribute()] [System.Diagnostics.DebuggerNonUserCodeAttribute()] [System.CodeDom.C

  • vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

  • Flutter组件开发过程完整讲解

    首先统一一个概念,不管是component(组件),widget(控件),module(android的模块)在我的理解能力范围内,都是为了抽离某个特定的功能,对外接受参数,对内实现功能的某一个代码块. 它是一个颗粒化的实体,是相对于建筑物的钢筋,水泥,砖头.他们个有特点,相互独立,各有特性,同时又提供了某种可以内聚融合的对外接口.component(组件),widget(控件)下面都统称组件,对component,widget有不同理解的朋友,希望能在评论区收到你们的见解和建议. 在前端开发中

  • Flutter 点击两次退出app的实现示例

    目录 1.App组件 2.InAppWebview组件 在安卓手机上才会有物理返回键,而ios手机是没有的,所以说这个是安卓手机独有的功能. 使用场景:当用户在某一段时间内连续点击两次返回键,才会被认为是退出应用. 在Flutter中想实现这个功能,首先我们先来认识一个Flutter中的组件WillPopScope,在Flutter中我们是用这个组件来实现物理返回键拦截的,从而实现点击两返回键退出应用. onWillPop是他的一个回调函数,当用户点击返回按钮时被调用(Android物理返回按钮

  • Android开发中Flutter组件实用技巧

    目录 正文 简化 Assert 管理 更容易 imports 从按钮上移除飞溅效果 更简单的平台小工具 可见性小工具 正文 今天我将向您展示 4 个非常有用的 Flutter 技巧,您可以立即应用到您的项目.我不会向您展示任何包或扩展,就像我通常做的那样,但是非常简单,但是非常有用的提示! 简化 Assert 管理 管理 Assert 可能非常困难.如果你想在你的应用程序中多次使用一个图像,你必须一次又一次地指定路径.但是有一个简单得多的解决方案.创建一个 App Assets 类,用于存储所有

  • VUE使用 wx-open-launch-app 组件开发微信打开APP功能

    在微信中开发使用vue框架,通过 wx-open-launch-app 微信自定义注册组件开发 微信H5打开app功能 template <template> <div class="beva-home"> <!-- ===== 微信浏览器打开贝瓦APP ===== --> <div class="weixin-open-app" v-if="openAppState"> <img class

随机推荐