【Flutter】InheritedWidget、InheritedModel的使用介绍

约定不等于承诺〃 2023-07-24 13:20 30阅读 0赞

Flutter中有四种widget

*  StatelessWidget
 *  StatefullWidget
 *  RenderObjectWidget
 *  InheritedWidget

其中`StatelessWidget`和`StatefulWidget`是最常见到的，从状态管理角度的分类；`RenderObjectWidget`是所有需要渲染的Widget的基类。

至于最后一个`InheritedWidget`，许多初学者不一定了解，但是在一些稍微复杂的项目中是必须要用到的，所以本文介绍一下InheritedWidget的用法

# InheritedWidget #

--------------------

> To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.inheritFromWidgetOfExactType.
> 
> Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state.

通常情况下，子widget无法单独感知父widget的变化，当父state变化时，通过其build重建所有子widget；

`InheritedWidget`可以避免这种全局创建，实现局部的子widget更新：  
子widget通过`BuildContext.inheritFromWidgetOfExactType`从buildContext中获取并监听指定类型的父`InheritedWidget`，并跟随其重建而rebuild  
![在这里插入图片描述][2020041200082113.png]  
如上图，点击C按钮，State变化后，A的Text可以单独刷新，B不受到影响

# 代码演示 #

--------------------

接下来通过代码对比一下使用或不使用`InheritedWidget`的区别：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]  
点击+，后上面的0变化，中间的文字部分不变化。

## 传统实现 ##

点击按钮state变化后，widgetA、B、C都会rebuild

class TopPage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Demo'),
            ),
            body: HomePage(),
          ),
        );
      }
    }
    
    class HomePage extends StatefulWidget { 
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> { 
      int _counter = 0;
    
      void _incrementCounter() { 
        setState(() { 
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              WidgetA(_counter),
              WidgetB(),
              WidgetC(_incrementCounter),
            ],
          ),
        );
      }
    }
    
    class WidgetA extends StatelessWidget { 
      final int counter;
    
      WidgetA(this.counter);
    
      @override
      Widget build(BuildContext context) { 
        return Center(
          child: Text(
            '${counter}',
            style: Theme.of(context).textTheme.display1,
          ),
        );
      }
    }
    
    class WidgetB extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return Text('I am a widget that will not be rebuilt.');
      }
    }
    
    class WidgetC extends StatelessWidget { 
      final void Function() incrementCounter;
    
      WidgetC(this.incrementCounter);
    
      @override
      Widget build(BuildContext context) { 
        return RaisedButton(
          onPressed: () { 
            incrementCounter();
          },
          child: Icon(Icons.add),
        );
      }
    }

使用AndroidStudio的Flutter Performance可以看到widgetA、B、C都参与了rebuild  
![在这里插入图片描述][20200412150044902.gif]

## 使用InheritedWidget实现 ##

class TopPage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(
            child: Scaffold(
              appBar: AppBar(
                title: Text('InheritedWidget Demo'),
              ),
              body: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  WidgetA(),
                  WidgetB(),
                  WidgetC(),
                ],
              ),
            ),
          ),
        );
      }
    }
    
    class _MyInheritedWidget extends InheritedWidget { 
      _MyInheritedWidget({ 
        Key key,
        @required Widget child,
        @required this.data,
      }) : super(key: key, child: child);
    
      final HomePageState data;
    
      @override
      bool updateShouldNotify(_MyInheritedWidget oldWidget) { 
        return true;
      }
    }
    
    class HomePage extends StatefulWidget { 
      HomePage({ 
        Key key,
        this.child,
      }) : super(key: key);
    
      final Widget child;
    
      @override
      HomePageState createState() => HomePageState();
    
      static HomePageState of(BuildContext context, { bool rebuild = true}) { 
        if (rebuild) { 
          return (context.inheritFromWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
        }
        return (context.ancestorWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
        // or
        // return (context.ancestorInheritedElementForWidgetOfExactType(_MyInheritedWidget).widget as _MyInheritedWidget).data;
      }
    }
    
    class HomePageState extends State<HomePage> { 
      int counter = 0;
    
      void _incrementCounter() { 
        setState(() { 
          counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) { 
        return _MyInheritedWidget(
          data: this,
          child: widget.child,
        );
      }
    }
    
    class WidgetA extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        final HomePageState state = HomePage.of(context);
    
        return Center(
          child: Text(
            '${state.counter}',
            style: Theme.of(context).textTheme.display1,
          ),
        );
      }
    }
    
    class WidgetB extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return Text('I am a widget that will not be rebuilt.');
      }
    }
    
    class WidgetC extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        final HomePageState state = HomePage.of(context, rebuild: false);
        return RaisedButton(
          onPressed: () { 
            state._incrementCounter();
          },
          child: Icon(Icons.add),
        );
      }
    }

可以看到state变化时，widgetB、C都没有rebuild  
![在这里插入图片描述][20200412154735369.gif]

# 关键代码说明 #

--------------------

针对`InheritedWidget`版本中的关键类进行说明

## WidgetA、WidgetC ##

传统版本中WidgetA、C通过构造函数传入父级的state以及回调  
InheritedWidget版本中，可以通过如下静态方法获取

final HomePageState state = HomePage.of(context); // WidgetA
    final HomePageState state = HomePage.of(context, rebuild: false);  // WidgetC

WidgetC是一个Button需要通过state获取回调方法，但不需要跟随state变化而刷新，所以`rebuild`指定`false`

接下来详细看一下获取state的静态方法 `HomePage.of`

## HomePage ##

static HomePageState of(BuildContext context, { bool rebuild = true}) { 
        if (rebuild) { 
          return (context.inheritFromWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
        }
        return (context.ancestorWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
        // or
        // return (context.ancestorInheritedElementForWidgetOfExactType(_MyInheritedWidget).widget as _MyInheritedWidget).data;
      }

`HomePage.of`用来通过`buildContext`，找到最近的`_MyInheritedWidget`。然后就可以同\_MyInheritedWidget获取其持有的state。

获取上级Widget的几个关键方法如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">method</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">inheritFromWidgetOfExactType</td> 
   <td align="left">获取最近的给定类型的上级Widget，该widget必须是InheritedWidget的子类，并向上级widget注册传入的context，当上级widget改变时，这个context持有的widget会rebuild以便从该widget获得新的值。这就是child向InheritedWidget注册的方法。</td> 
  </tr> 
  <tr> 
   <td align="left">inheritFromWidgetOfExactType</td> 
   <td align="left">仅仅用来获取最近的给定类型的上级Widget，不会因为上级Widget的改变而rebuild</td> 
  </tr> 
  <tr> 
   <td align="left">ancestorInheritedElementForWidgetOfExactType</td> 
   <td align="left">功能与inheritFromWidgetOfExactType一样，但是只会寻找InheritedWidget的子类，所以可以以O(1)的复杂度查找上级Widget</td> 
  </tr> 
 </tbody> 
</table>

因此，widgetA随着父widget的变化而rebuild，widgetB并没有rebuild

## \_MyInheritedWidget ##

class _MyInheritedWidget extends InheritedWidget { 
      _MyInheritedWidget({ 
        Key key,
        @required Widget child,
        @required this.data,
      }) : super(key: key, child: child);
    
      final HomePageState data;
    
      @override
      bool updateShouldNotify(_MyInheritedWidget oldWidget) { 
        return true;
      }
    }

继承自InheritedWidget，所以子Widget可以通过`inheritFromWidgetOfExactType`获取。

`updateShouldNotify`控制是否需要子widget感受其变化，如果返回true，则通过`inheritFromWidgetOfExactType`注册的子widget跟随其变化rebuild

子widget最终目的是要获取共享的父级state，所以这里通过data属性持有了state。

那再来看一下这个`HomePageState`

## HomePageState ##

@override
      Widget build(BuildContext context) { 
        return _MyInheritedWidget(
          data: this,
          child: widget.child,
        );
      }

此处`_MyInheritedWidget`的使用是关键。

传统写法中，build中直接创建widgetA、B、C并返回，因此每当state变化时，会重新创建子widget并rebuild；

`InheritedWidget`版本中，`HomePage`保持父widget（`TopPage`）的children，当state变化时widgetA、B、C不会重建，而是重新传入给`_MyInheritedWidget`，重建的只有`_MyInheritedWidget`

## TopPage ##

class TopPage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        ・・・
              body: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[　
                  WidgetA(), // 子widget的创建移动到这里
                  WidgetB(),
                  WidgetC(),
                ],
              ),
        ・・・
      }
    }

根据上文的说明，为了避免子widget的反复创建和rebuild，将widgetA、B、C的实例化移动到这里

# InheritedModel #

--------------------

上面的例子中我们通过自定义了rebuild参数来指定子Widget是否参与rebuild，实际上也可以使用`InheritedModel`完成此需求

`InheritedModel`继承自InheritedWidget，可以通过字符串key（`aspect`）来指定特定子widget进行rebuild。

简单看一下InheritedModel版本与InheritedWidget版本在实现上的不同

@override
       HomePageState createState() => HomePageState();
    
       static HomePageState of(BuildContext context, String aspect) { 
         return InheritedModel.inheritFrom<_MyInheritedWidget>(context, aspect: aspect).data;
       }
     }

使用 `InheritedModel.inheritFrom`获取widget

class _MyInheritedWidget extends InheritedModel { 
    
       @override
       bool updateShouldNotifyDependent(_MyInheritedWidget old, Set aspects) { 
         return aspects.contains('A'); // 当aspect包晗“A”时，通知其rebuild
       }
     }

继承`InheritedModel`，重写`updateShouldNotifyDependent`

class WidgetA extends StatelessWidget { 
       @override
       Widget build(BuildContext context) { 
         final HomePageState state = HomePage.of(context, 'A'); // 注册aspect为“A“

class WidgetC extends StatelessWidget { 
       @override
       Widget build(BuildContext context) { 
        final HomePageState state = HomePage.of(context, 'C'); // 注册aspect为“C”

如上，因为注册的key(aspect)不同，只有widgetA会受到rebuild的通知

# 更局部的刷新 #

--------------------

如果widgetA是下面这样，我们希望能进一步控制其子widget的局部刷新

class WidgetA extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        final HomePageState state = HomePage.of(context);
    
        return Column(
          children: <Widget>[
            Center(
              child: Text(
                '${state.counter}',
                style: Theme.of(context).textTheme.display1,
              ),
            ),
            Text("AAAAA"), // 此处不需rebuild
          ],
        );
      }
    }

如果彻底理解了`BuildContext`和`InheritedWidget`的注册机制，是可以很容易实现的：

return Column(
          children: <Widget>[
            Center(
              child: Builder(builder: (context){ 
                final HomePageState state = HomePage.of(context);
                return Text(
                  '${state.counter}',
                  style: Theme.of(context).textTheme.display1,
                );
              }),
            ),
            Text("AAAAA"),
          ],
        );

通过Builder来创建一个匿名类widget，然后将`HomePage.of`移到其内部。此时`InheritedWidget`中注册的context不再是widgetA而是这个匿名类widget，因此可以实现widgetA的局部刷新

# 不使用InheritedWidget #

--------------------

我想通过上文的介绍大家应该能够想到，如果子widget仅仅想访问父级state（不通过构造函数传参的方式），但没有监听其变化的需要，可以不使用`InheritedWidget`：

class TopPage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Demo'),
            ),
            body: HomePage(),
          ),
        );
      }
    }
    
    class HomePage extends StatefulWidget { 
      HomePageState state; // 持有state供子类获取
    
      @override
      HomePageState createState() { 
        state = HomePageState();
        return state;
      }
    }
    
    class HomePageState extends State<HomePage> { 
      int counter = 0; // 去掉private
    
      void incrementCounter() {  // 去掉private
        setState(() { 
          counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              WidgetA(),
              WidgetB(),
              WidgetC(),
            ],
          ),
        );
      }
    }
    
    class WidgetA extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        final HomePage widget = context.ancestorWidgetOfExactType(HomePage); // 获取state
        final HomePageState state = widget?.state;
    
        return Center(
          child: Text(
            '${state == null ? 0 : state.counter}',
            style: Theme.of(context).textTheme.display1,
          ),
        );
      }
    }
    
    class WidgetB extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return Text('I am a widget that will not be rebuilt.');
      }
    }
    
    class WidgetC extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        final HomePage widget = context.ancestorWidgetOfExactType(HomePage);
        final HomePageState state = widget?.state;
    
        return RaisedButton(
          onPressed: () { 
            state?.incrementCounter();
          },
          child: Icon(Icons.add),
        );
      }
    }

通过`ancestorWidgetOfExactType`寻找指定类型的widget，然后获取其state使用，当然这个遍历是O(n)的，性能比InheritedWidget版本要差

# 最后 #

--------------------

Flutter中很多组件都是基于InheritedWidget实现的，例如`Scoped Model`、`BLoC(Business Logic of component)`等，想要掌握这些高级特性的使用先从了解InheritedWidget开始吧

代码：  
[https://github.com/vitaviva/flutter\_inherited\_widget\_sample/tree/master/flutter\_inherited\_widget][https_github.com_vitaviva_flutter_inherited_widget_sample_tree_master_flutter_inherited_widget]

[2020041200082113.png]: /images/20230528/143b09e1eece47bc853e381e70514d73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20230528/963f4cda3a3746868e20fc140110760f.png
[20200412150044902.gif]: /images/20230528/4fbd0313918b4af69f34aefd4f781753.png
[20200412154735369.gif]: /images/20230528/2ae53d996f8d49029e098f44add89a05.png
[https_github.com_vitaviva_flutter_inherited_widget_sample_tree_master_flutter_inherited_widget]: https://github.com/vitaviva/flutter_inherited_widget_sample/tree/master/flutter_inherited_widget