Flutter功能型组件之数据共享

Posted 一叶飘舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter功能型组件之数据共享相关的知识,希望对你有一定的参考价值。

前言

  InheritedWidget提供了一种数据在widget树中从上到下传递、共享的方式,例如在应用的根widget中通过InheritedWidget共享了一个数据,那么便可以在子widget中来获取该共享的数据。InheritedWidget在widget树中数据传递方向是从上到下的,这和Notification的传递方向是相反的。

代码示例

// 数据共享(InheritedWidget)

// InheritedWidget提供了一种数据在widget树中从上到下传递、共享的方式,例如在应用的根widget中通过InheritedWidget共享了一个数据,
// 那么便可以在子widget中来获取该共享的数据。InheritedWidget在widget树中数据传递方向是从上到下的,这和Notification的传递方向是相反的。

// InheritedWidget版本的计数器,用来演示InheritedWidget的功能特性
import 'package:flutter/material.dart';

class ShareDataWidget extends InheritedWidget

  ShareDataWidget(
    @required this.data,
    Widget child
  ) :super(child: child);

  // 需要在子树中共享的数据,保存点击次数
  final int data;

  // 定义一个便捷方法,方便子树中的widget获取共享数据
  static ShareDataWidget of(BuildContext context)
    return context.inheritFromWidgetOfExactType(ShareDataWidget);
  

  // 深入了解InheritedWidget
  // 现在来思考一下,如果只想在__TestWidgetState中引用ShareDataWidget数据,但却不希望在ShareDataWidget发生变化时调用__TestWidgetState的didChangeDependencies()方法应该怎么办?
  // 其实答案很简单,我们只需要将ShareDataWidget.of()的实现改一下即可
//  static ShareDataWidget of(BuildContext context)
//    return context.ancestorInheritedElementForWidgetOfExactType(ShareDataWidget).widget;
//  

  // 该回调决定当data发生变化时,是否通知子树中依赖data的Widget
  @override
  bool updateShouldNotify(ShareDataWidget old)
    // 如果返回true,则子树中依赖本widget的子widget的state.didChangeDependencies会被调用
    return old.data == data;
  


// 实现一个子组件_TestWidget,在其build方法中引用ShareDataWidget中的数据。同时,在其didChangeDependencies() 回调中打印日志
class _TestWidget extends StatefulWidget
  
  __TestWidgetState createState() => __TestWidgetState();


class __TestWidgetState extends State<_TestWidget>
  @override
  Widget build(BuildContext context)
    //使用InheWidget中的共享数据
    return Text(ShareDataWidget
        .of(context)
        .data
        .toString()
    );
  

  // 问题:应该在didChangeDependencies()中做什么?
  // 一般来说,子widget很少会重写此方法,因为在依赖改变后framework也都会调用build()方法。
  // 但是,如果你需要在依赖改变后执行一些昂贵的操作,比如网络请求,这时最好的方式就是在此方法中执行,这样可以避免每次build()都执行这些昂贵操作。
  @override
  void didChangeDependencies()
    super.didChangeDependencies();
    // 父widget中的InheritedWidget改变(即updateShouldNotify返回true)时会被调用
    // 如果build没有依赖InheritedWidget,则此回调不会被调用
    print('Dependencies change');
  


// 创建一个按钮,每点击一次,就将ShareDataWidget的值自增
class InheritedWidgetTest extends StatefulWidget
  _InheritedWidgetTestState createState() => _InheritedWidgetTestState();


class _InheritedWidgetTestState extends State<InheritedWidgetTest>

  int count = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('InheritedWidget'),
      ),
      body: Center(
        child: ShareDataWidget(
          data: count,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 20.0),
                // 子widget中依赖ShareDataWidget
                child: _TestWidget(),
              ),
              RaisedButton(
                child: Text('Increment'),
                // 每点击一个,将count自增,然后build,ShareDataWidget的data将被更新
                onPressed: () => setState(() => ++count),
              )
            ],
          ),
        ),
      ),
    );
  


总结

didChangeDependencies

  在之前介绍StatefulWidget时,提到State对象有一个didChangeDependencies回调,它会在“依赖”发生变化时被Flutter Framework调用。而这个“依赖”指的就是子widget是否使用了父widget中InheritedWidget的数据!如果使用了,则代表子widget依赖有依赖InheritedWidget;如果没有使用则代表没有依赖。这种机制可以使子组件在所依赖的InheritedWidget变化时来更新自身!比如当主题、locale(语言)等发生变化时,依赖其的子widget的didChangeDependencies方法将会被调用。

深入了解InheritedWidget

针对下面代码:

static ShareDataWidget of(BuildContext context)
    return context.inheritFromWidgetOfExactType(ShareDataWidget);
  

static ShareDataWidget of(BuildContext context)
    return context.ancestorInheritedElementForWidgetOfExactType(ShareDataWidget).widget;
  

@override
InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) 
  final InheritedElement ancestor = _inheritedWidgets == null ? null :  _inheritedWidgets[targetType];
  return ancestor;


@override
InheritedWidget inheritFromWidgetOfExactType(Type targetType,  Object aspect ) 
  final InheritedElement ancestor = _inheritedWidgets == null ? null :   _inheritedWidgets[targetType];
  //多出的部分
  if (ancestor != null) 
    assert(ancestor is InheritedElement);
    return inheritFromElement(ancestor, aspect: aspect);
  
  _hadUnsatisfiedDependencies = true;
  return null;


// 可以看到,inheritFromWidgetOfExactType() 比 ancestorInheritedElementForWidgetOfExactType()多调了inheritFromElement方法,inheritFromElement源码如下:

@override
InheritedWidget inheritFromElement(InheritedElement ancestor,  Object aspect ) 
  //注册依赖关系
  _dependencies ??= HashSet<InheritedElement>();
  _dependencies.add(ancestor);
  ancestor.updateDependencies(this, aspect);
  return ancestor.widget;


  可以看到inheritFromElement方法中主要是注册了依赖关系!看到这里也就清晰了,调用inheritFromWidgetOfExactType() 和 ancestorInheritedElementForWidgetOfExactType()的区别就是前者会注册依赖关系,而后者不会,所以在调用inheritFromWidgetOfExactType()时,InheritedWidget和依赖它的子孙组件关系便完成了注册,之后当InheritedWidget发生变化时,就会更新依赖它的子孙组件,也就是会调这些子孙组件的didChangeDependencies()方法和build()方法。而当调用的是 ancestorInheritedElementForWidgetOfExactType()时,由于没有注册依赖关系,所以之后当InheritedWidget发生变化时,就不会更新相应的子孙Widget。
  注意,如果将上面示例中ShareDataWidget.of()方法实现改成调用ancestorInheritedElementForWidgetOfExactType(),运行示例后,点击"Increment"按钮,会发现__TestWidgetState的didChangeDependencies()方法确实不会再被调用,但是其build()仍然会被调用!造成这个的原因其实是,点击"Increment"按钮后,会调用_InheritedWidgetTestRouteState的setState()方法,此时会重新构建整个页面,由于示例中,__TestWidget 并没有任何缓存,所以它也都会被重新构建,所以也会调用build()方法。
  一个问题:实际上,我们只想更新子树中依赖了ShareDataWidget的组件,而现在只要调用_InheritedWidgetTestRouteState的setState()方法,所有子节点都会被重新build,这很没必要,那么有什么办法可以避免呢?答案是缓存!一个简单的做法就是通过封装一个StatefulWidget,将子Widget树缓存起来

以上是关于Flutter功能型组件之数据共享的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 数据共享 InheritedWidget

Flutter核心类分析深入理解数据共享InheritedWidget

Flutter核心类分析深入理解数据共享InheritedWidget

Flutter之夸组件共享状态Provider原理剖析

Flutter之跨组件共享状态Provider原理剖析

Flutter 功能型组件:跨组件状态共享(Provider)