如何用AutomaticKeepAliveClientMixin重新加载颤动StatefulWidget？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Flutter底部tab切换保持页面状态的几种方法

首先看一下如下视频：通过视频我们可以看到，当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候，每一次进入页面的时候该页面的数据都会重新加载。...那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。...ShoppingCartPage.dart'; import 'package:flutter_jdshop/pages/tabs/UserPage.dart'; class Tabs extends StatefulWidget..._pages, ), 这样就能够实现保持页面状态了，效果如下：我们可以看到，此时，页面的数据只在最开始进来的时候进行加载，然后就保持住这个页面的状态了，并不会每次进来都进行数据的加载刷新了...ShoppingCartPage.dart'; import 'package:flutter_jdshop/pages/tabs/UserPage.dart'; class Tabs extends StatefulWidget

7K2 0

【-Flutter 探索-】AutomaticKeepAliveClientMixin 保持 State 状态

1.前置知识先对 ListView 组件做个测试，这是一个色块列表，其中每个 Item 是一个自定义的 StatefulWidget ，名为 ColorBox ，其中状态量是 Checkbox 的选择情况...class ColorBox extends StatefulWidget { final Color color; final int index; ColorBox({Key key,...通过 cacheExtent 可以控制预先加载的数量，比如 item 高 50 ，cacheExtent = 50 *3 就会预加载 3 个。 ?...s to preserve /// their state when they would otherwise be garbage collected off-screen. /// 通常，懒加载列表中的...mixin AutomaticKeepAliveClientMixinextends StatefulWidget> on State { // 可监听对象 KeepAliveHandle _

2.5K3 0

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

是的

没有找到

Flutter 遇到的坑

如果大于等于3个tab，这个有bug，最好不用当前tab切到任意非相邻tab(如:第一个tab切换到第三个)，会报错 class ArticleListPageState extends State...<ArticleListPage> with AutomaticKeepAliveClientMixin { // with AutomaticKeepAliveClientMixin...wantKeepAlive返回 true,tab切换时,不会每次执行initState @override bool get wantKeepAlive => true; } Flutter 图片资源加载失败...在StatelessWidget或者StatefulWidget类中的参数必须使用final定义，否则Dart Analysis会报warning，因为StatelessWidget是不可变的，StatefulWidget...实例本身是不可变的，并将其可变状态存储在由createState方法创建的单独State对象中，或者存储在该State所订阅的对象中，例如Stream或ChangeNotifier对象，其引用存储在StatefulWidget

1.9K2 0

Flutter + OpenHarmony 性能优化全链路指南：从启动加速到帧率稳定，打造丝滑鸿蒙体验

帧率分析：识别卡顿根源使用 Flutter DevTools Frame Chart：绿色：正常帧（< 16ms）黄色/红色：光栅化或布局超时常见问题： build() 方法过于复杂频繁重建 StatefulWidget...泄漏改用弱引用或生命周期感知图片缓存过大 Memory Graph 显示大量 SkBitmap 限制 maxMemoryCacheSize 4.2 Flutter 内存优化实践 ▶ 合理使用 AutomaticKeepAliveClientMixin...仅对真正需要保活的页面使用： class PersistentTab extends StatefulWidget { @override State createState() => _PersistentTabState...(); } class _PersistentTabState extends State with AutomaticKeepAliveClientMixin...rules: - if: $CI_COMMIT_BRANCH == "main" 结语：性能不是一次性任务，而是持续承诺优秀的性能体验应让用户感觉不到“优化”的存在：启动快到以为早已打开滑动顺滑如玻璃表面

1441 0

Flutter完整开发实战详解(二、快速开发实战篇)

的子页面每次都会重新调用initState。...这肯定不是我们想要的，所以这时你就需要AutomaticKeepAliveClientMixin 。 ...每个 Tab 对应的 StatefulWidget 的 State ，需要通过with AutomaticKeepAliveClientMixin ，然后重写 @override bool get wantKeepAlive...=> true; ，就可以实不重新构建的效果了，效果如下图。...其实 WillPopScope 并不是监听返回按键，如名字一般，是当前页面将要被pop时触发的回调。通过onWillPop回调返回的Future，判断是否响应 pop 。

5.8K3 0

Flutter完整开发实战详解(二、快速开发实战篇)

6.1K1 0

深入探究Flutter中的页面导航器：Navigator详解

我们可以通过PageRouteBuilder的构造函数来定义路由的各种动画参数，如动画类型、动画曲线、动画时长等。...路由保持状态的概念：路由保持状态是指在页面切换时，保持页面的状态不变，避免页面重新构建和初始化。这种技术可以提升用户体验，减少页面重建的开销，特别是对于包含大量数据或复杂交互的页面而言。 2....使用AutomaticKeepAliveClientMixin和KeepAlive：要实现路由保持状态，我们可以使用AutomaticKeepAliveClientMixin和KeepAlive这两个类...同时，我们也学习了如何利用Navigator的高级功能，如自定义转场动画、透明路由、Hero动画等，为应用增添更丰富和吸引人的动画效果。...在Flutter中，可以通过路由参数传递数据，也可以通过全局状态管理器（如Provider、Riverpod等）来共享数据。

4.5K2 0

【Flutter】自定义滚动开关

该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。...material.dart'; import 'package:lite_rolling_switch/lite_rolling_switch.dart'; class DemoScreen extends StatefulWidget

36.5K6 0

Flutter手势交互+自定义绘板组件v0.01

} } ---->[flutter/lib/src/material/material_button.dart:40]------- class RawMaterialButton extends StatefulWidget...,//onTap传给了父类 } ---->[flutter/lib/src/material/ink_well.dart:184]------- class InkResponse extends StatefulWidget...InkResponseState(); } class _InkResponseState extends State with AutomaticKeepAliveClientMixin...{ @override StateStatefulWidget> createState() => _TolyCanvasState(); } class _TolyCanvasState...details.globalPosition.dx; var y=details.globalPosition.dy; _oldPos= Offset(x, y); } ///渲染方法，将重新渲染组件

1.7K1 0

Widget中的state到底是什么

但是，当需要变更界面的文案时，我们只要改变数据集中的文案数据，并通知Flutter框架触发Widget的重新渲染即可。这样一来，开发者将无需精确关注UI编程中的各个过程细节，只要维护好数据集即可。...对应到Flutter中，意图是绑定了组件状态的State，结果则是重新渲染后的组件。在Widget的生命周期内，应用到State中的任何更改都将强制Widget重新构建。...return result; } } 可以看到，在构造方法将其属性列表赋值后，build方法随即将子组件RichText通过其属性列表（如文本data、对齐方式textAlign、文本展示方向textDirection..._imageInfo属性用来给Widget加载真实的图片，一旦State对象通过_handleImageChanged方法监听到_imageInfo属性发生了变化，就会立即调用_ImageState类的...setState方法通知Flutter框架：“我这儿的数据变啦，请使用更新后的_imageInfo数据重新加载图片！”。

3.6K2 0

Flutter热重载的实现原理

代码合并：Dart VM合并新旧Kernel文件并重新加载。 Widget重建：UI线程重置后触发Widget树重建，保留原有状态。...Widget状态不兼容修改Widget类型（如StatelessWidget改为StatefulWidget）会导致状态冲突： // 修改前 class MyWidget extends StatelessWidget...{...} // 修改后 class MyWidget extends StatefulWidget {...}...全局变量/静态属性变更初始化语句不会在热重载时重新执行： // 修改不会生效 final sampleText = [ Text("T10"), // 修改项 ]; 需重启应用以重新初始化全局状态...main函数变更根节点初始化逻辑不会重新执行： void main() => runApp(MyNewWidget()); // 热重载不生效必须冷启动才能加载新的入口逻辑。

2171 0

一文读懂 Flutter 核心概念：Widget、State 与 BuildContext

二、State：Widget 的“动态灵魂” 既然 Widget 是不可变的，那如何实现 UI 的动态变化（如点击按钮后文本变色、列表加载更多数据）？答案就是 State。...有状态 Widget（StatefulWidget）：需要动态变化的 Widget，如可点击的按钮、可输入的表单。...State 与 StatefulWidget 的关联规则：一个 StatefulWidget 可以对应多个 State 实例（如 ListView 中重复创建的列表项 Widget）。...State 对象的生命周期独立于其关联的 Widget 实例——当 Widget 被重新创建时（如父 Widget 重建），State 可能会被复用（通过 key 控制），从而保留之前的状态。 ...setState 内部会标记 State 为“脏状态”，并触发 build 方法重新生成 Widget 树，最终更新屏幕显示。

1851 0

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，应用不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，而在Android上会出现微光效果。...（在懒加载时，如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...generateWordPairs().take(20).map((e) => e.asPascalCase).toList() ); setState(() { //重新构建列表...（在懒加载时，如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...ListView 和 GridView 都有对应的组合对象如：SliverList 和 SliverGrid。

10.1K5 1

flutter:一个bug的源码分析

extends StatefulWidget { // 这个数组，用来保存照片信息 // widget在每次build后会重新创建，之前photoList的数据就丢失了 List<String...super.updateChild(child, newWidget, newSlot); } } 每次执行到对应的系统方法，可以打印log，也方便调试源码；然后把这个widget添加到布局中，验证widget在布局的第一次加载和后续的更新中的...element的表现 widget首次加载在页面启动，widget首次加载的log如下，先是新建了widget，然后新建了element，又新建了state [log] TestWidget create...deactivateChild(child); newChild = inflateWidget(newWidget, newSlot); } } else { // 第一次加载...就可以build的时候，避免被重新创建，提升性能对于statefulWidget，需要把本地变量放在state里面，而不能放在widget里

5301 0

Flutter--Flutter中Widget、App的生命周期

在 Flutter 中一切皆组件，而组件又分为 StatefulWidget（有状态）和 StatelessWidget（无状态）组件，他们之间的区别是 StatelessWidget 组件发生变化时必须重新创建新的实例...，而 StatefulWidget 组件则可以直接改变当前组件的状态而无需重新创建新的实例。...didHaveMemoryPressure() { super.didHaveMemoryPressure(); print("didHaveMemoryPressure"); } //用户本地设置变化时调用，如系统语言改变...处于此状态的时机：引擎首次加载到附加到一个平台 View的过程中，或者由于执行 Navigator pop ，view 被销毁。...从A->B，在从B返回A，A重新加载数据使用如下方法： // A页面代码 class A extends StatelessWidget { @override Widget build(BuildContext

4.9K3 1

【Flutter实战】Flutter 中那么多组件，难道要都学一遍？

它们唯一的区别就是运行时重新加载组件的方式不同，StatelessWidget 组件重新加载时重新创建当前组件的实例，而StatefulWidget组件重新加载时不会重新创建实例，而是重新执行 build...如果想重新绘制此组件，只能重新创建此组件新的实例。...StatefulWidget 组件创建的方式： class StatefulWidgetDemo extends StatefulWidget { @override _StatefulWidgetDemoState...StatefulWidget 组件重绘需要调用 setstate 方法，setState 会使其自身及其子组件重绘，所以尽量封装 StatefulWidget 组件，避免无效的重建和重绘，影响性能。...快速书写小技巧：在 Android Studio 和 VS Code 中输入 stl 然后点击回车，可以快速创建 StatelessWidget 组件，同理输入 stf 点击回车，可以快速创建 StatefulWidget

9451 0

Flutter尝鲜：跨平台移动应用开发

Flutter特点支持热加载，运行之后，修改代码无需重新安装和启动，提升开发调试效率支持数据状态绑定，修改数据后自动刷新页面所有的UI都是Widget，包括页面 Flutter环境配置首先clone...工程目录可以看到，工程目录结构主要分为3部分，分别是： android 存放Android相关的东西，如App图标 ios 存放iOS相关的东西，如App图标 lib 存放Flutter源码重点来看...Flutter页面架构 App开发最重要的就是UI框架，Flutter重新定制一套自己的UI框架，在底层使用了Skia进行渲染。...一个StatefulWidget页面看起来是这样的： class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title...如果修改了代码，就可以直接通过热加载，直接显示修改的内容，无需重新安装打开，大大节省了调试时间。

4.5K7 1

Flutter的生命周期

组件发生变化时必须重新创建新的实例，而 StatefulWidget 组件则可以直接改变当前组件的状态而无需重新创建新的实例。...❞ 下面的 StatefulWidget 和 State 结构图是StatefulWidget 组件生命周期的概览，不同版本的差异也可以对比此结构图。...initState 「initState」函数在组件被插入树中时被 Framework 调用（在「createState」之后），此函数只会被调用一次，子类通常会重写此方法，在其中进行初始化操作，比如加载网络数据...处于此状态的时机：引擎首次加载到附加到一个平台 View的过程中，或者由于执行 Navigator pop ，view 被销毁。...从A->B，在从B返回A，A重新加载数据使用如下方法： A页面代码： class A extends StatelessWidget { @override Widget build(BuildContext

2.1K3 0

Flutter 中的 Shimmer 动画效果

加载时间在应用程序改进中是不可避免的。从用户体验 (UX) 的角度来看，主要是向您的用户展示正在加载。...处理向用户传递信息正在加载的一种主流方法是在不准确的加载物质类型的形状上显示带有微光动画的铬色调。在在这篇博客中，我们将探索 Flutter 中的 Shimmer 动画效果。...此演示视频展示了如何在颤动中创建微光动画效果。它展示了如何在 Flutter应用程序中使用shimmer包来实现微光动画效果。...它显示代码何时成功运行，然后显示内容正在从虚拟数据加载是带有持续时间的微光动画效果，然后加载完成然后内容将显示在您的设备上。...movie_data.dart'; import 'package:flutter_shimmer_animation/model/movie_model.dart'; class MyHomePage extends StatefulWidget

7.9K2 0

【Flutter】评级对话框组件

之所以命名为“等级”对话框，是因为该库将识别您在颤动的星形图标上做出的手势以提供等级。评级对话框的一些属性： **message：**此属性用于对话框的消息/描述文本。...当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。...当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。在此对话框中，您将看到我们将添加图像，标题，描述，星级，评论的textField和最后一个提交按钮。...flutter/material.dart'; import 'package:rating_dialog/rating_dialog.dart'; class DemoScreen extends StatefulWidget

5.3K5 0

点击加载更多

Flutter底部tab切换保持页面状态的几种方法

【-Flutter 探索-】AutomaticKeepAliveClientMixin 保持 State 状态

Flutter 遇到的坑

Flutter + OpenHarmony 性能优化全链路指南：从启动加速到帧率稳定，打造丝滑鸿蒙体验

Flutter完整开发实战详解(二、快速开发实战篇)

Flutter完整开发实战详解(二、快速开发实战篇)

深入探究Flutter中的页面导航器：Navigator详解

【Flutter】自定义滚动开关

Flutter手势交互+自定义绘板组件v0.01

Widget中的state到底是什么

Flutter热重载的实现原理

一文读懂 Flutter 核心概念：Widget、State 与 BuildContext

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

flutter:一个bug的源码分析

Flutter--Flutter中Widget、App的生命周期

【Flutter实战】Flutter 中那么多组件，难道要都学一遍？

Flutter尝鲜：跨平台移动应用开发

Flutter的生命周期

Flutter 中的 Shimmer 动画效果

【Flutter】评级对话框组件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐