为什么在Flutter中使用setState时我的列表没有更新 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Flutter 绘制探索 4 | 深入分析 setState 重建和更新 | 七日打卡

这个系列便是对 Flutter 绘制的探索，通过测试、调试及源码分析来给出一些在绘制时被忽略或从未知晓的东西，而有些要点如果被忽略，就很可能出现问题。...---- 一、铁打的营盘流水的兵 1. 测试案例这小结将通过一个测试来说明，在 Flutter 中的刷新时，什么在变，什么不在变。这对理解 Flutter 来说至关重要。...通过 Flutter 源码中对 CustomPainter 的使用可以知道，对应静态的绘制，画板类中的属性都是定义为 final ，也就是常量，是不允许修改属性的。...这就是在 setState 时进行的 Element 重新构建和 RenderObject 的更新。...我只想说，和文章开头一样，State#setState 只是一个工具，工具没有好与坏。 ?

2K2 0

FlutterDojo设计之道—状态管理之路（七）

Provider在列表中使用在前面的讲解中，我们大部分的场景都是在普通的Box布局中，相信大家对Provider的使用已经非常清楚了，下面来看下在List中的使用场景，相信对于很多App来说，列表应该是大部分页面的核心...官方并没有给出很好的建议，官方的Demo也都是在静态的列表中做的演示，并不涉及到列表的修改，所以下面，我将和大家一起讨论下如何在列表中使用Provider。...通过setState来更新数据，其原理就是在Future完成之后，使用setState刷新UI。核心代码如下所示。获取数据。...如果List的数据会发生改变，则Selector的使用则会存在问题，举个例子，我们大部分APP的List使用场景都包含刷新数据、加载分页数据这样两个过程，所以List的数据源是一直在变化的，当首页数据加载时...当列表数据不固定时，刷新整个List 当列表数据固定时，只刷新更新的Item 有了这样的思路，就可以理解前面的Model中为什么需要一个shouldListRebuild变量了吧，剩下的代码如下所示。

9451 0

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

是的

没有找到

干货 | 携程火车票Flutter最佳实践

一、为什么选择Flutter 携程在已经引入了 React Native 的情况下，为什么还会选择 Flutter？更多是对性能的考虑。开发效率与性能体验就像天平两端，需要找到一个平衡点。...1）我们的业务代码更专注数据，只要更新Model，UI就会自动更新，不用在状态改变后再去手动调用setState()来显示更新页面。...当调用 setState() 时，RenderObject 就会往上的父节点去查找，根据 isRepaintBoundary是否为 true，会决定是否从这里开始往下去触发重绘，来确定要更新哪些区域。...如上图所示在列表中 Item 中存在大量的倒计时。一定要控制刷新倒计时只影响控件本身，并且只有可视的区域视图是在刷新的，不可见的情况下及时销毁计时器。一直刷整个列表，性能开销是恐怖的。...异步任务结束在页面被销毁之后，没有检查State是否还是mounted状态，继续setState()就会出现这个错误。

2.2K3 0

flutter - 单选ListView Flutter

本文整理自https://stackoverflow.com/questions/62499593/ 我试图在我的应用程序中实现listView单一选择，以便一旦点击列表中的某个项目，从而使按下的项目颜色状态与其他项目不同...我已经尽力了，但是效果不好。问题在于，即使我的实现在按下时更新了每个项目状态，也不会将其他状态重置为初始状态。...您要遍历整个列表，并在每次迭代中两次调用setState，一次完成一次就不必要地重新创建了小部件树很多次。...将当前选择保存在类级别变量中BoxSelection _selectedBox 简化代码，使其直接作用于迭代整个列表的当前选择 onTap: () => setState(() { if...Flutter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62499593/

2.9K6 0

Flutter完整开发实战详解(十五、全面理解State与Provider)

但是当我们点击 4 中的 setState 时，却发现 3 中 Text 没有发现改变，这是为什么呢？ ?...时，只是执行了 _state.widget = newWidget，而我们通过 _DemoPageState(this.data) 传入的 data ，在传入后执行setState 时并没有改变。...而当 InheritedWidget 被更新时，如下代码所示，_dependents 中的 Element 会被逐个执行 notifyDependent ，最后触发 markNeedsBuild ，这也是为什么当...所以 Consumer 贴心的封装了 context 在 InheritedWidget 中的“登记逻辑”，从而控制了状态改变时，需要更新的精细度。...Provider 的使用指南上，更详细的 Vadaski 的《Flutter | 状态管理指南篇——Provider》已经写过，我就不重复写轮子了，感兴趣的可以过去看看。

3.7K2 1

Flutter中的Key

---- 在使用 Flutter 时，我们经常会遇到一个叫做 Key 的东西。Key 是 Flutter 中几乎所有 widget 都具有的属性。但它并不常用而容易被忽视。...这些 widget 保持某些状态，并且在 widget 树中处于相同的级别。如果没有 Key，更新这样的 widget 集合可能不会产生预期的结果。...如果是无状态的 widget 则不需要设置 key。背后原理刚刚第二种实现中，使用 key 的代码中实现预期的行为。为什么 key 可以做到这一点呢？让我们来找出答案。...在将 key 添加到色块 widget 中后，元素树和 widget 树会使用键值进行更新。...当我们交换色块时，色块元素可以借助它们的 key 在 widget 树中找到它们相应的 widget，并正确地更新它们的引用，从而使 widget 正确地交换位置当按下按钮时更新其颜色。

1.5K1 0

setState

---- 0.2：要说的话注意:本篇是对状态最基本的使用。虽然比较糙，但是并不代表不重要后面两篇是基于此篇的优化，所以这篇一定要看懂,才能跟上我的思维。...效果如下，单从界面上来看，我还是比较满意的。 ? ---- 0.3: 简介一下本项目主要包括以下几点: 1. 输入一个待办事项，下面的ListView动态更新 2....状态量有三个:text 输入框的文字，todo列表数据，showType展现类型 1.输入框通过监听，改变text的值 2.在添加按钮点击时，将加入到状态值todo中 3.todo用来渲染Todo列表...6.在适宜的状态值改变时，调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听注意收起键盘的操作...结语本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步，完成一次Flutter之旅。

9602 0

给Android开发者Flutter上手指南

ScrollView在Flutter中等价于什么？谁是Flutter的列表组件？如何知道点击了列表中哪个item？如何动态更新ListView？...在 iOS 中，你给 view 包裹上 ScrollView 来允许用户在需要时滚动你的内容。在 Flutter 中，最简单的方法是使用 ListView widget。...view；在 Flutter 中，如果你想通过 setState() 方法来更新 widget 列表，你会很快发现你的数据展示并没有变化。...当它得到你的 ListView 时，它会使用一个 == 判断，并且发现两个 ListView 是相同的。没有什么东西是变了的，因此更新不是必须的。...一个更新 ListView 的简单方法是，在 setState() 中创建一个新的 List，并把旧 List 的数据拷贝给新的 list。

2K2 0

setState

：鸟瞰全局这里状态有点乱，我画了幅图说明一下: 状态量有三个:text 输入框的文字，todo列表数据，showType展现类型 1.输入框通过监听，改变text的值 2.在添加按钮点击时，将加入到状态值...todo中 3.todo用来渲染Todo列表，根据key和value展现数据和复选框状态 4.复选框通过点击，改变todo的状态，来显示对勾以及文字下划线 5.根据showType的不同，选择过滤的方式...6.在适宜的状态值改变时，调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听注意收起键盘的操作...然而你还不得不一直面对她,问了你一句为什么这么傻，你含着泪说:"又不是不..." ---- 结语本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它...,那就跟随我的脚步，完成一次Flutter之旅。

9513 0

【Flutter 专题】图解 ListView 下拉刷新与上拉加载 (一)

和尚上次学 ListView 时，只学习了一下异步请求数据加载新闻和 Loading 等待的小知识点，但对于新闻列表数据的更新和加载更多是必不可少的，而实现【下拉刷新】与【上划加载更多】的方式有很多种...，今天和尚整理一下使用三方库 flutter_refresh 来实现列表的数据更新。...集成方式 pubspec.yaml 中添加 flutter_refresh : ^0.0.2，并同步 packages get；在相应的 .dart 文件中添加引用 import 'package:...，但是都是第二次刷新才加载第一次刷新的数据，接口是正常的，但是数据总是慢一拍，和尚测试发现因为没有用 setState(() {}); 以后一定要注意，这样才可以实时进行更新。...问题二：下拉刷新过程中，接口数据重复加载？解决方式：和尚目前还没有涉及缓存等方面的，单纯的一个下拉刷新应该是重新调用初始的接口，首先要清空列表，不然接口数据重复实实在在会出现的。

1.7K3 1

Widget中的state到底是什么

在今天这篇文章中，我将着重介绍这两种类型的区别，从而帮我们更好地理解Widget，掌握不同类型Widget的正确使用时机。...StatelessWidget 在Flutter中，Widget采用由父到子、自顶而下的方式进行构建，父Widget控制着子Widget的显示样式，其样式配置由父Widget在构建时提供。...setState方法通知Flutter框架：“我这儿的数据变啦，请使用更新后的_imageInfo数据重新加载图片！”。...StatelessWidget是静态的，一旦创建则无需更新；而对于StatefulWidget来说，在State类中调用setState方法更新数据，会触发视图的销毁和重建，也将间接地触发每个子Widget...这里你可能会有疑问，如果我在一个默认不可变的场景下使用StatefulWidget，那么我肯定不会主动调用其setState方法啊，如果我不主动调用setState，那么不就不会影响StatefulWidget

2.9K2 0

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

(lowerValue, upperValue); } }, );} 2.4 拆分ViewModel降低界面刷新几率在开发Flutter的过程中，很多时候不会千篇一律的都使用setState...，在刷新列表时要取消掉还未返回数据的请求。...在酒店列表和详情页面中，都有较多的酒店和房型的图片，图片多，导致内存占用高，加载耗时，影响用户体验。...图片预加载机制：precacheImage，在合适的时机提前使用precacheImage对需要展示的图片数据进行预加载到内存中，这样在真正展示的时候，图片已经被加载到内存了，就可以在内容加载时达到“直出...有动画效果的建议用AnimatedOpacity 避免使用带换行符的长文本同时也介绍了Flutter 在长列表、图片加载上的一些体验优化措施，希望能在你做Flutter性能优化和用户体验时有一些帮助。

1.6K2 0

Flutter入门三部曲(2) - 界面开发基础

Icon - 用于显示Flutter的内置Material和Cupertino图标。 Container - 在Flutter中，相当于div。...Row, Column- 这些小部件显示水平或垂直方向的子项列表。 Stack - 堆栈显示一个孩子的列表。这个功能很像CSS中的'position'属性。...因为State在每次重建时都没有抛弃，所以可以维护它并且不必每次重建某些东西时都要进行昂贵的计算以获得状态属性。此外，这是允许Flutter动画存在的原因。...当Widget依赖的一些数据(比如说是InheritedWidget,后面会介绍)更新时，它会立即被调用。同时build方法，会自动调用。...[image.png] Flutter是受React启发的，所以Virtual Dom的diff算法也参考过来了（应该是略有修改），在diff的过程中如果节点有Key来比较的话，能够最大程度重用已有的节点

2.6K0 0

flutter中key的作用

运行之后会发现，色块并没有交换，而是以随机的形式在变换颜色。为什么呢？...于是开始进行第二层对比，在对比时Flutter发现元素与组件的Key并不匹配，于是，把它设置成不可用状态，但是这里所使用的Key只是本地Key（Local Key），Flutter并不能找到另一层里面的...通过上面的示例，我们能明显的看出，我们的Key要设置到组件树的顶层，而这一层在改变时，才能复用或者更新状态。...（还不如不用） PageStorageKey 当你有一个滑动列表，你通过某一个 Item 跳转到了一个新的页面，当你返回之前的列表页面时，你发现滑动的距离回到了顶部。...参考资料何时使用密钥 - Flutter小部件 101 第四集 widgets-intro#keys Flutter | 深入浅出Key Flutter中的Key和GlobalKey

1.6K1 0

StatefulWidget与State

Widget，但是StatefulWidget没有build方法，所以它只能使用State的build来构建Widget。...dispose 最后我们在第一个界面尝试下热更新 I/flutter (26863): page1 reassembleI/flutter (26863): page1 build 下面是相关生命周期的调用次数...我们可以在initState方法中做一些初始化工作，然后在dispose方法中做一些销毁工作。...setState如何触发界面变更在前面很多例子中我们多次使用到setState方法，来更新Element中的数据，每次当每次数据变更时我们触发setState方法，紧接着界面就跟着变化了，大家应该都知道这是...在开始了解setState方法之前我们还需要来了解下一个枚举类_StateLifecycle，它是flutter中的一个私有类，用来表示State的生命周期。

1.4K1 0

记住，永远都不要在 Flutter 中使用全局变量

以上所有原因都说明了为什么在 Flutter 中永远不应该使用全局变量。...但是，有些开发人员会使用全局变量，因为他们在一个小团队中，并且在某些情况下不利于更改。但是，无论应用程序的大小如何，当需要维护代码时，全局变量都会带来挑战。...Provider 状态管理包 Provider 状态管理器包被广泛用于收集小部件状态数据并在状态更改时更新小部件。使用提供程序时，只有受影响的小部件会在数据发生突变时被更新。...要在 Flutter 应用程序启动中开始使用 GetX，请将 get 添加到你的 pubspec.yaml 文件中： dependencies: get: 接下来，导入使用 GetX 库函数和组件时需要的...SetState 方法之前，我们只介绍了管理状态的 Flutter 包和库。当你的小部件更改数据值时，可以调用一个名为 setState 的方法。它将导致 UI 根据新状态发生变化。

3.6K3 0

【玩转腾讯云】万物皆可Serverless之在Flutter中快速接入腾讯云开发

之使用SCF+COS给未来写封信万物皆可Serverless之在Flutter中快速接入腾讯云开发万物皆可Serverless之在Flutter中写一个Dart原生腾讯云对象存储插件万物皆可Serverless...这是腾讯云官方文档的里的关于云开发的简介，本文将带领大家按照云开发的官方文档在Flutter中快速接入一下腾讯云开发SDK，废话少说，上图 Screenshot_2020-04-20-16-41...里会有云数据库的第三方库 TIM图片20200421105316.png 还真被我找到了，原来云开发数据库的官方Flutter SDK是在3月13日刚刚发布的，官方文档可能还没来得及更新，这里在找云开发数据库...Flutter插件的小伙伴们要注意了哈，因为直到现在文档 https://cloud.tencent.com/document/product/876/41616 里也没有更新cloudbase_datebase...现在我的需求是给自己的Flutter应用做一个完备的用户管理系统，这种情况的话，使用云开发会是一个不错的选择。

3.5K24 16

Flutter入门三部曲(2) - 界面开发基础

Icon - 用于显示Flutter的内置Material和Cupertino图标。 Container - 在Flutter中，相当于div。...Row, Column- 这些小部件显示水平或垂直方向的子项列表。 Stack - 堆栈显示一个孩子的列表。这个功能很像CSS中的'position'属性。...因为State在每次重建时都没有抛弃，所以可以维护它并且不必每次重建某些东西时都要进行昂贵的计算以获得状态属性。此外，这是允许Flutter动画存在的原因。...当Widget依赖的一些数据(比如说是InheritedWidget,后面会介绍)更新时，它会立即被调用。同时build方法，会自动调用。...image.png Flutter是受React启发的，所以Virtual Dom的diff算法也参考过来了（应该是略有修改），在diff的过程中如果节点有Key来比较的话，能够最大程度重用已有的节点

1.6K2 0

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

事情是这样的，由于近期 Flutter 发布了 1.17 的稳定版，按照“惯例”开始着手把生产项目升级到 1.12.13+hotfix.9 版本，在升级适配完成之后，一个突如其来的 Bug 让我陷入了沉思...在 Flutter 中 Scaffold 默认情况下 resizeToAvoidBottomInset 为 true，当 resizeToAvoidBottomInset 为 true 时，Scaffold...setState 来更新 MediaQuery 中的 MediaQueryData 。...其实 Window 的值来源于 Flutter Engine，在键盘弹出时 Flutter Engine 会通过 _updateWindowMetrics 方法更新 Window 数据，并执行 window.onMetricsChanged...4、Route 那按照这个情况，不可能出现上述键盘导致空白区域的问题，那问题可能就是出现在 Scaffold 使用的 MediaQueryData 没有更新。

1.4K8 0

-StatefulWidget的打开方式

但Flutter说:对不起，你不能这让我恍然大悟，为什么Widget源码里说所有的组件都是恒定的,它只是对元素的描述组件的属性无法被改变因为属性都是final修饰的,既然无法修改,那又为什么会有状态一说...，让我们感觉里面的人是活的，世界是运动的这其中化腐朽为神奇的关键就是如何持续渲染,就像电影如何连续一帧帧的播放这时状态类中的setState()应声而出,交给我，只要喊我一声，我就为你们更新状态...,如下:有一个私有的变量_value，在Slider拖动的过程中执行_render方法进行渲染,在渲染时先将Slider的值给_value 在setState方法调用之后，build将会重新执行，...那么Slider的值就会使用_value，从而实现状态的更新 ?...所以编程对我而言就是在创世,而我便是创世神,思想的高度可以让你的眼前有一个完全不一样的世界。话说回来,为什么要这样做呢?

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭