首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当调用SetState()时,如何避免UniqueKey闪烁的颤动FutureBuilder?

在调用SetState()时,避免UniqueKey闪烁的颤动FutureBuilder的方法是使用ValueKey来确保每次刷新时都使用相同的key。

UniqueKey是Flutter中的一个特殊的Key,它在每次重建时都会生成一个新的唯一标识符。当使用UniqueKey作为FutureBuilder的key时,由于每次刷新都会生成新的key,会导致FutureBuilder重新构建,从而导致闪烁的颤动。

为了避免这种闪烁,可以使用ValueKey来替代UniqueKey。ValueKey是一个根据给定的值生成的Key,只要值不变,Key就不会变化。在调用SetState()时,可以将ValueKey与FutureBuilder一起使用,确保每次刷新都使用相同的key。

以下是一个示例代码:

代码语言:txt
复制
int _counter = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Example'),
    ),
    body: FutureBuilder(
      key: ValueKey(_counter), // 使用ValueKey
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Text('Data: ${snapshot.data}');
        }
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _counter++; // 每次调用SetState()时更新_counter的值
        });
      },
      child: Icon(Icons.add),
    ),
  );
}

Future<String> fetchData() async {
  // 模拟异步获取数据
  await Future.delayed(Duration(seconds: 2));
  return 'Data';
}

在上述示例中,我们使用_counter作为ValueKey的值,并在调用SetState()时更新_counter的值。这样,每次刷新时都会使用相同的key,避免了UniqueKey闪烁的颤动。

值得注意的是,这只是一种解决UniqueKey闪烁的颤动的方法,具体应用场景和推荐的腾讯云相关产品取决于具体的业务需求和技术架构,可以根据实际情况选择适合的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

FLutter异步加载组件FutureBuilder

在flutter中我们可以在initState中发起异步请求,然后将请求结果赋值给data,并setState刷新页面,在build中可以这样实现 if(data == null){ return..._LoadingWidget() } else{ return ... } 实际上flutter提供了一个FutureBuilder专门来处理需要异步组件,下面是一个简单示例: var _...任务正常完成(ConnectionState.done且snapshot.hasError为false),我们可以通过snapshot.data来获取异步返回数据,再渲染页面即可。...,可能仅仅是更新页面上一个文案,这样就会造成不必要浪费和消耗,我们要尽量避免,所以就需要防止FutureBuilder重绘。...( future: _mFuture, ... ) 这样重绘时候因为是同一个对象,所以FutureBuilder不会重绘,减少了不必要资源损耗。

2.2K30
  • 【 源码之间 - Flutter 】 FutureBuilder 使用

    FutureBuilder使用 先定义异步任务和当前页码,在使用FutureBuilder进行构造组件。全代码见文尾。...FutureBuilder组件类 FutureBuilder是一个具有泛型T类,T代表异步数据类型,这里也就是List FutureBuilder是一个StatefulWidget...---- 还有个比较重要是连接状态ConnectionState enum ConnectionState { none, # 初始化时最初 waiting, # 刚开始执行异步任务,等待期...,也就是源码中这里 可以看出回调中会将异步返回数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,会重新执行build方法,又会回调外界_builderList...父组件刷新_FutureBuilderState行为 在点击加号,更新异步方法,获取下一页数据,然后父组件执行setState void _doAdd() { setState(() {

    1.1K20

    Flutter Widgets 之 FutureBuilder

    展示异步任务状态 有一个Future(异步)任务需要展示给用户,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功显示成功提示: var _future = Future.delayed...ListView加载网络数据 FutureBuilder还有一个比较常用场景:网络加载数据并列表展示,这是一个非常常见功能,在网络请求过程中显示loading,请求失败显示失败UI,成功显示成功...通过上面的示例说明FutureBuilder控件极大简化了异步任务相关显示控件,不再需要开发者自己维护各种状态以及更新时调用`State.setState`。...也会重绘,这不仅耗费不必要资源,如果是网络请求还会消耗用户流量,这是非常糟糕体验,如何解决这个问题?...在重建判断旧future和新future是否相等,如果不相等才会重建,所以我们只需要让其相等即可,有人可能会以为设置future是同一个函数,如下: _future() async{

    1.2K40

    Flutter | 事件循环,Future

    补充上图:Micortask Queue 为空 才会执行 EventQueue ,EventQueue 为空程序结束,实际上,事件循环从启动之后会一直执行。...在程序执行过程中,如果有异步操作,这个操作就会添加到队列中,发现队列不为空,就会然后不断从队列中取出事件在执行 Microtask Queue 一个顶级队列,只要这个队列里面不是空,就一定会执行该队列中任务...需要注意是使用完成之后要进行关闭操作,否则就会泄漏资源 并且 flutter 会一直警告, 上面的这种方式只能有一个监听,如果添加多个监听则就会保存,那么如何添加多个监听呢,可以使用广播方式,如下...GridView,点击到对应按钮上,则发送输入数字,已经分数 -2,至于为啥减2,后面你就知道了。...,最后开启动画 build 中其实是很简单,使用了 AnimatedBuilder 来监听动画,动画值改变后则会重新 setState(),内部就是一个小按钮,记录了题目,注意背景颜色是 0.5

    4.3K10

    【 源码之间 - Flutter 】 FutureBuilder源码分析

    FutureBuilder使用 先定义异步任务和当前页码,在使用FutureBuilder进行构造组件。全代码见文尾。...FutureBuilder组件类 FutureBuilder是一个具有泛型T类,T代表异步数据类型,这里也就是List FutureBuilder是一个StatefulWidget...---- 还有个比较重要是连接状态ConnectionState enum ConnectionState { none, # 初始化时最初 waiting, # 刚开始执行异步任务,等待期...,也就是源码中这里 可以看出回调中会将异步返回数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,会重新执行build方法,又会回调外界_builderList...父组件刷新_FutureBuilderState行为 在点击加号,更新异步方法,获取下一页数据,然后父组件执行setState void _doAdd() { setState(() {

    1.9K10

    flutter中key作用

    翻译过来: 控制一个小部件如何替换树中另一个小部件。...找到新widget(其键和类型与相同位置先前widget不匹配),但是在前一帧树中其他位置有一个具有相同全局键widget,该widgetelement将移至新位置。...需要在一个StatefulWidget集合中进行添加、删除、重排序等操作,才是key登场时候。...无状态组件 下面这段代码在一个Row中展示了两个彩色方片(StatelessContainer),点击按钮,会交换两个方片位置: 代码如下 import 'dart:math'; import...它将会通过该对象生成一个具有唯一性 hash 码。 不过这样做,每次 Widget 被构建都会去重新生成一个新 UniqueKey,失去了一致性。也就是说你小部件还是会改变。

    1.6K10

    Flutter | 定义一个通用多功能网络请求 Widget

    不过,后续还是会每周最少更新两篇! 那说起网络请求控件,我们首先是不是会想起 FutureBuilderFutureBuilder 给我们封装好了网络请求中各种状态。...确认网络请求控件所需要功能 我们从最开始图中明显能看出来,其实是有三个功能: 1.请求数据并显示 Loading2.正常返回正常数据,错误时返回错误 Widget3.错误 Widget 可以点击重新请求...而且我们不能在使用该控件时候调用网络请求方法,因为网络请求中封装了一个 Loading,这个 Loading 需要 BuildContext。...,这样一举两得: 既不用在使用该控件时候调用方法,又避免了 Loading 使用 BuildContext 报错问题。...正常返回正常数据,错误时返回错误 Widget 这就需要我们封装好网络请求和 FutureBuilder 有一个互动了, 网络请求逻辑如下: ?

    1.7K31

    【Flutter 专题】71 图解基本隐式动画 Widget

    ;其中切换状态和时长是必要属性; 案例尝试 和尚尝试一个基本动画过程,两个方块之间进行切换; return GestureDetector( onTap: () { setState(() =...alignment 为尺寸动画切换对齐位置,两个 Widget 大小不同时效果明显,和尚尝试了两种位置进行对比; alignment: Alignment.bottomRight, alignment...sizeCurve 为尺寸切换动画,两个 Widget 大小不同时效果明显; sizeCurve: Curves.easeInExpo, sizeCurve: Curves.fastOutSlowIn...layoutBuilder 为布局构造器,这个是和尚认为最值得研究地方,构造器并不陌生,但在这里作用却比较特殊,通过 Stack 将两个 Widget 层级叠放,底部 Widget 默认尺寸位置以上层...child Widget 内容或 Key 有变更,old child 会执行隐藏动画,new child 会执行展现动画; 案例尝试 和尚尝试切换两个基本方块,但刚开始切换动画时长和反向切换动画时长没有效果

    79731

    基于状态模式: 没有实践,再多理论都是扯淡!!!

    基于状态模式: 没有实践,再多理论都是扯淡!!! 定义 • 状态模式是一种面向对象设计模式,它允许一个对象在其内部状态改变改变它对应行为。...• 状态模式关键在于如何区分事物内部状态,事物内部状态改变往往会带来事物行为改变。 • 通常我们谈到封装,一般都会优先封装对象行为(比如,某个函数),而不是对象状态。...在经过一定时间后,通过调用 trafficLight.stopBlinking(); 方法,闪烁状态会停止。输出 "闪烁灯停止",并将状态设置为红灯状态。...简化条件语句:通过将状态判断和状态行为分离,避免了大量条件语句。 3. 符合开放——封闭原则:添加新状态,不需要改变原有代码。 4. 提高了代码可扩展 • 缺点: 1....不适合状态过多情况 状态模式性能优化点 1. 惰性初始化:延迟初始化对象可减少启动开销,可将状态对象创建延迟到真正需要时候再进行初始化,而不是在启动创建所有可能状态对象 2.

    9310

    一个会做饭程序员如何每天给女朋友带不同便当?

    随机选菜并附带随机效果 该功能我们也需要考虑一下,从上图也可以看到,会多次随机菜品,然后刷新页面, 那这个时候肯定不能用 setState(),因为 setState() 会多次 build 我们页面...因为截图会有一定延时,并且返回值为一个 Future ,那我们没有理由不用 FutureBuilder,如有不了解 FutureBuilder ,可以查看我这篇文章:Flutter FutureBuilder...查看所有菜谱和菜谱使用时间 该功能主要为装逼所用,别人一看:卧槽,会做这么多菜,牛逼??。 ? 该功能其实也有几个需要注意点: 1.如何展示素菜和荤菜2.如何实时更新已经使用过/新增菜?...该功能就需要用到我们所说状态管理,这里我使用是 Scoped_Model。 在首页和该页都会使用到该功能,已经使用一个菜时候,所有菜品里应实时更新,新增菜品时候也应如此。...经过我不懈努力,终于,在网上找到了别人重写 showModalBottomSheetApp。 可以顺利弹起布局了。然后在点击保存调用 Scoped_Model 中增加菜谱方法。

    1.1K50

    Flutter中Key详解

    此时注意,复用widget是Stateful类型widget,我们一定要为其指定key以对其做唯一标识,否则就会因为复用机制而出现意想不到Bug。...交换两个控件位置,情况如下图所示: 控件对应代码如下: class CustomButton extends StatefulWidget { final Color color;...接下来我们再来看一个没有Key删除某一个控件例子: 删除最上面的红色组件之后,Element树中第一位置存储了数字3Element发现Widget树中第一位置widget和他创建RenderObject...典型一个场景就是:ListView组件中Item组件公用。 那么,我们该如何去创建一个Key呢?...(new Student('gpf'))), CustomButton(Colors.red, key: ValueKey(new Student('gpf'))), 对于上面的代码写法,交换位置

    2.4K31

    Flutter 流体滑块

    下面的演示视频显示了如何颤动中创建流畅滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...它显示了具有不同颜色三流体滑块,并为用户使用了不同工作属性。它会显示在您设备上。 属性 onChanged: 此属性是必需,并且在用户开始为滑块选择新值时调用该属性。...**onChangeStart:** 当用户开始为滑块选择新值,将调用此属性。 onChangeEnd: 用户为滑块选择新值,将调用此属性。...在内部,我们将添加值,表示此滑块当前选择值。添加将为流体滑块创建变量。当用户开始为滑块选择新值,我们将添加onChanged方式调用。在内部,我们将添加**setState()。...**在setState中,我们将添加一个等于新值变量。

    11.6K20

    抖音强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫

    界面更新 支持国家化,多语言切换 ipfs上传、下载文件 登录页面 注册页面 上下轮播优化播放效果 点赞功能 其他功能还在继续完善,各位喜欢的话欢迎点个star 前端项目地址:https://github.com..., ); }, ); 然后在需要引用位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用位置...采用FutureBuilder对界面请求数据异步处理,加载完成后才播放,效果更佳 代码如下: eturn FutureBuilder( future: videos, builder...== ConnectionState.waiting时候请求数据正在加载中,则显示加载图标loading snapshot.connectionState == ConnectionState.done...,此时数据已经加载完毕,但是加载完毕有可能也没有数据,所以需要判断不同情况 加载出现异常情况则显示异常widget if (snapshot.hasError) { return

    1K20
    领券