开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

flutter Textfiled进行了不需要的重建

Flutter TextField进行了不需要的重建是指在使用Flutter开发中，当对TextField进行一些操作时，可能会导致TextField不必要地重新构建。

在Flutter中，Widget的构建是通过比较前后两个Widget的差异来确定是否需要重新构建。当我们对TextField进行一些操作时，比如改变文本内容、改变样式等，如果没有正确处理，就会导致TextField的重建，从而影响性能和用户体验。

为了避免不必要的重建，我们可以采取以下几个方法：

使用StatefulWidget：将TextField包装在一个StatefulWidget中，这样只有当State发生变化时，才会重新构建TextField。可以通过继承StatefulWidget和State来实现。
使用Controller：使用TextEditingController来控制TextField的文本内容，这样可以避免在每次构建时都重新创建TextField。
使用Key：给TextField设置一个唯一的Key，这样可以确保在更新时只有同一个Key的TextField会被更新，避免不必要的重建。
使用Builder：使用Builder Widget来包裹TextField，这样可以将TextField的构建逻辑封装在Builder中，只有Builder发生变化时，才会重新构建TextField。

总结起来，为了避免不必要的重建，我们可以使用StatefulWidget、Controller、Key和Builder等方法来优化TextField的构建过程，提高性能和用户体验。

腾讯云相关产品推荐：

云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：提供高度可扩展的容器化应用管理平台。详情请参考：https://cloud.tencent.com/product/tke

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:CMake -没有更改时不需要的重建使用Flutter BottomNavigationBar重建相同的选项卡如何在Flutter中为StreamBuilder的重建添加条件？使用flutter_hooks进行不必要的重建 Flutter :如何防止重建整个可重排序的Listview？Flutter NestedScrollView/SliverAppBar -不需要的下边距 numpy -通过过滤不需要的成员以增量方式重建ndarray 如何在flutter中重建每次更新数据时的完整视图 Flutter -当用户使用Firebase登录时如何重建我的页面？为什么change notifier上的Flutter对话框不重建？Flutter FlatButton和引入不需要的填充的图标 Listview flutter中的项目之间不需要的间隙 Flutter:如何在导航回list.builder后停止它的重建重建一个深度嵌套的对象数组，删除一个不需要的对象 Flutter GridView.count元素之间不需要的填充/间距 Flutter:当一天发生变化时重建状态的最佳方式？如何使用数据库中未来的对象列表来使用flutter provider触发重建？Flutter Linechart Widget未在使用更改通告程序的Provider发生数据更改时进行重建 Flutter在不需要外部导入的情况下支持哪些字体？GetX + Flutter:在更新实体内的列表时如何使Obx重建(以及通常情况下，是什么触发了Obx重建)？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter 组件集录 | 3.7 新增 - ContextMenu 菜单

对于移动端来说，输入框 TextFiled 组件长按文字时弹出的工具菜单也属于一种 ContextMenu ：从本质上来说 ContextMenu 也不是什么新东西，只不过是对 Overlay 浮层的一层封装而已...输入框与 ContextMenu 菜单在 Flutter 3.7 中 TextFiled 组件增加了 contextMenuBuilder 回调构建方法。...也就是说，这个几个工具是 Flutter 源码中默认提供的，可以简单瞄一下其中的逻辑。...Flutter 中提供了 ContextMenuController 控制器来管理，下面先通过图片的浮层菜单来认识一下控制器的使用：首先，浮层的显示/消失是手势事件触发的，对于桌面端来说 GestureDetector...---- 其实这和 TextFiled 的 contextMenuBuilder 是异曲同工的，官方在案例中给出了 context_menu_region 进行简单封装，来简化使用。

1.8K2 0

Flutter组件学习（三）—— 输入框TextFiled

序言 Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍...Flutter中的Text组件和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图： image TextFiled组件的API 先来看一下TextFiled...()），可以获取输入框的值，可以设置输入框的值等等。...7、TextCapitalization 这个属性用来控制输入内容的大小写设置，同样是一个枚举值，来看一下具体的值及效果： TextCapitalization.words：输入的每个单词的首字母大写（...Radius.elliptical(2, 8), 12) 代码已上传至Github：Github:https://github.com/24Kshign/FlutterWorkSpace/tree/master/flutter_element

2.5K5 0

来一份Flutter渲染分析

前段时间总体看了一下 Flutter 的渲染流程，今天整理成文章分享一下 Flutter 的工作原理。...它的 container 传入的是 renderView 变量，这是 RenderBinding 的变量，在初始化的时候进行了初始化： RenderView 是一个 RenderObejct 对象...如果 b的深度小于 a，那么 a 排在 b 的前面。如果 b 需要重建，a不需要，那么 a 排在 b 后面。如果 a 需要重建， b 不需要，那么 b 排在 a 后面。...也就是:需要重建的节点排在不需要重建的节点前面，深度小的节点排在深度大的节点后面。...需要重建的排在不需要重建的节点前面，保证 rebuild 的执行顺序不会错，但是这种情况其实 _dirtyElements 里面似乎不会存在，毕竟打脏标记之后都需要 rebuild。

4482 0

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

顾名思义，我们只要如果是不需要根据状态变化的组件，我们可以直接继承StatelessWidget.如果和状态有关系的组件就必须继承StatefulWidget。...State管理着状态，它是常驻的。然而，Widget是不可变的，当配置发生变化，它会立马发生重建。所以这样的重建的成本是极低的。...因为State在每次重建时都没有抛弃，所以可以维护它并且不必每次重建某些东西时都要进行昂贵的计算以获得状态属性。此外，这是允许Flutter动画存在的原因。...认识了通用的控件了解了StatefulWidget的生命周期对BuildContext 了解。对Key的场景进行了了解。得到了使用GlobalKey来跨子组件传递状态的方式。...下一遍文章:我们将更加深入的对Flutter的界面开发的一些原理参考文章 Flutter Widgets Flutter中的Key，LocalKey，GlobalKey...

2.6K0 0

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

顾名思义，我们只要如果是不需要根据状态变化的组件，我们可以直接继承StatelessWidget.如果和状态有关系的组件就必须继承StatefulWidget。...State管理着状态，它是常驻的。然而，Widget是不可变的，当配置发生变化，它会立马发生重建。所以这样的重建的成本是极低的。...因为State在每次重建时都没有抛弃，所以可以维护它并且不必每次重建某些东西时都要进行昂贵的计算以获得状态属性。此外，这是允许Flutter动画存在的原因。...注意：如果您希望重建与此状态关联的Widget，则此方法基本上是'initState'的替代！...认识了通用的控件了解了StatefulWidget的生命周期对BuildContext 了解。对Key的场景进行了了解。得到了使用GlobalKey来跨子组件传递状态的方式。

1.6K2 0

如何提高Flutter应用程序的性能

老孟导读：首先 Flutter 是一个非常高性能的框架，因此大多时候不需要开发者做出特殊的处理，只需要避免常见的性能问题即可获得高性能的应用程序。...重建最小化原则在调用 setState() 方法重建组件时，一定要最小化重建组件，没有变化的组件不要重建，看下面的Demo，这是一个设置页面， import 'package:flutter/material.dart...尽量不要将整个页面定义为 StatefulWidget 组件，因为一旦重建将重建此页面下所有的组件，尤其是 Switch 、Radio等组件状态的改变导致的重建，强烈建议对其进行封装。...，就像上面的例子，将需要重建的 Switch 封装为一个单独的 StatefulWidget 组件，避免了其他不必要的重建。...强烈建议：在组件前加上 const 在组件前加上 const ，相当于对此组件进行了缓存，下面是未加 const 的代码： class ConstDemo extends StatefulWidget

1.5K1 0

flutter架构（第四节）

engine/embedder层的架构 Flutter web support 虽然一般的架构概念适用于Flutter支持的所有平台，但Flutter的Web支持有一些独特的特点值得讨论。...Dart自从JavaScript语言存在以来就一直在编译成JavaScript，其工具链针对开发和生产目的进行了优化。...也许与Flutter运行的其他平台相比，最显著的区别是，Flutter不需要提供Dart运行时。相反，Flutter框架（以及你编写的任何代码）被编译成JavaScript。...，我们将讨论如何在状态更改时重建 UI ，以及可以使用哪些技术来重建 UI 。...Flutter 项目中的一些规则当你开始一个新的 Flutter 项目时，启用 linter 规则是你可以做的最好的事情之一。

2.2K1 0

谷歌 Flutter 1.17 发布

Flutter 1.17 发布北京时间 7日凌晨，谷歌更新了Stable channel的新版 Flutter 1.17。...对于简单的iOS动画，您还将看到最多减少40％的CPU / GPU使用率，具体取决于硬件（在PR 14104和PR 13976中进行了详细介绍）。...此选项将安装仅依赖于您的插件代码（不包括任何Dart代码或资产）的通用Android应用。这允许重复flutter run命令的启动速度更快，因为对Dart代码或资产的更改不需要重新构建APK。...数字代理商做得令人惊奇的事情之一就是Superformula，该公司最近与MGM Resorts合作，对其移动应用程序进行了重大更新，并已在Flutter中对其进行了完全重建。...通过较小的团队和全新的Flutter代码库，他们能够比以前更快地重建应用并交付到两个应用商店，从而使MGM的预订转换率提高了9％。

3.5K1 0

一文读懂Flutter的三棵树渲染机制和原理

因为在框架中，Element是被抽离开来的，所以你不需要经常和它们打交道。...更新时的三棵树因为Widget是不可变的，当某个Widget的配置改变的时候，整个Widget树都需要被重建。...例如当我们改变一个Container的颜色为橙色的时候，框架就会触发一个重建整个Widget树的动作。...因为FlatButton的类型与Element树中相对应位置的Element的类型不同，Flutter将会从各自的树上删除这个Element和相对应的ContainerRender，然后Flutter将会重建与...当新的RenderObject树被重建后将会计算布局，然后绘制在屏幕上面。Flutter内部使用了很多优化方法和缓存策略来处理，所以你不需要手动来处理这些。

5.5K1 0

Widget，构建Flutter界面的基石

而Flutter将视图树的概念进行了扩展，把视图数据的组织和渲染抽象为三部分，即Widget、Element和RenderObject。这三部分之间的关系，如下所示： ?...但是这样做的缺点是，因为涉及到大量对象的销毁和重建，所以会对垃圾回收造成压力。不过，Widget本身并不涉及实际渲染位图，所以它只是一份轻量级的数据结构，重建的成本很低。...另外，由于Widget的不可变性，可以以较低成本进行渲染节点复用，因此在一个真实的渲染树中可能存在不同的Widget对应同一个渲染节点的情况，这无疑又降低了重建UI的成本。...实际上，Element树这一层将Widget树的变化做了抽象，可以只将真正需要修改的部分同步到真实的RenderObject树中，最大程序降低对真实渲染视图的修改，提高渲染效率，而不是销毁整个渲染视图树重建...而只要Widget的前后类型一样，那么其对应的Element就是可以复用的，比如Widget原本是蓝色，重建后变成红色了，那么其对应的Element就会复用。

1.3K3 0

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

我们可以发现一个非常重要的地方，那就是 State#setstate 虽然会重建当前 build 方法下的节点，但是 RenderObject 对象是不会重建的，如下 RenderCustomPaint...---- 一开始会判断 callback 是否为 null，且 _dirtyElements 是否为空，如果都满足的话，就说明不需要重建，直接返回。...这时你就可以发现，这个 renderObject 是被传入来的，所以该渲染对象并未被重新创建，这时对该对象的属性进行了设置。...---- 在 Provider 中，对刷新进行了一定的封装，但还是最终还是离不开 element#markNeedsBuild 。 ?...，注意只是属性的设置，而非对象的重建。

1.9K2 0

为什么 build 方法放在 State 中而不是在 StatefulWidget 中

Flutter 中Stateful 组件的生命周期：http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%...（开发者）,外部也不需要知道 AnimatedState 的内部实现。...性能有状态的组件包含StatefulWidget 和 State，当有状态组件的配置发生更改时，StatefulWidget 将会被丢弃并重建，而 State 不会重建，框架会更新 State 对象中...widget 的引用，这极大的减轻了系统重建有状态组件的工作。...此方式对动画来说极为重要，由于 State 不会被重建，保留了前面的状态，不断的根据前一个状态计算下一个状态并重建其widget，达到动画的效果。

8982 0

Flutter卡顿优化锦辑

Flutter卡顿优化必备基础知识首先，在做性能调优之前，我们应该对flutter相关基础知识有一定的了解，不然我们无从做起，首先，我们要了解flutter是干嘛的--Flutter 是谷歌2018...，这是其一，然后，我们还需要知道flutter的四个线程。 ...该线程包括开发者写下的代码和 Flutter 框架根据应用行为生成的代码。...当重建Widget树后并未发生改变，则Element不会触发重绘，则就是Widget树的重建并不一定会触发Element树的重建。...4、对于频繁更新的控件（比如倒计时，秒表），使用RepaintBoundary隔离它，让他在一个独立的paint区域。 5、使用const来修饰永远不需要变更的控件。

6.9K10 7

flutter跨平台原理

Hot Reload这种神奇的效果，在DartVM将程序中的类结构更新完成后，Flutter会立即重建整个控件树，从而更新界面。...Flutter重写了一套跨平台的 UI 框架，渲染引擎是依靠 Skia 图形库实现 Flutter 中的控件树直接由渲染引擎和高性能本地 ARM 代码直接绘制，不需要通过中间对象（Web 应用中的虚拟...只需要操作少量的“活跃”对象，大量的没有引用的“死亡”对象则被忽略，这种算法也非常适合Flutter框架中大量Widget重建的场景。...当重建Widget树后并未发生改变，则Element不会触发重绘 Element：表示Widget配置树的特定位置的一个实例，同时持有Widget和RenderObject，负责管理Widget配置和...isolate之间是逻辑隔离的，Isolate中的代码也是按顺序执行，因为Dart没有共享内存的并发，没有竞争的可能性，故不需要加锁，也没有死锁风险。

1.9K3 0

Flutter 双向聊天列表效果进阶优化

聊天列表是一个很扣细节的场景，在之前的《Flutter 实现完美的双向聊天列表效果，滑动列表的知识点》里，通过 CustomScrollView 和配置它的 center 从而解决了数据更新时的列表跳动问题...所以它实际就是黄色的部分；所以虽然绿色的 SliverList 虽然新增了数据，但是从 center 往上的高度还是不够，所以就出现了黄色 SliverList 顶部空白的问题； image...运行后也如下图所示，可以看到运行后的代码不会再有空白的情况，也没有新增数据跳动的情况，双向滑动也正常，那你知道为什么吗？...if 判断，只是为了规避其他控件的影响，比如列表里的 PageView 或者 TextFiled 的影响。...，实现一个聊天列表并不难，但是需要优化的细节可能会很多，实例代码可见：https://github.com/CarGuo/gsy_flutter_demo/blob/master/lib/widget

6324 0

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

在Flutter中，跨Widget的数据共享，可以如下图这样表示。 ?...当使用StatefulWidget（RootContainer）的setState函数时，InheritedWidget（Root）重建了，但是其child并不会重建，因为它是widget.child，...并不会因为State的重建而重建。...rebuild了，这也是为什么在Flutter中，很多不需要改变的Padding、Margin、Theme、Size等参数需要尽可能设置为const的原因，这样可以在rebuild的时候，提高效率。...在Flutter中，Theme的实现，就是采用的这种方式。

5002 0

2021 年值得期待的 Flutter 数据流管理方案

InheritedWidget InheritedWidget 是 Flutter 提供的一种非常重要的功能型组件，它的作用是：把祖先节点的状态传递到子孙节点，而不需要通过层层传递参数。...InheritedWidget 的属性是 final 的，这也意味着只要刷新其属性就会触发 UI 重建。...Consumer，再有 ViewModel 层有不必要的重建之类，还是会导致页面不必要的刷新不同页面数据有依赖关系或者包含关系时，不好做数据依赖刷新。...ViewModel 和 Model 层的界限，使得 ViewModel 不持有 Model 层，这样可以规避 VM 重建时 Model 层重建，结构如下所示： ?...UI 重建？

2K2 0

Flutter Provider状态管理---八种提供者使用分析

前言在我们上一篇文章中对Provider进行了介绍以及类结构的说明，最后还写了一个简单的示例，通过上一章节我们对Provider有了一个基本的了解，这一章节我们来说说Provider的8种提供者以及他们的使用区别...，但是模型数据改变之后UI并没有变化也没有重建，那是因为Provider提供者组件不会监听它提供的值的变化。...notifyListeners()并且在调用它的任何时候，ChangeNotifierProvider都会收到通知并且消费者将重建UI。...，主要是确保空值不会传递给任何子组件，而且FutureProvider有一个初始值，子组件可以使用该Future值并告诉子组件使用新的值来进行重建。...注意： FutureProvider只会重建一次默认显示初始值然后显示Future值最后不会再次重建第一步：创建模型这里和Provider不同的是增加了构造函数，以及changeName变成了

4.2K0 0

Q音直播Flutter包裁剪方案(iOS)

即自我数据压缩，这种方法能够减少framework的体积，但是对最终app打包出来的体积影响较小，因为打包也是进行了数据压缩。删。删除无用部分，或者不需要用到的部分。挪。...优点是不需要修改打包工具flutter_tools源码，缺点是增加了脚本对framework的处理，拉长了工作流程。...isolate_snapshot) // ));//生成DartVMData} 第二步，VMSnapshotFromSettings、IsolateSnapshotFromSettings 这里的作用是完成数据段和代码段的重建...这部分能优化的空间很小，主要是通过裁剪引擎不需要的功能，减少体积。编译引擎时可以选择性编译skia和boringssl，收益大概只有几百K。除此之外可以对Flutter的符号进行分离。...自定义App数据段的重建根据前面3.3.3节的分析，重建数据段，我们可以从ResolveVMData入手，下面是修改的代码。

2K2 0

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

，也通过观察者模式，让数据状态改变的监听变得比较容易，这些都是Flutter处理数据的优势。...下面的文章，将带领大家梳理Flutter中的数据流向，掌握Flutter的状态管理方案。开篇要管理Widget的数据、状态，首先要了解下，在Flutter中有哪些需要管理数据的场景。...，所以这个页面中的100个Widget都将执行重建，这显然是「家里有矿系列」，所以为了避免这个问题，就需要缩小StatefulWidget的范围，让setState函数控制的刷新，尽可能的范围小，这样当...100个Widget中只有一个需要重建时，就不需要重新创建那99个不需要的Widget了。...这时候，就需要利用到Flutter的响应式编程架构了。

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭