开平市建设工程站网站,寿光人才网招聘网,成都网站建设培训学校,大淘客 wordpressFlutter 状态组件 InheritedWidget 视频 前言 今天会讲下 inheritedWidget 组件#xff0c;InheritedWidget 是 Flutter 中非常重要和强大的一种 Widget#xff0c;它可以使 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget#xff0c;从而简化了状态管理和数据传递… Flutter 状态组件 InheritedWidget 视频 前言 今天会讲下 inheritedWidget 组件InheritedWidget 是 Flutter 中非常重要和强大的一种 Widget它可以使 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget从而简化了状态管理和数据传递的复杂性提高了代码的可读性、可维护性和性能。 Provider 就是对 inheritedWidget 的高度封装 https://github.com/rrousselGit/provider/tree/54af320894e3710b8fad2ae3bb4a6ea0e5aba13e/resources/translations/zh-CN Flutter_bloc 也是这样 https://github.com/felangel/bloc/blob/cef8418a24b916f439f747e2b0c920ee50b8bd18/docs/zh-cn/faqs.md?plain1#L133 Flutter_bloc 中确实有 provider 的引用 https://github.com/felangel/bloc/blob/cef8418a24b916f439f747e2b0c920ee50b8bd18/packages/flutter_bloc/pubspec.yaml 如果你只是想简单的状态管理几个全局数据完全可以轻巧的使用 inheritedWidget 。 今天就来讲下如何使用和要注意的地方。 原文 https://ducafecat.com/blog/flutter-inherited-widget 参考 https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html 状态管理 在 Flutter 中状态管理是指管理应用程序的数据和状态的方法。在应用程序中有许多不同的组件和部件它们可能需要在不同的时间点使用相同的数据。状态管理的目的是使这些数据易于访问和共享并确保应用程序的不同部分保持同步。 在 Flutter 中有不同的状态管理方法可供选择包括 StatefulWidget 和 StateStatefulWidget 允许你创建有状态的部件而 State 则允许你管理该部件的状态。这是 Flutter 中最基本和最常用的状态管理方法。 InheritedWidgetInheritedWidget 允许你共享数据和状态并且可以让子部件自动更新当共享的数据发生变化时。 ProviderProvider 是一个第三方库它基于 InheritedWidget可以更方便地管理应用程序中的状态。 ReduxRedux 是一个流行的状态管理库它基于单一数据源和不可变状态的概念可以使状态管理更加可预测和易于维护。 BLoCBLoC 是一个基于流的状态管理库它将应用程序状态分为输入、输出和转换。它可以使应用程序更清晰和可测试。 GetX: GetX 是一个流行的 Flutter 状态管理和路由导航工具包它提供了许多功能包括快速且易于使用的状态管理、依赖注入、路由导航、国际化、主题管理等。是由社区开发和维护的第三方工具包。 步骤 第一步用户状态 InheritedWidget 类 lib/states/user_profile.dart // 用户登录信息class UserProfileState extends InheritedWidget { ...} 参数 const UserProfileState({ super.key, required this.userName, required this.changeUserName, required Widget child, // 包含的子节点 }) : super(child: child); /// 用户名 final String userName; /// 修改用户名 final Function changeUserName; of 方法查询依据上下文 context static UserProfileState? of(BuildContext context) { final userProfile context.dependOnInheritedWidgetOfExactTypeUserProfileState(); // 安全检查 assert(userProfile ! null, No UserProfileState found in context); return userProfile; } 需要做一个 userProfile 空安全检查 重写 updateShouldNotify 通知更新规则 override bool updateShouldNotify(UserProfileState oldWidget) { return userName ! oldWidget.userName; } 如果用户名发生改变进行通知 第二步头部底部组件 StatelessWidget lib/widgets/header.dart class HeaderWidget extends StatelessWidget { const HeaderWidget({super.key}); override Widget build(BuildContext context) { String? userName UserProfileState.of(context)?.userName; return Container( width: double.infinity, decoration: BoxDecoration( border: Border.all(color: Colors.blue), ), child: Text(登录$userName), ); }} 通过 String? userName UserProfileState.of(context)?.userName; 的方式 读取状态数据 userName lib/widgets/bottom.dart class BottomWidget extends StatelessWidget { const BottomWidget({super.key}); override Widget build(BuildContext context) { String? userName UserProfileState.of(context)?.userName; return Container( width: double.infinity, decoration: BoxDecoration( border: Border.all(color: Colors.blue), ), child: Text(登录$userName), ); }} 第三步用户组件 StatefulWidget lib/widgets/user_view.dart class UserView extends StatefulWidget { const UserView({super.key}); override StateUserView createState() _UserViewState();}class _UserViewState extends StateUserView { ... 成员变量 class _UserViewState extends StateUserView { String? _userName; 重新 didChangeDependencies 依赖函数更新数据 override void didChangeDependencies() { _userName UserProfileState.of(context)?.userName; super.didChangeDependencies(); } 通过 UserProfileState.of(context)?.userName; 的方式读取 build 函数 override Widget build(BuildContext context) { return Container( width: double.infinity, decoration: BoxDecoration( border: Border.all(color: Colors.purple), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(用户名$_userName), ElevatedButton( onPressed: () { // 随机 10 个字母 String randomString String.fromCharCodes( List.generate( 10, (index) 97 Random().nextInt(26), ), ); // 改变用户名 UserProfileState.of(context)?.changeUserName(randomString); }, child: const Text(改变名称), ), ], ), ); } randomString 是一个随机的 10 个字母 通过 UserProfileState.of(context)?.changeUserName(randomString); 的方式触发函数进行状态更改。 最后页面调用 AppPage lib/page.dart class AppPage extends StatefulWidget { const AppPage({super.key}); override StateAppPage createState() _AppPageState();}class _AppPageState extends StateAppPage { ... 成员变量 class _AppPageState extends StateAppPage { String _userName 未登录; 给了一个 未登录 的默认值 修改用户名函数 // 修改用户名 void _changeUserName(String userName) { setState(() { _userName userName; }); } build 函数 override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(InheritedWidget), ), body: UserProfileState( userName: _userName, changeUserName: _changeUserName, child: SafeArea( child: Column( children: const [ // 头部 HeaderWidget(), // 正文 Expanded(child: UserView()), // 底部 BottomWidget(), ], ), ), ), ); } 可以发现 UserProfileState 被套在了最外层当然还有 Scaffold 。 包裹的子组件有HeaderWidget、BottomWidget、UserView 状态过程如下 UserView 触发 _changeUserName 修改用户名 _userName 改变的数据压入 UserProfileState UserProfileState 触发 updateShouldNotify 组件 didChangeDependencies 被触发 最后子成员组件更新成功 代码 https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_inherited_widget 小结 在 Flutter 中InheritedWidget 是一种特殊的 Widget它允许 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget而无需通过回调或参数传递数据。下面是 InheritedWidget 的一些主要作用和好处 共享数据InheritedWidget 允许祖先 Widget 共享数据给它们的后代 Widget这使得在 Widget 树中传递数据变得更加容易和高效。这种共享数据的方式避免了回调和参数传递的复杂性使得代码更加简洁易懂。 自动更新当共享的数据发生变化时InheritedWidget 会自动通知它的后代 Widget 进行更新这使得状态管理变得更加容易。这种自动更新的方式避免了手动管理状态的复杂性使得代码更加健壮和易于维护。 跨 Widget 树InheritedWidget 可以跨 Widget 树共享数据这使得在应用程序中不同模块之间传递数据变得更加容易。这种跨 Widget 树的共享方式避免了在不同模块之间传递数据时的复杂性使得代码更加模块化和易于扩展。 性能优化InheritedWidget 可以避免不必要的 Widget 重建从而提高应用程序的性能。当共享的数据没有发生变化时InheritedWidget 不会通知后代 Widget 进行更新这避免了不必要的 Widget 重建提高了应用程序的性能。 感谢阅读本文 如果我有什么错请在评论中让我知道。我很乐意改进。 © 猫哥 ducafecat.com end 本文由 mdnice 多平台发布
