首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中从另一个小部件的内置更新小部件状态

在Flutter中,可以通过使用状态管理来从一个小部件更新另一个小部件的状态。Flutter提供了多种状态管理的方式,包括InheritedWidget、Provider、Redux等。

  1. InheritedWidget:InheritedWidget是Flutter中的一个基础类,用于在小部件树中共享状态。通过创建一个继承自InheritedWidget的类,并在其内部定义需要共享的状态,然后将该类作为小部件树的根部件,其他小部件可以通过InheritedWidget.of(context)方法获取共享的状态并更新。具体步骤如下:
    • 创建一个继承自InheritedWidget的类,定义需要共享的状态。
    • 在该类中实现updateShouldNotify方法,用于判断是否需要更新状态。
    • 在该类中实现of方法,用于获取共享的状态。
    • 将该类作为小部件树的根部件,并在其他小部件中使用InheritedWidget.of(context)方法获取共享的状态。
    • 示例代码:
    • 示例代码:
  • Provider:Provider是一个Flutter的状态管理库,它基于InheritedWidget实现了一套更简单、更高效的状态管理机制。使用Provider,可以通过创建一个继承自ChangeNotifier的类来管理状态,并使用Provider.of(context)方法获取状态并更新。具体步骤如下:
    • 创建一个继承自ChangeNotifier的类,定义需要共享的状态和对应的更新方法。
    • 在小部件中使用Provider.of(context)方法获取状态,并使用Consumer小部件包裹需要更新的部分。
    • 在Consumer小部件中使用状态,并通过回调函数更新状态。
    • 示例代码:
    • 示例代码:

通过以上两种方式,你可以在Flutter中从另一个小部件的内部更新小部件的状态。这样可以实现小部件之间的数据共享和状态更新。在实际应用中,可以根据具体需求选择合适的状态管理方式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【老孟FlutterFlutter 2 新增功能

在此初始稳定版本Flutter在Web平台支持下将代码可重用性提高到另一个层次。因此,现在当您稳定地创建Flutter应用程序时,Web只是该应用程序另一个设备目标。...此外,内置上下文菜单已添加到Material和Cupertino设计语言TextField和TextFormField小部件。最后,添加了抓手 到ReorderableListView小部件。...此版本包括一个更新Scrollbar小部件,该小部件在桌面环境中非常有效 滚动条小部件更新,以提供桌面上预期交互功能,包括拖动拇指,单击轨道以上下滚动页面以及在鼠标悬停在鼠标的任何部分上时显示轨道功能...Flutter构建应用获利策略,以及如何在自己广告中加载广告Flutter应用。...可用修复程序列表,灯泡快速修复程序,可帮助您单击鼠标来更改代码。

7.8K20

【译】Flutter架构综述

Reactive user interfaces 从表面上看,Flutter是一个被动、伪声明式UI框架,开发者提供一个应用状态到界面状态映射,当应用状态发生变化时,框架在运行时承担更新界面的任务...在大多数传统UI框架,用户界面的初始状态被描述一次,然后由用户代码在运行时响应事件单独更新。这种方法一个挑战是,随着应用程序复杂性增加,开发人员需要意识到状态变化如何在整个UI中级联。...应用程序通过告诉框架用另一个widget替换层次结构一个widget来响应事件(如用户交互)更新用户界面。然后,框架会比较新旧widget,并有效地更新用户界面。...相反,它们唯一目的是控制另一个部件布局某些方面。Flutter还包括利用这种组合方法实用工具部件。...而且,构建函数设计通过专注于声明一个widget是由什么组成,而不是将用户界面从一个状态更新另一个状态复杂性来简化你代码。

5.5K10

Flutter常见开发问题

按钮到布局结构一切都是小部件。这里优势在于可定制性。想象一下 Android 一个按钮。它具有文本等属性,可让您向按钮添加文本。...但是 Flutter 按钮不是将标题作为字符串,而是另一个部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是有状态和无状态部件? TL;DR:允许您刷新屏幕部件是有状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个有状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.8K30

Flutter常见开发问题

Android View 主要是布局一个元素,但在 Flutter ,Widget 几乎就是一切。按钮到布局结构一切都是小部件。这里优势在于可定制性。...想象一下 Android 一个按钮。它具有文本等属性,可让您向按钮添加文本。但是 Flutter 按钮不是将标题作为字符串,而是另一个部件。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是有状态和无状态部件? TL;DR:允许您刷新屏幕部件是有状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个有状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.7K20

Flutter stateless 和 stateful widget 区别

Flutter stateless 和 stateful widget 区别 介绍 要在 Flutter 构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序构建块。...Flutter 使用小部件来创建现代移动应用程序。 Flutter Widget 分为两类:无状态 Widget 和有状态 Widget。...考虑到这一点,我们将研究 Flutter 状态和有状态部件,并解释它们区别。 让我们从这个问题开始:Flutter 中一个小部件状态是什么?...Flutter 内置了几个小部件,它们都分为有状态和无状态部件。 无状态部件Flutter 应用程序运行期间,无状态部件无法更改其状态。这意味着在应用程序运行时无法重绘无状态部件。...结论 我们已经介绍了有状态和无状态部件之间差异,以帮助您构建更好 Flutter 应用程序。示例,我们了解了无状态和有状态部件作用以及如何知道您用例需要哪个类。

2.2K10

开始使用-编写你第一个Flutter应用程序 顶

在这一步,您将添加一个有状态部件RandomWords,它创建其状态类RandomWordsState。 State类将最终维护小部件建议和最喜欢单词对。...该应用大部分代码都驻留在该类,该类保持RandomWords小部件状态。...MyApp删除Scaffold和AppBar实例。 这些将由RandomWordsState管理,这使得用户在下一步从一个屏幕导航到另一个屏幕时,可以更轻松地更改应用栏路由名称。...lib/main.dart 第6步:导航到新屏幕 在这一步,您将添加一个显示收藏夹新屏幕(在Flutter称为路由)。 您将学习如何在主路由和新路由之间导航。...在Flutter,导航器管理包含应用程序路由堆栈。 将路由推入导航器堆栈,将显示更新为该路由。 导航器堆栈中弹出路由,将显示返回到前一个路由。

9.5K20

Flutter构建布局 顶

然后本指南回过头来解释Flutter布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见布局小部件。...对齐小部件 调整小部件 包装小部件 嵌套行和列 常见布局小部件 标准小部件 材料组件 资源 建立布局 如果您想要了解布局机制“全貌”,请Flutter布局方法开始。...在步骤0,您将该图像包含在项目中并更新了pubspec文件,以便现在可以代码引用它: body: new ListView( children: [ new Image.asset(...这些小部件安排在ListView,而不是列,因为在设备上运行应用程序时,ListView会自动滚动。...如果您愿意,可以构建仅使用小部件标准小部件应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单部件并将其显示在屏幕上。

43K10

Flutter UI原理

没有单独“application”对象。 取而代之是,root widget担任此角色。 您可以通过将层次结构widget替换为另一个widget来响应事件,例如用户交互。...然后,框架比较新旧widget并有效地更新用户界面。 Widgets本身通常由许多,单一用途Widget组成,这些Widgets组合起来产生强大效果。...如果不是,删除Widget,Element和RenderObject(包括子树)并创建新对象。 如果它们来自相同类型,则只需更新RenderObject配置以表示Widget新配置。...Widget树下一个是SimpleContainer窗口小部件,但具有不同颜色配置。因此更新SimpleContainerRender对象上颜色属性并要求重绘。 其他对象将保持不变。...Flutter将会把SimpleText对应Element和SimpleTextRender移除,而SimpleButton没有对应Element,所以会根据Widget树,创建对应Element

3.3K20

Flutter Widget源码解析及实战

Widget 在flutter中所有页面展示出来元素都是由一个个widget组成,与原生android开发不同地方在于flutterwidget不仅仅表示UI元素,他也可以是一个完全和UI无关...用于不需要维护状态场景,它通常在build方法通过嵌套其它Widget来构建UI,在构建过程中会递归构建其嵌套Widget,具体如下: StatefulWidget 可变状态部件 与StatelessWidget...如果由于某种原因必须更改深度,请考虑将子树公共部分包装在具有[GlobalKey]部件,该[GlobalKey]在有状态部件生命周期内保持一致。...(如果没有其他小部件可以方便地分配密钥,[KeyedSubtree]小部件可能对此有用。) 下面是一个名为`YellowBird`状态部件子类框架。在这个例子[State]没有实际状态。...在一些场景下,Flutter framework会将State对象重新插到树包含此State对象子树在树一个位置移动到另一个位置时(可以通过GlobalKey来实现)。

2K20

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

在本文中,我们将详细了解全局变量缺点,并学习如何以更有效方式管理状态Flutter 全局变量是什么? 全局变量是公共变量,可以被 Flutter 程序每个方法和对象访问。...但是,有些开发人员会使用全局变量,因为他们在一个团队,并且在某些情况下不利于更改。 但是,无论应用程序大小如何,当需要维护代码时,全局变量都会带来挑战。...如何以更好方式管理状态 Flutter 是一个跨平台动态框架,用于收集和处理来自用户数据。 开关到单选按钮,必须有效地管理数据状态。但是,全局变量会增加应用程序数据流复杂性。...全局变量使数据很容易发生变异,这可能会导致处理用户那里收集数据时出现混乱。 provider 等状态管理包可用于缓解全局变量带来问题。以下是可用于管理状态状态包管理器和库列表: 1....Provider 状态管理包 Provider 状态管理器包被广泛用于收集小部件状态数据并在状态更改时更新部件。 使用提供程序时,只有受影响部件会在数据发生突变时被更新

3.4K30

Flutter Widget框架之旅 顶

介绍 你好,世界 基本部件 使用材料组件 处理手势 根据输入更改小部件 把它们放在一起 响应小部件生命周期事件 key 全局Key 介绍 Flutter部件采用现代反应式框架构建,React获得灵感...无状态部件他们部件接收参数,它们存储在final成员变量。 当一个小部件被要求build时,它会使用这些存储值来为它创建部件派生新参数。...在更复杂应用程序,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,其目标是收集特定信息(日期或位置),而另一个部件可能会使用该信息来更改整体呈现。...在Flutter,更改通知通过回调方式“向上”流,而当前状态则“向下”流向呈现状态部件。重定向这一流程共同父母是State。...为了通知框架它改变了它内部状态,它将这些调用包装在setState调用。调用setState会将这个小部件标记为肮脏,并计划在下一次您应用程序需要更新屏幕时重新构建它。

6.7K20

【译】Flutter 1.20 发布

默认情况下,几个常用部件将显示开发者期望光标,或者开发者可以受支持光标列表中指定另一个。 ?...Android上现有小部件新鼠标光标 此版本 Flutter 基于 2.9 版本 Dart 构建,它具有一个新基于状态 two-pas UTF-8解码器,该解码器具有在 Dart VM 优化解码原语...在我们UTF-8解码基准测试,我们发现,在低端ARM设备上,英语文本全面改进近200%提高到中文文本400%。...image 现在,“Network” 页面会将计时信息以及你状态和内容类型等其他信息添加到应用 network calls 。...插件M47发布 Flutter IntelliJ插件M48发布 Flutter内置面向Flutter开发人员新工具 重大变化 与以往一样,我们试图将重大更改数量保持在较低水平。

4K10

Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...pub地址:https://pub.dev/packages/lite_rolling_switch 介绍 在Flutter,开关是一个小部件,用于在两种选择(ON或OFF)之间进行选择。...它没有跟上实际状态。为了保持状态,它将调用onChanged属性。假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。...该演示视频展示了如何在颤动创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...在小部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式文本。

33.3K60

Flutter 1.22 正式发布

如果您想使用平台视图在iOS或Android上托管自己本机UI组件,则可以了解如何在使用平台视图在Flutter应用托管本机Android和iOS视图上。...您可以在OnPopPage回调更新状态,例如,如果用户弹出,则表示他们已“取消选择”当前颜色,因此我们不再希望显示该页面。...例如,状态恢复不仅适用于Android,iOS应用程序也可以受益。此外,我们正在忙于更新自己窗口小部件,以在恢复过程中保持其状态。...预览:DevTools更新网络页面 此版本另一个DevTools预览功能是能够在“网络”选项卡查看HTTP和HTTPs响应主体。 ?...Studio Code输出链接 Flutter开发人员所面临常规活动是终端或堆栈跟踪错误输出中进行。

7.4K20

Flutter 自定义动画底部导航栏

在这个博客,我们将探索Flutter自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏演示程序以及如何在 Flutter 应用程序中使用它。...介绍: 显示在应用程序底部Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内某个位置。底部导航栏包含各种选项,文本标签、图标或两者。...它提供了应用程序高级视角之间快速导航。对于更大屏幕,侧面导航可能更合适。 这个演示视频展示了如何在 flutter 中使用自定义底部导航栏。...它展示了自定义底部导航栏将如何在 Flutter 应用程序工作。它显示当用户点击底部导航栏图标时,它们将被动画化并显示标签文本。当用户点击任何图标时,颜色也会发生变化和动画。...这是我对用户交互自定义动画底部导航栏一个介绍。

8.8K30

10 个派上用场 Flutter部件

10 个派上用场 Flutter部件 尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在某些功能。...在今天文章,我将告诉你我希望早点知道最方便几个Flutter部件。 Spacer Spacer 创建一个可调整空白空间,它占据 Flex 容器中小部件之间任何剩余空间,例如行或列。...SafeArea 此小部件为您部件添加填充,确保您应用不会与操作系统和设备显示功能(状态栏)发生冲突。...当孩子被过度滚动时,动画圆形进度指示器会淡入视图并调用未来来更新可滚动内容。...Transform 这个小部件将您动画游戏提升到一个全新水平。它可以实现简单动画,旋转和缩放到更复杂动画, 3D 和倾斜动画。

1.3K20

为啥Flutter Hooks没有受到太多关注和青睐?

在本文中,我会试着告诉大家如何使用 Flutter Hooks 来减少样板代码,并基本上摆脱你现在用几乎所有有状态部件(StatefulWidget),让大家知道 Hooks 用起来是多么简单利落!...换句话说了解 Flutter Hooks 并不需要 React 相关知识。 Hooks 是一种与多个小部件共享同一代码方法,这些代码往往是在有状态部件之间重复或难以共享代码。...这里我总结是:“ Hooks 是 UI 逻辑管理者 ”。 接下来我会介绍自己在应用中使用最多 Hooks,及其有状态部件等效形式,方便你对比两者并理解前者带来实际收益。...const[] 表示在未放弃(dispose)小部件之前,请勿调用 effect。你可以提供一组参数,当其中一个参数更改时将调用 effect。下面来看看另一个关于动画例子。...,我们无需放弃控制器,也无需像有状态部件那样提供 ticker provider。

1.1K20

Flutter 探索 StreamBuilderimage

假设您需要根据一个 Stream 快照在 Flutter 构造一个小部件,那么有一个名为 StreamBuilder 部件。...在这个博客,我们将探索 Flutter StreamBuilder。我们还将实现一个演示程序,并向您展示如何在 Flutter 应用程序中使用 StreamBuilder。...A stream 构建器,它可以将流多个组件更改为小部件 Stream 像一条线。当您从一端输入值而另一端输入侦听器时,侦听器将获得该值。...一个流可以有多个侦听器,这些侦听器负载可以获得流水线,流水线将获得等价值。如何在流上放置值是通过使用流控制器实现。流构建器是一个小部件,它可以将用户定义对象更改为流。...参数: 下面是 StreamBuilderare 一些参数: Key? key: 小部件键,用于控制小部件如何被另一个部件取代 Stream?

2.5K00

Flutter UI如何使用Provide实现主题切换详解

背景 provide是谷歌官方出品一个状态管理框架flutter-provide,它允许在小部件传递数据,它被设计为ScopedModel替代品,允许我们更加灵活地处理数据类型和数据 为什么需要状态管理...在进行项目的开发时,我们往往需要管理不同页面之间数据共享,在页面功能复杂,状态达到几十个上百个时候,我们会难以清楚维护我们数据状态,本文将以主题切换这个功能使用状态管理来讲解如何在Flutter...有一些局限 如果模型较为复杂,当状态更新时,会有较多不必要更新 使用Provide 当状态发生变化时,widget树会更新指定节点,不会进行整颗widget树更新 Provide有泛型优势,相当于...如何使用 添加依赖 查看 pub-install 在pubspec.yaml引入依赖 dependencies: provide: ^1.0.2 #数据管理层 执行 flutter packages...ProviderNode( child: child, providers: providers, dispose: dispose ); } // 通过Provide小部件获取状态封装

2.1K20

2022年Flutter真的会一统大前端吗?

副标题《理性对待Flutter》 作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术分享,包括Flutter,程序,安卓...由于它具有内置部件而不是使用原生平台小部件,因此 Flutter 应用程序最小大小超过 4MB,明显大于原生 Java(539KB)和 Kotlin(550KB)应用程序。...Flutter可以做网站吗|Flutter Web劝退指南|入门到放弃只需要几分钟 平台特定外观和设计 Material Widgets 和 Cupertino 小部件分别是 Android 和 iOS...在创建 Flutter 应用程序时,您可以同时使用这两个小部件,但是当我们为 iOS 构建使用 Material 小部件时,该应用程序缺乏原生外观和感觉。...为了实现这两个应用程序原生外观,我们应该检查代码平台并渲染特定部件,这是编码和应用程序性能最差部分。

2.4K20
领券