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

为什么setState会触发2次FutureBuilder运行?

在Flutter中,setState方法用于更新Widget的状态并重新构建UI。当调用setState方法时,Flutter会将该方法标记为“dirty”,并在下一帧绘制之前调用build方法来重新构建UI。

FutureBuilder是Flutter中用于处理异步操作的Widget。它接收一个Future对象,并根据Future的不同状态(未完成、完成、错误)来构建不同的UI。当Future对象的状态发生变化时,FutureBuilder会重新调用其builder函数来构建新的UI。

现在来解答为什么setState会触发2次FutureBuilder运行的问题。这是因为setState方法会导致Widget的状态发生变化,从而触发Flutter重新构建UI。而在UI重建过程中,FutureBuilder也会被重新调用来构建新的UI。因此,当调用setState方法时,会导致FutureBuilder被调用两次。

第一次调用是在setState方法被调用后,Flutter将该方法标记为“dirty”,并在下一帧绘制之前调用build方法来重新构建UI。在这个过程中,FutureBuilder会被调用一次,根据当前Future的状态来构建相应的UI。

第二次调用是在UI重建过程中,Flutter会再次调用build方法来构建新的UI。在这个过程中,FutureBuilder会被再次调用一次,以确保UI与最新的状态保持一致。

总结起来,setState方法会触发2次FutureBuilder运行是因为在UI重建过程中,Flutter会重新调用build方法来构建新的UI,而FutureBuilder作为UI的一部分也会被重新调用。这样可以确保UI与最新的状态保持一致,并及时更新显示的内容。

关于Flutter中的setState方法和FutureBuilder的更多信息,您可以参考腾讯云的Flutter开发文档:

请注意,以上链接是腾讯云提供的Flutter开发文档,仅供参考。

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

相关·内容

【 源码之间 - Flutter 】 FutureBuilder 使用

FutureBuilder组件类 FutureBuilder是一个具有泛型T的类,T代表异步的数据类型,这里也就是List FutureBuilder是一个StatefulWidget...FutureBuilder的核心逻辑 _snapshot初始化完成,然后执行_subscribe()这是FutureBuilder的灵魂 如果widget.future非空,创建callbackIdentity...ConnectionState.waiting---------'); return _buildLoading(); break; } } ---- 接下来异步事件完成后,回调...then中的函数,也就是源码中的这里 可以看出回调中会将异步返回的数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,重新执行build方法,又会回调外界的_...父组件刷新时的_FutureBuilderState的行为 在点击加号时,更新异步方法,获取下一页数据,然后父组件执行setState void _doAdd() { setState(() {

1.1K20
  • 【 源码之间 - Flutter 】 FutureBuilder源码分析

    FutureBuilder组件类 FutureBuilder是一个具有泛型T的类,T代表异步的数据类型,这里也就是List FutureBuilder是一个StatefulWidget...FutureBuilder的核心逻辑 _snapshot初始化完成,然后执行_subscribe()这是FutureBuilder的灵魂 如果widget.future非空,创建callbackIdentity...ConnectionState.waiting---------'); return _buildLoading(); break; } } ---- 接下来异步事件完成后,回调...then中的函数,也就是源码中的这里 可以看出回调中会将异步返回的数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,重新执行build方法,又会回调外界的_builderList...父组件刷新时的_FutureBuilderState的行为 在点击加号时,更新异步方法,获取下一页数据,然后父组件执行setState void _doAdd() { setState(() {

    1.9K10

    FLutter异步加载组件FutureBuilder

    FutureBuilder 在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍的,这时候我们一般显示loading直到加载完成显示正常页面。...在flutter中我们可以在initState中发起异步请求,然后将请求结果赋值给data,并setState刷新页面,在build中可以这样实现 if(data == null){ return...防止FutureBuilder重绘 FutureBuilder是一个StatefulWidget控件,如果父节点重绘rebuild那么FutureBuilder重绘,但是这时候可能我们根本不是要请求数据...,可能仅仅是更新页面上的一个文案,这样就会造成不必要的浪费和消耗,我们要尽量避免,所以就需要防止FutureBuilder重绘。...FutureBuilder重绘源码如下: @override void didUpdateWidget(FutureBuilder oldWidget) { super.didUpdateWidget

    2.2K30

    Flutter | 事件循环,Future

    正文 在 Dart 中,没有多线程的概念,所谓的异步操作全部都是在一个线程里面执行的, 并且不会造成卡顿的原因就是事件循环(Event Loop), 如下图所示,在程序的运行过程中,会有两个事件...return "3秒后的信息"; }).then((value) { print(value); }); async,await async:用来表示函数是异步的,定义的函数返回一个...监听一个 Future,以 Future 的状态来进行 setState class _MyHomePageState extends State { @override...future :接受一个 future,当 future 的值发生变化之后,就会自动调用下面的 build 函数, initialData:初始值,在 future 没完成的时候可以暂时使用该值,该值放在...需要注意的是使用完成之后要进行关闭操作,否则就会泄漏资源 并且 flutter 一直警告, 上面的这种方式只能有一个监听,如果添加多个监听则就会保存,那么如何添加多个监听呢,可以使用广播的方式,如下

    4.3K10

    Flutter Widgets 之 FutureBuilder

    通过上面的示例说明FutureBuilder控件极大的简化了异步任务相关显示的控件,不再需要开发者自己维护各种状态以及更新时调用`State.setState`。...防止FutureBuilder重绘 FutureBuilder是一个StatefulWidget控件,如果在FutureBuilder控件节点的父节点重绘`rebuild`,那么FutureBuilder...也重绘,这不仅耗费不必要的资源,如果是网络请求还会消耗用户的流量,这是非常糟糕的体验,如何解决这个问题?...通过源代码发现FutureBuilder重绘逻辑是这样的: @override void didUpdateWidget(FutureBuilder oldWidget) { super.didUpdateWidget...在重建时判断旧的future和新的future是否相等,如果不相等才会重建,所以我们只需要让其相等即可,有人可能以为设置的future是同一个函数,如下: _future() async{

    1.2K40

    我的 Flutter TDD 心路历程

    按照我们常规的开发流程或者习惯,我们在实现的时候可能忍不住想去优化代码,去想各种边界条件,然后写出一个比较完善的实现版本。...(); setState(() { feedModel = newFeedModel; }); } 复制代码 可以看到,这里有一个 setState,为了能够让加载结束之后更新状态...之前我们想要重构或者优化的,是一些不够优雅的实现,这这次我们要重构的代码让整个框架发生大的变化,具体来说就是构造函数会发生大的变化。...( // 注释1:如果是加载第一页,直接触发 onLoadMore, 并将返回的 Future 传给 FutureBuilder; 如果不是第一页,将 null 返回给 FutureBuilder...省略无关代码 } else { // 注释2:当不是加载第一页,由于将 null 传给了 FutureBuilder,因此代码走到这里来

    1.2K20

    flutter系列之:在flutter中使用媒体播放器

    添加起来也非常简单,只需要执行下面的命令即可: flutter pub add video_player 该命令向pubspec.xml中添加如下的内容: dependencies: flutter...一起使用: body: FutureBuilder( future: playerFuture, builder: (context, snapshot) {...最后我们还要添加一个控制装置,用来控制video的暂停和播放: floatingActionButton: FloatingActionButton( onPressed: () { setState...Icons.play_arrow, ), ) 这里通过videoPlayerController.value.isPlaying来判断视频是否在播放状态,同时在onPressed方法中调用了setState...总结 这样一个可以播放外部视频的app就做好了,运行之后它的界面是这样的: 大家可以在这个播放器的基础上进行扩张,一个属于你自己的视频APP就完成了。

    1.6K00

    Flutter 刷新页面:通过下拉刷新提升用户体验

    当我们使用 RefreshIndicator 来包裹滚动的内容,用户就可以通过下拉页面来触发更新动作。...通过有效地实现这个函数,我们确保用户总是获取到最新的内容,仅仅是通过简单的下拉手势。 集成下拉刷新和状态管理、 当在 Flutter 应用中集成下拉刷新,管理状态就变得尤其重要。...无论选择哪种方法,目标都是确保在触发刷新操作时,应用程序的状态能够反映新数据,而不会导致用户界面的中断或者不一致。...在 RefreshIndicator 挂件中的 onRefresh 回调执行这个方法,确保状态更新,并且 UI 上映射了新数据。...通过注重这些方面,我们可以确保 pull-to-refresh 功能正常运行并对整体用户体验作出积极的贡献。 通过平滑的刷新操作增强用户体验 一个平滑的刷新操作对积极的用户体验至关重要。

    26410

    dotnet 读 WPF 源代码笔记 为什么设置了SplashScreen让Application.Current.Activated事件不触发

    WPF 应用中,可以非常方便将一张图片设置为 SplashScreen 启动界面欢迎图,但是如果有设置了启动界面欢迎界面,那么 Application.Current.Activated 事件就不会被触发...PresentationFramework\System\Windows\Application.cs 的 EnsureHwndSource 函数里面将是入口代码,而在 WmActivateApp 函数就是触发的逻辑...return false; } 也就是说调用进入 WmActivateApp 的参数将决定是否调用 OnActivated 函数,在 OnActivated 函数里面就是事件触发...IntPtr.Zero, wrapperHooks); } } 也就是说 Activated 事件的触发就是依靠...Application 的 EnsureHwndSource 函数调用之前,系统发送了 WM_ACTIVATEAPP 消息给到应用了 所以在 App 的构造函数监听 Activated 事件将不会收到触发

    99440

    flutter仿BOSS直聘(二),大前端技术实现

    已经很久没更新了,而flutter的版本更新了好几次,自flutter 1.0正式版推出之后,一直有打算把之前的项目重写一下,因为flutter本身更新了许多新特性,老的已经是过去式了,也老有人来问我,之前的项目运行不了...于是,笔者怀着对新技术热情的学习态度重写了这个开源项目,并且后续也不断完善。 为什么选仿BOSS直聘作为题材?...这里就不过多占用篇幅了,本文主要还是讲flutter,对前端感兴趣的另外分享相关技术话题。 flutter端: 项目中使用以下组件,请记住一句咒语:flutter一切皆组件。...Container, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder,..._scrollListener() { setState(() { if (_scrollController.offset < 56 && _isShow) { _

    1.9K20
    领券