Flutter setState会更改状态，但不会重新渲染 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

flutter为什么会分为StatefulWidget 与 StatelessWidget ？

这是因为 Widget 需要依据数据才能完成构建，而对于 StatefulWidget 来说，其依赖的数据在 Widget 生命周期中可能会频繁地发生变化。...setState 方法是 Flutter 以数据驱动视图更新的关键函数，它会通知 Flutter 框架：我这儿有状态发生了改变，赶紧给我刷新界面吧。...而 Flutter 框架收到通知后，会执行 Widget 的 build 方法，根据新的状态重新构建界面。状态的更改一定要配合使用 setState。...通过这个方法的调用，Flutter 会在底层标记 Widget 的状态，随后触发重建。...于我们的示例而言，即使你修改了 _counter，如果不调用 setState，Flutter 框架也不会感知到状态的变化，因此界面上也不会有任何改变 image.png Flutter 对这个机制做了优化

1.1K1 0

原来Flutter代码是这样运行在原生系统的！快来了解Flutter标准模板，感受原生系统中Flutter的魅力！

setState方法是Flutter以数据驱动视图更新的函数，会通知Flutter框架：我这儿有状态改变，赶紧给我刷新界面！...而Flutter框架收到通知后，会执行Widget#build，根据新状态重建界面。状态的更改一定要配合使用setState。...通过该方法调用，Flutter会在底层标记Widget的状态，随后触发重建。示例即使修改_counter，若不调用setState，Flutter框架也不会感知到状态变化，因此界面也不会有任何改变。...而当按钮被点击之后，其关联的控件函数_incrementCounter会触发调用。在这个函数中，通过调用setState更新_counter属性同时，也通知Flutter框架其状态发生变化。...随后，Flutter重新调用build方法以新数据配置重建_MyHomePageState的UI，最终完成页面重新渲染。 Widget只是视图的“配置信息”，是数据的映射，“只读”。

4812 0

您找到你想要的搜索结果了吗？

是的

没有找到

Widget中的state到底是什么

对应到Flutter中，意图是绑定了组件状态的State，结果则是重新渲染后的组件。在Widget的生命周期内，应用到State中的任何更改都将强制Widget重新构建。...但事实是，StatefulWidget的滥用会直接影响Flutter应用的渲染功能。现在我们回顾一下Widget的更新机制： Widget是不可变的，更新则意味着销毁+重建（build）。...这里你可能会有疑问，如果我在一个默认不可变的场景下使用StatefulWidget，那么我肯定不会主动调用其setState方法啊，如果我不主动调用setState，那么不就不会影响StatefulWidget...虽然Flutter内部通过Element层可以最大程度地降低对真实渲染视图的修改，提高渲染效率，而不是销毁整个RenderObject树重建。但，大量Widget对象的销毁重建是无法避免的。...总结在iOS、Android以及JavaScript中，视图开发都是命令式的；而在Flutter中，视图开发则是声明式的，我们只需要改变数据，然后通过Flutter框架触发Widget的重新渲染即可

2.9K2 0

Flutter 中 stateless 和 stateful widget 的区别

Flutter 内置了几个小部件，它们都分为有状态和无状态小部件。无状态小部件在 Flutter 应用程序运行期间，无状态小部件无法更改其状态。这意味着在应用程序运行时无法重绘无状态小部件。...当我们描述的 UI 部分不依赖于任何其他小部件时，无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。...是一种在有状态小部件类中调用的方法。每次调用时，此方法都会更改有状态小部件的值。...setState()``setState() 无状态和有状态的区别回顾一下我们在上面的例子中所展示的内容，下表描述了无状态和有状态小部件之间的区别：无状态小部件有状态的小部件仅在初始化时更新动态变化...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改时重新渲染setState() 静态小部件动态小部件除非发生外部事件，否则无法在运行时更新可以在运行时根据用户操作或数据更改进行更新

2.3K1 0

The Key of Widget in Flutter

The Key of Widget in Flutter 当我们刚开始使用Flutter，我们在继承StatelessWidget和StatefulWidget时，不会关注Key。...整个界面的渲染通常也不会有什么问题。但当我们想要复用Widget，想要优化我们的渲染性能时，Key就成为了一个绕不过的话题。一个问题首先，我们需要明白Flutter的界面渲染原理。...有时候，我们会发现，即使我们调用了setState，Widget也没有进行重建。它的原因原来，当我们用一个StatefulWidget渲染界面，其状态可能被我们储存在其State中。...这样，当我们交换Widget时，Flutter就不会认为这两个Widget是一模一样的。...所以，当你修改了相同类型的Widget节点位置，又想要保留它的状态时，你需要使用Key。 GlobalKey 官方文档作用允许widget在应用程序中的任何位置更改其parent而不丢失其状态。

1.1K2 0

Flutter | 和小老弟一起玩转Widget

Flutter 中的 Widget包含两种，一种是不需要更改状态的 Widget,也就是 StatelessWidget,另一种是可变状态的 StatefulWidget,注意这里所说的状态都是Widget...里的状态 State，而管理状态一般是通过 setState 来管理。...通俗点理解：有状态：交互或者数据改变导致 Widget改变，例如改变文字 **无状态：**不会被改变的 Widget,比如一个纯页面的展示需要注意的是，使用 StatefulWidget 时，每次直接...其 setState() 方法通知 Flutter framework状态发送改变，Flutter framework在收到消息后，会重新调用其 build 方法重新构建 widget 树，从而达到更新...widget 示例在重新构建时可能会变化，但 State 实例只会在第一次插入到树中时被创建，当在重新构建时，如果 widget 被修改了，Flutter framework 会动态设置State,

9162 0

-StatefulWidget的打开方式

里你会奇怪的发现:当你`slider.value=20;`时会报错这真是让人不爽，对象更改属性不是天经地义吗?...但Flutter说:对不起，你不能这让我恍然大悟，为什么Widget源码里说所有的组件都是恒定的,它只是对元素的描述组件的属性无法被改变因为属性都是final修饰的,既然无法修改,那又为什么会有状态一说...，让我们感觉里面的人是活的，世界是运动的这其中化腐朽为神奇的关键就是如何持续渲染,就像电影如何连续一帧帧的播放这时状态类中的setState()应声而出,交给我，只要喊我一声，我就为你们更新状态...,如下:有一个私有的变量_value，在Slider拖动的过程中执行_render方法进行渲染,在渲染时先将Slider的值给_value 在setState方法调用之后，build将会重新执行，...比如需要象下面这样滑动到50之后复选框选中，当点击复选框清零放在Android中想想都觉得凌乱，但自定义控件有麻烦,就像炉石起手全是高费的卡手心情在Flutter中你想怎么封怎么封,只要状态改变

1.1K1 0

Flutter State生命周期

点击按钮打印： I/flutter (16141): 状态刷新 setState // count也+1了，说明重新调用过build。...initState 初始化当此对象插入树中时调用，框架会调用一次此方法并不会再次重复执行，如果[State]的[build]方法依赖于本身可以更改状态的对象，例如[ChangeNotifier]或[...Stream]，或者某些其他可以订阅的对象接收通知，可以在此方法订阅，但记得去dispose取消订阅； didChangeDependencies 依赖改变顾名思义，依赖项更改时调用，但也会在initState...didUpdateWidget 组件更新当组件的状态改变的时候就会调用didUpdateWidget(),比如调用了setState()，在widget重新构建时，Flutter framework...AppLifecycleState实测当App返回到桌面或者其他不可见状态，但并未结束： I/flutter ( 2428): 特殊状态 state：AppLifecycleState.inactive

8502 0

Flutter 应用性能优化最佳实践

因此，将 setState() 的调用转移到其 UI 实际需要更改的 Widget 子树部分。...如果改变的部分仅包含在 Widget 树的一小部分中，请避免在 Widget 树的更高层级中调用 setState()。当重新遇到与前一帧相同的子 Widget 实例时，将停止遍历。...调用 saveLayer() 会开辟一片离屏缓冲区。将内容绘制到离屏缓冲区可能会触发渲染目标切换，这些切换在较早期的 GPU 中特别慢。...如果在 profile 构建状态下，每一帧渲染时间低于 16ms，你可能不必担心性能问题以及一些性能陷阱，但仍然应该致力于尽可能快地渲染每一帧。为什么？...将帧渲染时间降低到 16ms 以下可能在视觉上看不出来什么变化，但可以延长电池寿命以及避免发热问题。可能在你当前测试设备上运行良好，但请考虑在应用所支持的最低端设备上的情况。

2.4K2 0

Widget的生命周期和渲染原理

我们知道，在需要修改数据更新UI的时候，只要调用setState然后在其中更改数据，这样UI就可以随之改变了，这是因为setState函数可以触发widget的销毁重建，也就是会触发state的build...函数的重新调用。...但我们开发的时候不会这样去用，因为setState里面做了很多assert断言的容错判断，会更加安全。...比如当某个StatefulWidget的可见状态发生了变化，此时该widget对应的state会被暂时从视图渲染树中移除（后面还会用，并未销毁哦），因此就会调用deactive；再比如当视图切换的时候，...由于State对象在视图渲染树中的位置发生了变化，因此需要暂时移除之后再重新添加，此时就会触发deactive。

1.3K2 0

干货 | Flutter在携程复杂业务的高性能之旅

; }); }}); 根据滚动距离，设置透明度；但是setState会去刷新整个界面，整个界面的组件都会被重新渲染。...值很低，而且几乎每一帧都会超过16ms，火焰图很深，说明渲染的层级很深，整个界面的组件自上而下都重新渲染了，如图所示：现在就能理解为什么在用户滑动界面的时候会造成卡顿了，主要是由于渲染消耗过大，没有控制好界面的刷新范围...的过程中，很多时候不会千篇一律的都使用setState去控制一个界面的状态，因为这样会使得界面过于零碎且难以控制。...，可能会导致整个界面被触发重新渲染，这个显然是不合适的。...refreshPage) { return widgets; }} 2.6 const 标识当调用 setState()，Flutter 会 Rebuild 当前View中的每一个子组件，避免全部重新构建的方法就是用

1.6K2 0

StatefulWidget与State

void didUpdateWidget(covariant T oldWidget) {}//重新载入 void reassemble() {}//设置界面数据变更 void setState...会回调该方法，随后触发组件构建。...组件创建或UI重新渲染 didUpdateWidget >=1 组件创建或UI重新渲染 deactivate >=1 State对象将要移除时 dispose 1 state对象被销毁通常情况下，...setState(() { _counter++;}); setState方法的执行流程：判断函数体是否为空，为空则不继续执行首先判断state生命周期的状态，如果是defunct状态就会抛异常...小结 StatefulWidget是由状态组建，我们可以使用setState方法来重新构建组建 StatefulWidget的Wdiget是通过State的Build方法构建的 setState方法将要重新构建的

1.4K1 0

Flutter | 启动，渲染，setState 流程

这里需要说明的是 Flutter 中的 frame 并不等于屏幕的刷新帧，因为 Flutter UI 框架并不是每次屏幕刷新都会触发，这是因为，如果 UI 在一段时间不变，那么每次重新走一遍渲染流程是不必要的...，因此 Flutter 在第一帧渲染结束后会采取一种主动请求 frame 的方式来实现只有当 UI 可能会改变时才会重新走渲染流程。...，并不需要重新渲染 /// 如果页面发生变化，需要调用 scheduleFrame 来请求 frame。...这也侧面说明如果你频繁的 setState 的时候，如果上次的渲染流程没有完成，则不会发起新的渲染。...上屏，会将绘制出的bit数据发送给GPU .....///// } } 复制代码以上，便是 setState 调用的大概过程，实际的流程会更加复杂一点，例如在这个过程中不允许再次调用 setState

1.2K1 0

Stateful 组件的生命周期

在 Flutter 中一切皆组件，而组件又分为 StatefulWidget（有状态）和 **StatelessWidget（无状态）**组件，他们之间的区别是 StatelessWidget 组件发生变化时必须重新创建新的实例...，而 StatefulWidget 组件则可以直接改变当前组件的状态而无需重新创建新的实例。...收到对 setState 的调用后。此 State 对象的依存关系发生更改后（例如，依赖的 InheritedWidget 发生了更改）。...因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。...clean 与 dirty 相对应，clean 表示组件当前的状态为干净状态，clean 状态下组件不会执行 build 函数。

9941 0

半小时带你入门 Flutter

widget在渲染的时候会转化成element。Element相比于widget增加了上下文的信息。element是对应widget，在渲染树的实例化节点。...(() { // setState方法告诉Flutter，这个State中有些值发生了变化，以便及时将新值更新到UI上， // 如果我不通过setState更改_count字段，...) { // build方法会在每次setState的时候重新运行，例如上面的_incrementCounter方法被调用 //Flutter已经被优化了重新构建的方法，所以你只会去更新需要去更新的部分...当State的状态改变时，能重新构建本节点以及孩子的Widget树来进行UI变化。注意：如果需要主动改变State的状态，需要通过setState()方法进行触发，单纯改变数据是不会引发UI改变的。...然后使用容器将列背景颜色更改为浅灰色。 GridView 可滚动的网格布局，理解为display：grid GridView提供两个预制list，当GridView检测到内容太长时，会自动滚动。

1.8K2 0

flutter入门1——概念简介

热重载：Flutter的热重载功能允许开发者在无需重新启动应用的情况下实时预览代码更改，极大地提高了开发效率。...React Native虽然也支持跨平台开发，但其性能依赖于JavaScriptCore或Hermes等JavaScript引擎，而Flutter则使用自己的Dart VM和渲染引擎，因此在性能上有一定优势...我们知道rn和weex,也是原生渲染的,它们的性能高于webvieew。但同为原生渲染的,怎么会慢于flutter呢?其实不是原生渲染慢,而是js和原生通信慢。...但这不是是主要问题,因为v8的jit不是盖的,也是编译为原生代码解析的。性能上的主要问题是,rn、weex的js引擎和原生渲染层是两个运行环境。...同样,当用户在屏幕上操作原生视图层时,要给js引擎发送通知,也会产生这个通信折损。不过这种性能差别,在大多数场景中,用户是感受不到的。

2121 0

Flutter(六)--有状态的组件StatefulWidget&StateFlutter(六)--有状态的组件StatefulWidget&State

setState后，组件类会重新绘制。...在setState后创建新的newWidget，但State是复用。...2.在Flutter中Widget都是不可变的,所以在flutter中可变组件有Widget(UI)和State(管理状态)两个类组成。 ---- Widget生命周期 ?...转载自jzoom_flutter中的生命周期.png 大致可以看成三个阶段： 1. 初始化（插入渲染树） 2. 状态改变（在渲染树中存在） 3....销毁（从渲染树种移除）传送门: Flutter-汇总

8262 0

Flutter从入门到能寄几玩儿

widget在渲染的时候会转化成element。Element相比于widget增加了上下文的信息。element是对应widget，在渲染树的实例化节点。...(() { // setState方法告诉Flutter，这个State中有些值发生了变化，以便及时将新值更新到UI上， // 如果我不通过setState更改_count字段，...) { // build方法会在每次setState的时候重新运行，例如上面的_incrementCounter方法被调用 //Flutter已经被优化了重新构建的方法，所以你只会去更新需要去更新的部分...当State的状态改变时，能重新构建本节点以及孩子的Widget树来进行UI变化。注意：如果需要主动改变State的状态，需要通过setState()方法进行触发，单纯改变数据是不会引发UI改变的。...然后使用容器将列背景颜色更改为浅灰色。 GridView 可滚动的网格布局，理解为display：grid GridView提供两个预制list，当GridView检测到内容太长时，会自动滚动。

1.5K1 0

Flutter Widget框架之旅顶

当小部件的状态发生变化时，小部件会重新构建它的描述，该描述与前面的描述不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。...根据输入更改小部件主要文章：StatefulWidget，State.setState 到目前为止，我们只使用无状态的小部件。...在Flutter中，更改通知通过回调的方式“向上”流,而当前状态则“向下”流向呈现的无状态小部件。重定向这一流程的共同父母是State。...为了通知框架它改变了它的内部状态，它将这些调用包装在setState调用中。调用setState会将这个小部件标记为肮脏，并计划在下一次您的应用程序需要更新屏幕时重新构建它。...如果您在修改窗口小部件的内部状态时忘记调用setState，则框架将不知道您的窗口小部件是脏的，并且可能不会调用窗口小部件的build函数，这意味着用户界面可能不会更新以反映已更改的状态。

6.7K2 0

Flutter的生命周期

组件发生变化时必须重新创建新的实例，而 StatefulWidget 组件则可以直接改变当前组件的状态而无需重新创建新的实例。...收到对「setState」的调用后。此「State」对象的依存关系发生更改后（例如，依赖的「InheritedWidget」发生了更改）。...因为如果当前组件未插入到树中或者已经从树中移除时，调用「setState」会抛出异常，加上「mounted」判断，则表示当前组件在树中。...「clean」与「dirty」相对应，「clean」表示组件当前的状态为「干净状态」，「clean」状态下组件不会执行「build」函数。...「detached」：应用程序仍寄存在Flutter引擎上，但与平台 View 分离。

1.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭