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

目录
  • 无状态类
  • 有状态类
  • 状态
  • State生命周期

Flutter中的生命周期类似于Vue、React中的生命周期一样，有初始化、状态更新、停用、销毁等。

在React中，组件分为函数式组件和类式组件，它们的区别就是一个无状态、一个有状态。那么在Flutter中亦是如此，它有两种类，一种是无状态类，一种是有状态类。其生命周期的使用就是有状态类的特定用法。

无状态类

无状态类内部有build方法，在表面上看 每次数据更新都会执行build方法。但实际上，在组件树中，当每次数据发生变更时，无状态类都会重新执行组件LessComponent对象。

class LessComponent extends StatelessWidget {
  const LessComponent({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

有状态类

在有状态类中，每次的数据发生变动，在组件树中只会调用state下的build方法进行重新渲染。这时候就能保存state中的状态。

所谓的状态就是 state里的属性。

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

状态

刚才讲到，状态就是state中的属性值。下面来个示例进行讲解：

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  int count = 0;
  static const sum = 10;
  final nowDate = new DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('${sum}'),
          ElevatedButton.icon(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              icon: Icon(Icons.add),
              label: Text('添加')
          )
        ],
      ),
    );
  }
}

例如 整型值count、常量 sum、当前时间。这都是属于状态值，它们存在的区别就是count可以通过setSatate进行改变。

当每次执行setState()时，此组件都会调用build方法进行将改变的数据进行重新渲染，以此来保证state中的属性值的保存。

State生命周期

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  int count = 0;
  static const sum = 10;
  final nowDate = new DateTime.now();
  @override
  void initState() { // 初始化生命周期钩子
    super.initState();
    //初始化操作 在这里做
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 依赖发生变更时 执行
  }
  @override
  void reassemble() {
    super.reassemble();
    // 重新安装时执行，一般在调试的时候用，在发正式版本时 不会执行
  }
  @override
  void didUpdateWidget(covariant FulComponent oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 组件发生变更时调用，当父组件有变动，子组件也会执行此方法
  }
  @override
  void deactivate() {
    super.deactivate();
    // 停用
  }
  @override
  void dispose() {
    super.dispose();
    // 销毁
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('${sum}'),
          ElevatedButton.icon(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              icon: Icon(Icons.add),
              label: Text('添加')
          )
        ],
      ),
    );
  }
}

到此这篇关于Flutter有无状态类与State及生命周期详细介绍的文章就介绍到这了,更多相关Flutter状态类内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • flutter showModalBottomSheet常用属性及说明

    目录 showModalBottomSheet常用属性 showModalBottomSheet flutter常见控件及例子 贝塞尔曲线 底部弹窗 下拉框 展开闭合控件 输入框 弹出框加叠加(一个红包的样子) showModalBottomSheet常用属性 在使用showModalBottomSheet这个控件时,想要设置圆角,在内容widget设置不管用,然后直接看这个控件的实现原理,一看有个shape属性,感觉有戏!果然设置完毕后,成功了. 注意:一定不要设置builder中的背景颜色,

  • 使用flutter的showModalBottomSheet遇到的坑及解决

    使用flutter的showModalBottomSheet遇到的坑及解决

    目录 遇到了三个比较坑的地方 我们解决完后的效果如下 解决问题一 解决问题二 解决问题三 在使用官方的showModalBottomSheet这个组件时到目前为止 遇到了三个比较坑的地方 1. 无法直接设置圆角: 2. 组件最多只能撑满半屏幕,再多就出界了: 3. 在这个组件里面如果有选择按钮等其他一些需要改变状态的组件时,即便使用setState,状态也无法更新. 我们解决完后的效果如下 解决问题一 使用stack包裹住子组件解决圆角的问题,且需要设置背景颜色为Colors.balck54,这

  • flutter中使用流式布局示例详解

    flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

  • Flutter入门学习Dart语言变量及基本使用概念

    Flutter入门学习Dart语言变量及基本使用概念

    目录 正文 变量 变量的声明赋值 变量的划分 默认值 变量的类型推断修饰符 Late变量 类型判断is和类型转换as 一些重要概念 空安全和可空类型? 表达式和语句 注释 DartPad 正文 Dart是Google发布的开源编程语言,是一种面向对象的语言.其主要应用是Flutter框架开发(Android.IOS),此外,也可以用在服务器.脚本.Web开发中.随着Flutter3.0开始支持全平台开发,Dart也可以实现桌面应用. 关于Dart的介绍不再细说.下面开始Dart的使用介绍 首先记

  • Android开发Flutter 桌面应用窗口化实战示例

    Android开发Flutter 桌面应用窗口化实战示例

    目录 前言 一.应用窗口的常规配置 应用窗口化 自定义窗口导航栏 美化应用窗口 二.windows平台特定交互 注册表操作 执行控制台指令 实现应用单例 三.桌面应用的交互习惯 按钮点击态 获取应用启动参数 四.写在最后 前言 通过此篇文章,你可以编写出一个完整桌面应用的窗口框架. 你将了解到: Flutter在开发windows和Android桌面应用初始阶段,应用窗口的常规配置: windows平台特定交互的实现,如:执行控制台指令,windows注册表,应用单例等: 桌面应用的交互习惯,如

  • Flutter异步操作实现流程详解

    Flutter异步操作实现流程详解

    目录 一.FutureBuilder 二.StreamBuilder 在Flutter中,借助 FutureBuilder 组件和 StreamBuilder 组件,可以非常方便地完成异步操作. 一.FutureBuilder 在讲解FutureBuilder之前,你首先要知道Future是什么,了解了这个,后面再了解该组件就轻松许多. 在不同的编程语言中会有不同的名词来定义,在Dart语言中 选择使用Future类型配合async.await关键字来实现异步支持. Future 表示一个现在不

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

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

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

  • React State与生命周期详细介绍

    React State与生命周期详细介绍

    目录 一.State 1.1 类组件中的State 1.2 函数组件中的State 二.React生命周期 2.1 挂载 2.2 更新 2.3 卸载 2.4 函数式组件useEffect 三.总结 一.State 在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.这和vue中组件的data中的数据是相似的. 1.1 类组件中的State <!DOCTYPE html> <html lang="en"&

  • Android Activity的生命周期详细介绍

    Android Activity的生命周期详细介绍

    Android Activity的生命周期详细介绍 生命周期描述的是一个类从创建(new出来)到死亡(垃圾回收)的过程中会执行的方法.在这个过程中,会针对不同的生命阶段调用不同的的方法. Activity是Android中四大组件之一,是最常见的应用组件,也是用的最多的组件,它能够提供一个界面与用户进行交互.Activity从创建到销毁有多种状态,从一种状态到另一种状态时会激发相应的回调方法,这些回调方法包括:onCreate  onDestory  onStart  onStop  onRes

  • Maven构建生命周期详细介绍

    什么是构建生命周期 构建生命周期是一组阶段的序列(sequence of phases),这些构建生命周期中的每一个由构建阶段的不同列表定义,其中构建阶段表示生命周期中的阶段. 例如,默认(default)的生命周期包括以下阶段(注意:这里是简化的阶段,用于生命周期阶段的完整列表): 验证(validate) - 验证项目是否正确,所有必要的信息可用 编译(compile) - 编译项目的源代码 测试(test) - 使用合适的单元测试框架测试编译的源代码.这些测试不应该要求代码被打包或部署 打

  • Mybatis结果集映射与生命周期详细介绍

    Mybatis结果集映射与生命周期详细介绍

    目录 一.ResultMap结果集映射 1.设计思想 2.resultMap的应用场景 二.生命周期和作用域 一.ResultMap结果集映射 1.设计思想 对简单的语句做到零配置,对于复杂一点的语句,只需要描述语句之间的关系就行了 2.resultMap的应用场景 下面这个是我的数据库表 然后这是我们对应的Java实体类User2,除了有参构造外,它还定义了一个无参构造,而且用户id字段为userId,与数据库表中的id不一致 我们在执行查询方法后可以发现,实体类中的userId和数据库表中的

  • Android Service类与生命周期详细介绍

    Android Service类与生命周期详细介绍

    Android  Service类与生命周期 Service是Android四大组件与Activity最相似的组件,都代表可执行的程序,区别在于Service一直在后台运行且没有用户界面. 1.Service的类图和生命周期 先来看看Service的类图: 接下来看看Service的生命周期: 2.开发Service (1)开发Service需要两步: 第1步:定义子类,继承Service 第2步:在AndroidManifest.xml文件中配置Service (2)创建Service pub

  • Android  Service类与生命周期详细介绍

    Android  Service类与生命周期详细介绍

    Android  Service类与生命周期 Service是Android四大组件与Activity最相似的组件,都代表可执行的程序,区别在于Service一直在后台运行且没有用户界面. 1.Service的类图和生命周期 先来看看Service的类图: 接下来看看Service的生命周期: 2.开发Service (1)开发Service需要两步: 第1步:定义子类,继承Service 第2步:在AndroidManifest.xml文件中配置Service (2)创建Service pub

  • Docker Runc容器生命周期详细介绍

    Docker Runc容器生命周期 容器的生命周期涉及到内部的程序实现和面向用户的命令行界面,runc内部容器状态转换操作.runc命令的参数定义的操作.docker client定义的容器操作是不同的,比如对于docker client的create来说, 语义和runc就完全不同,这一篇文章分析runc的容器生命周期的抽象.内部实现以及状态转换图.理解了runc的容器状态转换再对比理解docker client提供的容器操作命令的语义会更容易些. 容器生命周期相关接口 最基本的require

  • Spring Bean的生命周期详细介绍

    Spring Bean的生命周期详细介绍

    Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring容器.这里,我们讲的也是 ApplicationContext中Bean的生命周期.而实际上BeanFactory也是差不多的,只不过处理器需要手动注册. 一.生命周期流程图: Spring Bean的完整生命周期从创建Spring容器开始,直到最终Spring容器销毁Bean,这其中包含了一系列关

  • jsp 生命周期详细介绍

    jsp 生命周期详细介绍

    jsp 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于servlet生命周期,区别在于JSP生命周期还包括将JSP文件编译成servlet. 以下是JSP生命周期中所走过的几个阶段: 编译阶段:servlet容器编译servlet源文件,生成servlet类 初始化阶段:加载与JSP对应的servlet类,创建其实例,并调用它的初始化方法 执行阶段:调用与JSP对应的servlet实例的服务方法 销毁阶段:调用与JSP对应的s

随机推荐