第一百零四回 全局共享数据之Consumer

文章目录

  • 知识回顾
  • 使用方法
  • 示例代码
  • 经验分享

我们在上一章回中介绍了 组件之间共享数据相关的内容,本章回中将继续介绍该内容.闲话休提,让我们一起Talk Flutter吧。

知识回顾

我们在前面章回中介绍了全局共享数据相关的内容,当时介绍了获取共享数据的三种方法,本章回将介绍其中的一种方法:使用Consumer获取共享数据

使用方法

Consumer是一个Widget,它提供了builder和child两个属性,我们可以通过builder属性获取到共享数据类型的对象,然后就可以使用共享类型提供的getter方法获取对象中的共享数据。我们重点介绍Consumer的builder属性,该属性是必选属性,也就是说我们必须它该属性赋值,该属性是方法类型,方法中包含三个参数,方法返回Widget对象,该方法的函数原理,以及方法中三个参数的详细功能如下:

  final Widget Function(
    BuildContext context,
    T value,
    Widget? child,
  ) builder;
  • context:主要用来创建Widget,为创建Widget提供上下文环境;
  • value:是泛型类型,它用来表示共享数据对象,通过该对象的getter方法可以获取到共享数据;
  • child:表示Consumer组件的子组件,因此它代表的对象和Consumer组件的child属性代表的对象相同;

介绍完Consumer组件中builder属性的相关内容后,我们通过具体的代码来演示它的使用方法、

示例代码

class WidgetB extends StatelessWidget {
  const WidgetB({
    super.key,
  });

  
  Widget build(BuildContext context) {
    ///使用consumer共享数据时consumer外层的build不调用,只调用consumer中builder属性对应的方法
    print('builder of Widget B running');
    return Consumer<ViewModel>(
      builder: (context, data, child) {
        print('builder of Consumer of Widget B running');
        if (child != null) {
          ///在这里添加需要更新的widget
          print(' child is not null');
        }
        print('data is: ${data.getData}');
        return Text("Widget B data: ${data._data}");
      },

      ///在这里添加不需要更新的widget,这个child和builder方法中的child一样
      child: Text('childe of consumer'),
    );
  }
}

在上面的代码中,把Consumer组件封装到了一个独立的组件中,一方面可以减少代码的耦合,另一方面可以给builder属性传递BuildContext类型的参数,代码中相关的地方都添加了注释,我就不详细介绍了,此外代码给Consumer指定了泛型类型:ViewModel。它是共享数据的类型,详细的定义可以参数前面章回的示例代码。

经验分享

  • Consumer组件在实际项目中使用比较多,因为它的性能比Provider组件好一些,比如上面代码中如果共享数据有变化,那么Consumer组件所在的组件WidgetB不会更新,也就是说Widget的build()方法不会被回调,回调的是Consumer组件中builder属性对应的方法。
  • 我们介绍的Consumer组件只能共享一种类型的数据,我们还可以使用Consum2,Consumer3组件来共享2种,3种类型的数据,我们在这里就不介绍了,它们的用法相似,大家可以自己动手去实践。

看官们,关于"全局共享数据之Consumer"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,Flutter,Consume,Consumer,状态管理)