Flutter改变状态变量是否必须写在setState回调详解

正文

我们都知道 setState(VoidCallback fn) 是这样用的：

setState(() {
  count++;
});

执行完后组件会重新 build()，就可以取到 count 的最新值了。但其实这样写也是一样的：

count++;
setState(() {});

因为 setState() 最后会调用 markNeedsBuild()，Flutter 会调度使组件 rebuild，所以状态变量的改变不是必须写在 setState() 的回调里面，只需要最后执行一下 setState() 也可以达到刷新界面的效果。

那为什么 Flutter 要设计 setState() 有个回调函数呢？有两个原因：

一是 setState() 的状态更新是同步的，如果你在 fn 里返回了一个 Future 去改变状态的值，setState 内部的断言会提示你不要这样做，应该在 Future 完成后在同步代码里去调用 setState 改变状态。

二是为了代码可维护性考虑。试想一下随着业务代码的迭代，可能会有很多状态变量会发生改变，比如一开始只有状态变量 a，后来加入了状态变量 b 和 c，代码变成这样：

a++;
b++;
c++;
setState(() {});

当后续业务发生变化这些状态变量都不需要了，后面维护的童鞋把这些状态变量都删除了。因为大家通常都只关注改自己的代码，会有可能忘记删除最后的 setState，代码就变成了这样：

// a++;
// b++;
// c++;
setState(() {});

这样就造成了不必要的 rebuild 浪费。所以综上所述，特别是考虑到代码的维护性，我们都应该把状态变量的改变放到 setState 的回调里面。

以上就是Flutter改变状态变量是否必须写在setState回调详解的详细内容，更多关于Flutter改变状态变量setState回调的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • flutter InheritedWidget使用方法总结

    目录 引言 didChangeDependencies 如何使用? 结论 引言 InheritedWidget,flutter中非常重要的一个功能组件.比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 中来获取该共享的数据. didChangeDependencies 说到 InheritedWidget ,我们不得不聊聊 state 对象中的 didChangeDependencies 方法.当子控件依赖使用了父控件中的

  • flutter Bloc 更新后事件同步与异步详解

    目录 前言 使用方式 Bloc 新形态用法 事件队列的阻塞属性? 前言 最近,小轰参与了公司 flutter 项目关于 Dart 2.0 的空安全升级工作.我们升级了所有依赖的三方库,其中就包括有 Bloc 库.作为一款使用率颇高的状态管理框架, Bloc 在版本迭代中进行了少许结构和细节的优化,下面是小轰对于 Bloc 新版本的使用总结. 使用方式 小轰使用的 Bloc 版本如下 flutter_bloc: ^7.3.1 通过最简单的例子来学习新知识 创建一个包含 加 减 操作的页面,使用 b

  • flutter中如何使用和扩展ThemeData实现详解

    目录 前言 Theme 的基本使用方式 1. Theme 的注册 2. 读取 ThemeData 里的配置: 小技巧介绍 ThemeData 内置字段不够用,如何扩展? 如何实现一键换肤 1. 首先在 yaml 新增引入 provider 2. 创建主题枚举 3. ThemeData 进行一层封装处理 4. 创建一个主题管理类 ThemeConfig 5. 通过ThemeData进行读取保持统一 6. 基于 provider 的使用 7. 创建一个主题仓库,里面存放两套主题,用于演示 Demo

  • Flutter 状态管理scoped model源码解读

    目录 一.什么是 scoped_model 二.用法 三.实现原理 四.结束 一.什么是 scoped_model 本文主要从 scoped_model 的简单使用说起,然后再深入源码进行剖析(InheritedWidget.Listenable.AnimatedBuilder),不会探讨 Flutter 状态管理的优劣,单纯为了学习作者的设计思想. scoped_model 是一个第三方 Dart 库,可以让您轻松的将数据模型从父 Widget 传递到子 Widget.此外,它还会在模型更新时

  • Flutter 绘制风车实现示例详解

    Flutter 绘制风车实现示例详解

    目录 前言展示 1. 风车 1 的绘制 2. 风车 2 的绘制 3. 旋转动画的处理 4. 旋转动画的圈数 前言展示 最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见[windmill.dart] .绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到: 路径的使用 画板的旋转变换 动画曲线与 Tween 的使用 风车1 风车2 1. 风车 1 的绘制 第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是

  • 使用PlatformView将 Android 控件view制作成Flutter插件

    使用PlatformView将 Android 控件view制作成Flutter插件

    目录 引言 1. FlutterPlugin 创建 2. 创建 Android 控件 3. 注册 Android 控件 4. 封装 Android 层通信交互 ‘CustomViewController’ 代码说明 5. 在 flutter 中如何使用已注册的 Android 控件(view) 代码说明 如何使用这个View 6. 附上 example 完整代码 引言 小编最近在项目中实现相机识别人脸的功能,将 Android 封装的控件 view 进行中转,制作成 FlutterPlugin

  • Flutter改变状态变量是否必须写在setState回调详解

    正文 我们都知道 setState(VoidCallback fn) 是这样用的: setState(() { count++; }); 执行完后组件会重新 build(),就可以取到 count 的最新值了.但其实这样写也是一样的: count++; setState(() {}); 因为 setState() 最后会调用 markNeedsBuild(),Flutter 会调度使组件 rebuild,所以状态变量的改变不是必须写在 setState() 的回调里面,只需要最后执行一下 set

  • Flutter实现自定义下拉选择框的示例详解

    Flutter实现自定义下拉选择框的示例详解

    在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选.单选.列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以最好我们可以自己做一个,这样即使扩展我们也会得心应手. 先看效果图: 关键点:弹出.收回动画.状态改变.选项联动 思路: 我们可以看到一个完整的下拉框有头部和具体的下拉选项两部分组成,头部又和下拉组进行了联动, 把头部当做1个数组,下方选项作为1个数组,两个数组数量一致之间形成一个完整的下拉选择框可以更好的控制联动效

  • IOS 改变导航栏返回按钮的标题实例详解

    IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

  • Flutter网络请求Dio库的使用及封装详解

    Flutter网络请求Dio库的使用及封装详解

    目录 一.项目目录结构 二.封装思路: 三.添加依赖 四.简单实现网络请求 五.实现登录注册服务 六.使用service服务 Dart语言内置的HttpClient实现了基本的网络请求相关的操作.但HttpClient本身功能较弱,很多网络请求常用功能都不支持,因此在实际项目中,我们更多是使用dio库实现网络请求. 注:Flutter官网同样推荐在项目中使用Dio库. Dio文档地址: pub.dev地址:dio | Dart Package 一.项目目录结构 文件夹 功能 components

  • Flutter实现一个支持渐变背景的Button示例详解

    Flutter实现一个支持渐变背景的Button示例详解

    目录 Flutter中的按钮 不完美的地方 在child中处理 外面套一个wrapper MaterialStateProperty MaterialStatesController 边距问题 EnhancedButton Flutter中的按钮 自Flutter 1.20 新增了ButtonStyleButton 系列按钮,可以说非常好用了,默认样式比之前漂亮了许多,扩展性也增加了很多.按钮样式统一由ButtonStyle这个类提供,支持根据各种状态(MaterialState)变化的属性,也

  • React使用useEffect解决setState副作用详解

    React使用useEffect解决setState副作用详解

    目录 介绍一下API fetch()方法访问API setState的副作用 使用useEffect解决这个问题 使用useEffect操控函数运行 介绍一下API 本文主要内容:描述了setState与fetch之间产生的冲突副作用,并使用useEffect进行解决 API,即Application Programming Interface,应用程序接口,是很多程序向开发人员提供的易于使用的抽象化的代码. 比如经常会用到的查询天气API,智能识图API,如果是直接照着复杂的代码编写,会相当不

  • Flutter学习之创建一个内嵌的navigation详解

    目录 简介 搭建主Navigator 构建子路由 总结 简介 我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面,从而达到页面调整的目的. 一般情况下这样已经足够了,但是有时候我们有多个Navigator的情况下,上面的使用方式就不够用了.比如我们有一个主页面app的Navigator,然后里面有一个匹配好友的功能,这个功能有多个页面,因为匹配好友功能的多个页面实际上是一个完整的流程,所以这些页面需要被放

  • Eclipse中改变默认的workspace的方法及说明详解

    eclipse中改变默然的workspace的方法可以有以下几种: 1.在创建project的时候,手动选择使用新的workspace,如创建一个web project,在向导中的Location选项,取消使用"Use default location",同时在下面选择新的workspace. 2.在file菜单中选择switch workspace项,即可选择一个新的workspace 3.在eclipse安装目录下configuration/.settings目录下的 org.ec

  • InnoDB的关键特性-插入缓存,两次写,自适应hash索引详解

    InnoDB的关键特性-插入缓存,两次写,自适应hash索引详解

    InnoDB存储引擎的关键特性包括插入缓冲.两次写(double write).自适应哈希索引(adaptive hash index).这些特性为InnoDB存储引擎带来了更好的性能和更高的可靠性. 插入缓冲 插入缓冲是InnoDB存储引擎关键特性中最令人激动的.不过,这个名字可能会让人认为插入缓冲是缓冲池中的一个部分.其实不然,InnoDB缓冲池中有Insert Buffer信息固然不错,但是Insert Buffer和数据页一样,也是物理页的一个组成部分. 主键是行唯一的标识符,在应用程序

  • vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

    一.设置Fira_Code字体 1.下载字体 这里给出github下载链接,点击链接后在README.md中的Download & Install一栏中即可下载,链接中也包括字体示例及介绍,可自行查看. Fira_Code字体下载 2,安装字体 下载并解压,进入里面的ttf文件夹,双击或右击后点击安装,里面包含六种样式,可以选择性安装或全安装即可. 3,设置vscode 打开vscode,点击左下角齿轮形状图标,选择settings,得到下图所示界面: 根据上图箭头所示依次点击Font,Edit

随机推荐