【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】功能型组件之数据共享

前言

接口描述

代码示例

总结

didChangeDependencies

深入了解InheritedWidget

最新文章

热门文章