Flutter 状态组件 InheritedWidget

这篇具有很好参考价值的文章主要介绍了Flutter 状态组件 InheritedWidget。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter 状态组件 InheritedWidget

Flutter 状态组件 InheritedWidget,程序人生

视频

前言

今天会讲下 inheritedWidget 组件,InheritedWidget 是 Flutter 中非常重要和强大的一种 Widget,它可以使 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget,从而简化了状态管理和数据传递的复杂性,提高了代码的可读性、可维护性和性能。

Flutter 状态组件 InheritedWidget,程序人生

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?plain=1#L133 Flutter 状态组件 InheritedWidget,程序人生

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 中,有不同的状态管理方法可供选择,包括:

  1. StatefulWidget 和 State:StatefulWidget 允许你创建有状态的部件,而 State 则允许你管理该部件的状态。这是 Flutter 中最基本和最常用的状态管理方法。
  2. InheritedWidget:InheritedWidget 允许你共享数据和状态,并且可以让子部件自动更新当共享的数据发生变化时。
  3. Provider:Provider 是一个第三方库,它基于 InheritedWidget,可以更方便地管理应用程序中的状态。
  4. Redux:Redux 是一个流行的状态管理库,它基于单一数据源和不可变状态的概念,可以使状态管理更加可预测和易于维护。
  5. BLoC:BLoC 是一个基于流的状态管理库,它将应用程序状态分为输入、输出和转换。它可以使应用程序更清晰和可测试。
  6. 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.dependOnInheritedWidgetOfExactType<UserProfileState>();

    // 安全检查
    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
  State<UserView> createState() => _UserViewState();
}

class _UserViewState extends State<UserView{
  ...

成员变量

class _UserViewState extends State<UserView{
  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
  State<AppPage> createState() => _AppPageState();
}

class _AppPageState extends State<AppPage{
  ...

成员变量

class _AppPageState extends State<AppPage{
  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

状态过程如下:

  1. UserView 触发 _changeUserName 修改用户名
  2. _userName 改变的数据压入 UserProfileState
  3. UserProfileState 触发 updateShouldNotify
  4. 组件 didChangeDependencies 被触发
  5. 最后子成员组件更新成功

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_inherited_widget

小结

在 Flutter 中,InheritedWidget 是一种特殊的 Widget,它允许 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget,而无需通过回调或参数传递数据。下面是 InheritedWidget 的一些主要作用和好处:

  1. 共享数据:InheritedWidget 允许祖先 Widget 共享数据给它们的后代 Widget,这使得在 Widget 树中传递数据变得更加容易和高效。这种共享数据的方式避免了回调和参数传递的复杂性,使得代码更加简洁易懂。
  2. 自动更新:当共享的数据发生变化时,InheritedWidget 会自动通知它的后代 Widget 进行更新,这使得状态管理变得更加容易。这种自动更新的方式避免了手动管理状态的复杂性,使得代码更加健壮和易于维护。
  3. 跨 Widget 树:InheritedWidget 可以跨 Widget 树共享数据,这使得在应用程序中不同模块之间传递数据变得更加容易。这种跨 Widget 树的共享方式避免了在不同模块之间传递数据时的复杂性,使得代码更加模块化和易于扩展。
  4. 性能优化:InheritedWidget 可以避免不必要的 Widget 重建,从而提高应用程序的性能。当共享的数据没有发生变化时,InheritedWidget 不会通知后代 Widget 进行更新,这避免了不必要的 Widget 重建,提高了应用程序的性能。

感谢阅读本文

如果我有什么错?请在评论中让我知道。我很乐意改进。


© 猫哥 ducafecat.com

end

本文由 mdnice 多平台发布文章来源地址https://www.toymoban.com/news/detail-605283.html

到了这里,关于Flutter 状态组件 InheritedWidget的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter 05 组件状态、生命周期、数据传递(共享)、Key

    1、Widget组件生命周期 和其他的视图框架比如android的Activity一样,flutter中的视图Widget也存在生命周期,生命周期的回调函数体现在了State上面。组件State的生命周期整理如下图所示: createState: 当一个StatefulWidget插入到渲染树结构、或者从渲染树结构移除时,都会调用Stateful

    2024年02月05日
    浏览(51)
  • Flutter状态管理 — 探索Flutter中的状态

    前言 随着响应式编程的理念Flutter被大众所了解以来,状态管理一直是一个引人深思的话题。如果想要学习好Flutter这样的响应式的编程框架就一定是离不开状态管理的。我遇到过很多没有了解过响应式编程框架的,或者从事后端开发,自己想用Flutter写个app玩玩的朋友,一上来

    2024年02月09日
    浏览(39)
  • 【Flutter】Flutter 中处理 loading 状态

    今天我们将一起探讨在 Flutter 中如何控制 loading 状态。 Flutter,作为一个高效、简洁的 UI 框架,已经在全球范围内得到了广泛的应用。处理 loading 状态,这是一个看似简单,实则对用户体验有着巨大影响的话题。合理地展示 loading 状态,可以让我们的应用看起来更加流畅,同

    2024年02月09日
    浏览(33)
  • 【Flutter】Flutter 状态管理 Provider 包使用概述

    🎉想要精通 Flutter,掌握更多技巧和最佳实践?好消息来了!👉 Flutter专栏-Flutter Developer 101 入门小册 正在等你!📚 🔍这里有你需要的所有 Flutter 学习资源,包括代码示例和深度解析。🎯 ⏰专栏内容持续更新,价格也会随之上涨。现在加入,享受最优惠的价格!💰 🚀现

    2024年02月09日
    浏览(41)
  • Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理

    Flutter笔记 Flutter的应用生命周期状态(lifecycleState)管理 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134127670 【介绍】: WidgetsBinding.instance 是Flutter中用于管理应用程序事件和生命周期的重要工具

    2024年02月06日
    浏览(42)
  • Flutter 状态管理 Provider

    Flutter基于声明式构建UI,原生则是命令式,状态管理是用于解决声明式开发带来的问题。 例:命令式的原生,数据更新需要拿到对应控件并更改其显示值;而声明式则需要更改数据值并通过setstate更新状态,重新构建组件 Flutter 中有这么一种说法: UI = f(state): 优势: 无需繁琐

    2024年02月13日
    浏览(35)
  • flutter的状态管理学习

    1.flutter widget分类 组合 渲染 代理 2. 代理组件又分为 Positioned向父组件传递数据 InheritedWidget向子组件传递数据 3. 状态 state 数据 状态就是用到了向子组件传递数据,并且需要刷新的时候刷新组件 4. 刷新 数据变化 获取并在改变的时候会导致刷新 dependOnInheritedWidgetOfExactType 只获

    2024年01月25日
    浏览(42)
  • Flutter 状态栏完美攻略

    Brightness.light 文字黑色 Brightness.dark 文字白色 默认是带个遮罩的,完全去除:

    2024年02月14日
    浏览(32)
  • flutter 常见的状态管理器

    当我们构建复杂的移动应用时,有效的状态管理是至关重要的,因为应用的不同部分可能需要共享数据、相应用户交互并保持一致的状态。Flutter 中有多种状态管理解决方案,下面详细介绍一些常见的状态管理方式:Provider、Bloc 和 Redux、getx 等等一些管理工具。 Provider: Pro

    2024年02月12日
    浏览(41)
  • Flutter 状态管理之GetX库

      Flutter使用的是声明式UI,是通过状态去更新UI组件的,因此我们首先就要学习状态的使用。同样为了简化原本的状态使用,我们会使用Getx库。   之前说要写Flutter,一拖就是一年多,有些不好意思。现在都24年了,终于等到你,下面还是按照我们最属于的思路来吧。 首

    2024年01月23日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包