如何从另一个StatefulWidget更新StatefulWidget页面？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

10.Flutter学习之StatefulWidget有状态组件、页面绑定数据、改变数据

StatelessWidget StaefluWidget 如果遇到HTTP网络请求或者用户交互接受数据后动态更改UI，则必须使用StatefluWidget并告诉Flutter框架Widget的状态已经更新...我们可以清楚的看到，数据改变了，但是无法改变页面的数据。接下来我们看一下有状态的是否能够发生改变。...必须继承自StatefulWidget， class HomePager extends StatefulWidget { @override StateStatefulWidget> createState..., onPressed: (){ //Button的点击事件 setState(() {//是StatelessWidget所没有的方法，用于更新页面状态...this.count++; }); }, ), ], ), ); } } `` 从图中我们可以看到页面数据发生了改变

1K1 0

Widget中的state到底是什么

UI编程范式要想理解StatelessWidget与StatefulWidget的使用场景，我们首先需要了解，在Flutter中，如何调整一个控件（Widget）的展示样式，即UI编程范式。...从定义来看，StatefulWidget似乎是万能的，替代StatelessWidget看起来合情合理。于是StatefulWidget的滥用，也容易因此变得顺理成章，难以避免。...如果我们的根布局是一个StatefulWidget，在其State中每调用一次更新UI，都将是一整个页面所有Widget的销毁和重建。...如果我们的根布局是一个StatefulWidget，在其State中每调用一次更新UI，都将是一整个页面所有Widget的销毁和重建。...如果某个子Widget的重建涉及到一些耗时操作，那页面的渲染性能将会急剧下降。所以，一定要避免StatefulWidget的滥用。以上。

3.6K2 0

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

是的

没有找到

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

所以，本文主要就是学习一下在flutter开发App的时候，如何去怼App以及各个页面的生命周期进行监听和回调。...StatelessWidget是无状态组件，页面一旦生成是不会产生变化的，所以只有createElement和build的生命周期 StatefulWidget是有状态组件，在页面中可以进行刷新等操作，...所以该组件的状态变化会更多一些，分为初始化阶段、更新阶段以及销毁阶段等 1.1 StatefulWidget生命周期概述下面就主要以分析一下StatefulWidget有状态组件的生命周期。...调用 deactivate 之后，然后将 State 对象重新插入树的另一个位置。此方法可以在每一帧中调用，此方法中应该只包含构建组件的代码，不应该包含其他额外的功能，尤其是耗时任务。...从A->B，在从B返回A，A重新加载数据使用如下方法： // A页面代码 class A extends StatelessWidget { @override Widget build(BuildContext

4.9K3 1

flutter-状态管理2-inheritedWidget的使用例子

return context .dependOnInheritedWidgetOfExactType(); //该方法沿着Element树，去找最近的CounterElement , 然后从Element...4.context .dependOnInheritedWidgetOfExactType(); //该方法沿着Element树，去找最近的Element , 然后从Element中取出的Widget...5.inheritedWidget(ShareDataWidget)共享数据是只读的,如果要实现数据变化更新,依然需要依赖于StatefulWidget(InheritedWidgetTestPage)...的setState. 6.不支持跨页面的状态....如果我在A页面使用InheritedWidget储存了数据，跳转到B页面或者C页面，会发现使用context获取不到A页面的InheritedElement(A页面跳转B页面，B页面并不是A页面的子节点

9570 0

Flutter ListView 局部刷新数据、ListView点赞收藏

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。 *** Flutter是谷歌推出的最新的移动开发框架。...，定义如下： ///ListView 局部数据更新使用 Demo class TestListPartPage extends StatefulWidget { @override State<...Colors.blue : Colors.grey[200], ///点击更新当前 Item 数据以及刷新页面显示 onPressed: () {...内容区域，当然从源码角度也有另外的解读，这里不去说源码。...2.3 List 中的数据是如何更新的？？？还是这一句更新的： setState(() { widget.bean.isCollect = !

4.7K4 1

Flutter 零基础入门（十七）：StatelessWidget 与 State 的第一次分离

与 build 方法但你一定会产生一个疑问：如果页面内容要变化怎么办？...按钮点击后，文字如何改变？这一篇，我们来解决 Flutter 中最核心的问题：状态（State）从哪里来？...这是 Flutter 的设计核心： Widget：不可变（immutable） State：可变（mutable）好处： UI 描述稳定状态变化可控 Flutter 可以高效更新界面七、setState...流程非常重要： 1️⃣ 用户点击按钮 2️⃣ 调用 setState 3️⃣ Flutter 标记当前 State 为“脏” 4️⃣ build 重新执行 5️⃣ UI 更新你不需要手动操作 UI。...从下一篇开始：你将真正理解 Flutter 页面“从出生到销毁”的全过程

1711 0

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

从基础的组件、布局到手势的监听，再到状态的改变，Flutter最核心思想在这60余行代码。...，理解Flutter页面是如何构建、如何响应交互，以及如何更新 3 第一部分代码，应用的整体结构 import 'package:flutter/material.dart'; void main()...对StatefulWidget，当数据改变时，需重建Widget去更新界面，即Widget创建销毁会很频繁。...与StatefulWidget的区别，以及如何通过State的成员函数setState以数据驱动的方式更新状态，从而更新页面。...在实现同样功能的情况下，如果将Scaffold页面元素的构建封装成一个新Widget类，我们该如何处理？

1.1K2 0

Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

这一篇我们通过自定义 Widget 来了解下如何写一个 Widget？然而 Widget 有两个，StatelessWidget 和 StatefulWidget，我们要继承哪一个？...我们看下如何操作。...StatelessWidget vs StatefulWidget 好了，上面讲解完了 StatelessWidget 和 StatefulWidget，相信大家应该知道如何自定义一个 Widget 了...，也知道如何在其他页面引入了。...看界面是否需要更新比如我们上面的例子，点击按钮文本更新了，所以我们选择了 StatefulWidget。

1.2K3 0

Flutter的生命周期

调用「deactivate」之后，然后将「State」对象重新插入树的另一个位置。此方法可以在每一帧中调用，此方法中应该只包含构建组件的代码，不应该包含其他额外的功能，尤其是耗时任务。...生命周期六：deactivate 当框架从树中移除此 State 对象时将会调用此方法，在某些情况下，框架将重新插入 State 对象到树的其他位置（例如，如果包含该树的子树 State 对象从树中的一个位置移植到另一位置...setState 「setState」方法是开发者经常调用的方法，此方法调用后，组件的状态变为「dirty」，当有数据要更新时，调用此方法。...下面是关于生命周期经常遇到的问题：有2个页面A和B，在B页面点击返回键返回到A，didChangeAppLifecycleState 不回调其实这个问题大部分人是想要实现类似于Android 中「...从A->B，在从B返回A，A重新加载数据使用如下方法： A页面代码： class A extends StatelessWidget { @override Widget build(BuildContext

2.1K3 0

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

函数，从而使用全新的数据，生成新的Widget，这样看来，有了StatefulWidget之后，是不是就可以完全实现同页面的数据管理了呢？...的确可以，但是有个问题，如果页面里面有100个Widget，数据发生改变后，只有一个Widget需要接受这个改变，修改自己的UI，但是在这个StatefulWidget中，由于调用了setState函数...，所以这个页面中的100个Widget都将执行重建，这显然是「家里有矿系列」，所以为了避免这个问题，就需要缩小StatefulWidget的范围，让setState函数控制的刷新，尽可能的范围小，这样当...但是新的问题又来了，StatefulWidget的范围小了，发生在这个StatefulWidget之外的数据改变，如何让这个StatefulWidget进行刷新呢？...方案1-2：ValueNotifier 从ValueNotifier的注释就能看明白，ValueNotifier实际上实现了一个观察者模式，ValueNotifier会持有一个Value对象，当Value

1.4K2 0

Flutter Widget源码解析及实战

Widget 在flutter中所有页面展示出来的元素都是由一个个的widget组成，与原生android开发不同的地方在于flutter中widget不仅仅表示UI元素，他也可以是一个完全和UI无关如...下面是StatefulWidget的最佳实践：尽量将需要该表状态的widget防止在子节点，这样在改变整个渲染树的时候就只需要更新一个widget即可，如果将其防止在父节点那么将会导致当前节点的整个子节点的...deactivate：当State对象从树中被移除时，会调用此回调。...在一些场景下，Flutter framework会将State对象重新插到树中，如包含此State对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey来实现）。...dispose：当State对象从树中被永久移除时调用；通常在此回调中释放资源。布局类组件相关布局类组件都会包含一个或多个子组件，不同的布局类组件对子组件排版(layout)方式不同。

2.7K2 0

InheritedWidget使用说明

由于Flutter采用节点树的方式组织页面，以致于一个普通页面的节点层级会很深。此时，我们如果还是一层层传递数据，当需要修改数据时，就会比较麻烦。...所以，在构造方法中，我们需要传入两个参数，一个是我们希望共享的数据（在本例中数据是int型，实际业务中共享的通常是一个相对复杂的数据），另一个就是我们带界面的Widget。...更新通知这个方法，决定了是否通知子节点中StatefulWidget的didChangeDependencies方法是否调用。...只有当InheritedWidget发生更新并且决定通知时，didChangeDependencies才会调用。...class TextWidget extends StatefulWidget { @override StateStatefulWidget> createState() { return

1.2K4 0

Flutter ——状态管理 | StreamBuild

StreamBuild从字面意思来讲是数据流构建，是一种基于数据流的订阅管理。...Stream可以接受任何类型的数据，值、事件、对象、集合、映射、错误、甚至是另一个Stream，通过StreamController中的sink作为入口，往Stream中插入数据，然后通过你的自定义监听...body: Center( //步骤3.使用StreamBuilder构造器 child: StreamBuilder( // 监听Stream，每次值改变的时候，更新...刚刚介绍了stream的如何使用，是不是感觉还是懵的状态，实例代码仅仅是实例，如何应用到项目中呢？我们的项目不仅仅是一个简单的计数器，接下来我将结合项目，简单讲述一下如何使用streamBuild。...但是不用StatefulWidget，如何关流? StatelessWidget 没有dispose()方法，不能关流，所以此时还需要使用StatefulWidget。

3.8K3 1

Flutter | 和小老弟一起玩转Widget

通俗点理解：有状态：交互或者数据改变导致 Widget改变，例如改变文字 **无状态：**不会被改变的 Widget,比如一个纯页面的展示需要注意的是，使用 StatefulWidget 时，每次直接...其 setState() 方法通知 Flutter framework状态发送改变，Flutter framework在收到消息后，会重新调用其 build 方法重新构建 widget 树，从而达到更新...在一些场景下，Flutter framework 会将State 对象重新插入到树中，如包含此 State 对象的子树在树的一个位置移动到了另一个位置时。...如何获取State对象由于 StatefulWidget 的具体逻辑都在其对应的 State 中，所以很多时候，我们需要获取 StatefulWidget 对应的 State对象来调用一些方法，比如...通过Context获取 context 对象有一个 findAncestorStateOfType() 方法，该方法可以从当前节点沿着 widget 树向上查找指定类型的 StatefulWidget

1.1K2 0

【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)

文章目录一、Flutter 页面生命周期 1、StatelessWidget 组件生命周期函数 2、StatefulWidget 组件生命周期函数二、StatefulWidget 组件生命周期...---- Flutter 页面生命周期就是 Flutter 页面组件 Widget 的生命周期 ; 页面的组件就是 StatefulWidget 组件和 StatelessWidget 组件 ; 1...组件生命周期函数 StatefulWidget 组件生命周期分为三组 : ① 初始化期 : createState , initState ; ② 更新期 : didChangeDependencies...Scaffold( appBar: AppBar( // 标题 title: Text("StatefulWidget 页面生命周期"),...Scaffold( appBar: AppBar( // 标题 title: Text("StatefulWidget 页面生命周期"),

5.6K0 0

Flutter | 基础Widget

key 同时相等时就会用 newWidget 去更新 Element 对象的配置，否则就会创建新的 Element。...实际上，context 是当前 widget 在 widget 树中位置中执行 “相关操作”的一个句柄，比如它提供了从当前 widget 开始向上遍历widget树，以及查找父类 widget 方法 class...在一些场景下，Flutter framework 会将 State 对象重新插入到树中，如果包含次 State 对象的子树在树的一个位置移动到另一个位置时(可以通过 GlobalKey 来实现)。...onPressed: () => setState(() => ++_counter), ))); } } 复制代码一个计数器的小栗子，用来观察一下生命周期的变化 1，首先，打开这个页面...的 State 对象通过 Context 获取 context 对象有一个 findAncestorStateOfType() 方法，该方法可以从当前节点沿着 widget 树向上查找指定类型的 StatefulWidget

1.6K2 0

【Flutter 实战】动画序列、共享动画、路由动画

下面实现一个先执行颜色变化，在执行大小变化，代码如下： class AnimationDemo extends StatefulWidget { @override StateStatefulWidget...最终效果如下：共享动画 Hero是我们常用的过渡动画，当用户点击一张图片，切换到另一个页面时，这个页面也有此图，那么使用Hero组件就在合适不过了，先看下Hero的效果图：上面效果实现的列表页面代码如下...路由动画转场就是从当前页面跳转到另一个页面，跳转页面在 Flutter 中通过 Navigator，跳转到新页面如下： Navigator.push(context, MaterialPageRoute...自定义任何组件都是一样的，如果系统有类似的，直接看源代码是如何实现的，然后按照它的模版自定义组件。...上面的动画只对新的页面进行了动画，如果想实现当前页面被新页面从顶部顶出的效果，实现方式如下： class CustomPageRoute extends PageRouteBuilder { final

2.4K1 0

从零开始的Flutter之旅: StatefulWidget

StatefulWidget 提供不可变的配置信息以及可以随着时间变化而触发的状态对象；通过监听状态的变化来达到 ui 的更新。...简单点，我们从flutter_github(文章底部会给出链接)项目中挑选一个实例。 ? 当我们点击其中一个未读通知信息时，我们需要将其 ui 状态变成已读的样式。...但就这样改变你会发现 ui 是不会刷新的，因为在 StatefulWidget，如果你想改变某个值，同时要同步更新 ui，需要使用 setState 方法。...使你可以随时跟踪数据的变化并更新应用的 ui。...使用 dart 语言进行开发，项目架构是基于 Model/State/ViewModel 的 MSVM；使用 Navigator 进行页面的跳转；网络框架使用了 dio。

1.4K3 0

StatefulWidget与State

是有状态的组建在更新构建过程上会有一点稍微的不同，今天我们就来看下StatefulWidget是如何更新Widget，以及它是如何触发界面变更的。...StatefulWidget 首先来看下StatefulWidget，它是一个抽象类，当然它十分的简单。...销毁：从渲染树中移除，此阶段涉及的生命周期函数主要有deactivate和dispose。具体的声明周期调用过程如下： ?...26863): page2 initStateI/flutter (26863): page2 didChangeDependenciesI/flutter (26863): page2 build 当我们从第二个界面返回时...setState如何触发界面变更在前面很多例子中我们多次使用到setState方法，来更新Element中的数据，每次当每次数据变更时我们触发setState方法，紧接着界面就跟着变化了，大家应该都知道这是

1.8K1 0

flutter:一个bug的源码分析

由一个bug引发的flutter的widget跟element关系的源码分析 bug现象在页面本来有照片数据的（第一张照片数据），点击加号唤起系统拍照功能后，再返回页面A，原来的照片数据丢失了（部分...element的表现 widget首次加载在页面启动，widget首次加载的log如下，先是新建了widget，然后新建了element，又新建了state [log] TestWidget create...[log] createElement [log] _TestWidgetState created widget的更新然后是页面调用setState，触发页面的刷新，log可以发现，widget...widget不会被重新创建了 return Column( children: [ const TestWidget() ], ); 源码分析接下来，从源码角度分析下上述行为...= inflateWidget(newWidget, newSlot); } return newChild; } 当父element创建好，就会调用updateChild去更新它的

5301 0

点击加载更多

10.Flutter学习之StatefulWidget有状态组件、页面绑定数据、改变数据

Widget中的state到底是什么

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

flutter-状态管理2-inheritedWidget的使用例子

Flutter ListView 局部刷新数据、ListView点赞收藏

Flutter 零基础入门（十七）：StatelessWidget 与 State 的第一次分离

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

Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

Flutter的生命周期

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

Flutter Widget源码解析及实战

InheritedWidget使用说明

Flutter ——状态管理 | StreamBuild

Flutter | 和小老弟一起玩转Widget

【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)

Flutter | 基础Widget

【Flutter 实战】动画序列、共享动画、路由动画

从零开始的Flutter之旅: StatefulWidget

StatefulWidget与State

flutter:一个bug的源码分析

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐