Flutter系列六：InheritedWidget的使用和源码

2021-03-25  本文已影响0人  chonglingliu

在用Flutter进行界面开发时，我们经常会遇到数据传递的问题。但是由于Flutter采用树形结构，造成数据传递的链条有时候会很长，代码写起来也很不方便。

InheritedWidget可以让它的子节点能访问到它的公开属性，从而实现数据的跨Widget的传递。

InheritedWidget使用

我们先用一个Demo来看看InheritedWidget的使用方法。Demo如下，InheritedWidget子类InfoWidget的number数值变化后，底下的三个InfoChildWidget显示的number也会变化。

demo

接下来我们来写代码。

class InfoWidget extends InheritedWidget {
  // 1
  final int number;
    
  // 2    
  InfoWidget({Key key, @required this.number, @required child})
      : super(key: key, child: child);
    
  //3    
  @override
  bool updateShouldNotify(InfoWidget oldWidget) {
    return number != oldWidget.number;
  }
  
  // 4
  static InfoWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType(); 
  }
  
}

代码说明：

  1. number就是定义的共享的数据；
  2. InfoWidget的构造函数中，有三个参数除了key外，都是必传参数，number是外部传入的给InfoWidget共享的数据，child是子Widget；
  • InheritedWidget是Widget的子类，但是没有StatefulWidget类似的State，这样InheritedWidget的所有属性都是不可变的，所以数据是需要父Widget提供的。
  • child是InheritedWidget的必传参数，所以子类也得是必传参数。
  1. InheritedWidget的子类需要重写updateShouldNotify方法，这个方法如果返回true，则会回调StatefulElement中state的didChangeDependencies方法；
  2. of这个静态方法是留给子Widget使用的，子Widget可以通过它获取到InheritedWidget的共享数据。

取of方法名是个约定俗成，当然也可以随便取个合法的方法名。

class InfoChildWidget extends StatelessWidget {
  
  // 1
  const InfoChildWidget();

  @override
  Widget build(BuildContext context) {
    // 2
    final int number = InfoWidget.of(context).number;
    return Text("$number", style: TextStyle(color: Colors.amber, fontSize: 40));
  }
}
  1. 使用InfoChildWidget的常量构造函数是为了解决不必要的重建和销毁。
  2. InfoWidget.of(context)就是上面提到的给子Widget使用的of静态方法，然后取到number就可以直接显示了。
InfoWidget(
    number: _number,
        child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InfoChildWidget(),
                InfoChildWidget(),
                InfoChildWidget(),
              ],
            ),
        ),
    )

使用的时候是将InfoChildWidget做为InfoWidget的子Widget，我这里特意中间加了Center和Column，就是为了指出InfoChildWidget不一定需要是直接子Widget。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _number = 0;
  void _incrementCounter() {
    _number = Random().nextInt(100);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: InfoWidget(
          number: _number,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InfoChildWidget(),
                InfoChildWidget(),
                InfoChildWidget(),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

<!-- InfoWidget -->
class InfoWidget extends InheritedWidget {
  final int number;

  InfoWidget({Key key, @required this.number, @required child})
      : super(key: key, child: child);

  @override
  bool updateShouldNotify(InfoWidget oldWidget) {
    return number != oldWidget.number;
  }

  static InfoWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }
}

<!-- InfoChildWidget -->
class InfoChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final int number = InfoWidget.of(context).number;
    return Text("$number", style: TextStyle(color: Colors.amber, fontSize: 40));
  }
}

效果如下：

效果

InheritedWidget源码分析

设置inheritedWidgets

每个Element都有一个key为InheritedWidget类型，值为InheritedElement的Map属性_inheritedWidgets。

Map<Type, InheritedElement>? _inheritedWidgets;

每个Widget生成的Element挂载到Element Tree上的时候都会调用mount方法：

<!-- Element -->
void mount(Element? parent, dynamic newSlot) {
    _updateInheritance();
}

mount方法会调用_updateInheritance方法：

<!-- Element -->
void _updateInheritance() {
    _inheritedWidgets = _parent?._inheritedWidgets;
}

如果不是InheritedElement,则_inheritedWidgets都指向父Element的_inheritedWidgets。

<!-- InheritedElement -->
void _updateInheritance() {
    final Map<Type, InheritedElement>? incomingWidgets = _parent?._inheritedWidgets;
    if (incomingWidgets != null)
      _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);
    else
      _inheritedWidgets = HashMap<Type, InheritedElement>();
    _inheritedWidgets![widget.runtimeType] = this;
}

如果是InheritedElement,先拷贝一份父节点的_inheritedWidgets, 然后添加或者替换key为widget.runtimeType，值为InheritedElement的键值对。

注意：这里如果父类有相同的widget.runtimeType，则会被替换，也就是说如果有多个相同的InheritedWidget，子节点的Element只能找到离它最近的那个。

inheritedWidgets
子Element对InheritedElement并添加依赖

我们来看看of类方法调用的dependOnInheritedWidgetOfExactType方法：

<!-- Element -->
Set<InheritedElement>? _dependencies;

T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object? aspect}) {
    // 1
    final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
    if (ancestor != null) {
      // 2
      return dependOnInheritedElement(ancestor, aspect: aspect) as T;
    }
    _hadUnsatisfiedDependencies = true;
    return null;
}

InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) {
    _dependencies ??= HashSet<InheritedElement>();
    // 3
    _dependencies!.add(ancestor);
    // 3
    ancestor.updateDependencies(this, aspect);
    return ancestor.widget;
}
  1. 从_inheritedWidgets这个Map中找到类型对应的InheritedElement；
  2. 如果找到则调用dependOnInheritedElement方法；dependOnInheritedElement方法主要是将InheritedElement加入到_dependencies这个Set中，然后InheritedElement调用updateDependencies方法把子Element加入到_dependents中。
<!-- InheritedElement -->
void updateDependencies(Element dependent, Object? aspect) {
    setDependencies(dependent, null);
}

void setDependencies(Element dependent, Object? value) {
    _dependents[dependent] = value;
}

final Map<Element, Object?> _dependents = HashMap<Element, Object?>();
updateDependencies
InheritedElement数据变化调用StatefulElement的didChangeDependencies方法：

InheritedWidget调用build方法的时候，会调用notifyClients方法：

void updated(InheritedWidget oldWidget) {
    if (widget.updateShouldNotify(oldWidget))
      super.updated(oldWidget);
}
  
void updated(covariant ProxyWidget oldWidget) {
    notifyClients(oldWidget);
}

notifyClients方法会对_dependents中的每个子Element调用notifyDependent方法，子Element会调用didChangeDependencies方法：

void notifyClients(InheritedWidget oldWidget) {
    for (final Element dependent in _dependents.keys) {
      notifyDependent(oldWidget, dependent);
    }
}

void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {
    dependent.didChangeDependencies();
}

子Element调用didChangeDependencies最后会重新构建：

void didChangeDependencies() {
    markNeedsBuild();
}

当子Element为StateFulElement时，会将_didChangeDependencies置为true；

void didChangeDependencies() {
    super.didChangeDependencies();
    _didChangeDependencies = true;
}

当重新构建时，StateFulElement会调用state的didChangeDependencies方法。

void performRebuild() {
    if (_didChangeDependencies) {
      state.didChangeDependencies();
      _didChangeDependencies = false;
    }
    super.performRebuild();
}
didChangeDependencies

总结

InheritedWidget传递参数的方案只是把传参从Constructor变成了BuildContext。但是它还是有些的不完善的地方：

  1. 某个类型的InheritedWidget只能获取到最近的那一个；
  2. 重新构建没法只重构依赖InheritedWidget的子Widget，性能上不是太好。
上一篇下一篇

猜你喜欢

热点阅读