「 flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用

圆号本昊

发布于 2021-12-30 16:31:24

6050

发布于 2021-12-30 16:31:24

文章被收录于专栏：github@hornhuanggithub@hornhuang

「 flutter 必知必会」贴心解析：状态管理与数据共享 InheritedWidget 完整使用方案，为你铺平大前端学习之路

一、前言

由于Flutter采用节点树的方式组织页面，以致于一个普通页面的节点层级会很深。此时，我们如果还是一层层传递数据，当需要修改数据时，就会比较麻烦。《Flutter 实战》中讲到：InheritedWidget 是 Flutter 中非常重要的一个功能型组件，它提供了一种数据在 widget 树中从上到下传递、共享的方式比如我们在应用的根 widget 中通过 InheritedWidget共享了一个数据，那么我们便可以在任意子 widget 中来获取该共享的数据！这个特性在一些需要在 widget 树中共享数据的场景中非常方便！如Flutter SDK 中正是通过 InheritedWidget 来共享应用主题（Theme）和 Locale(当前语言环境)信息的。

那么废话不多说，我们直接开始介绍 InheritedWidget 的使用

二、未引入时

下面我们以系统自带的模版为例，逐步引入 InheritedWidget
当 new flutter project 时，会自动生成如下模版

void main() {
  runApp(MyApp());
}

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

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 _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这时我们点击增加按钮，可以看见所有子控件都被刷新

但页面上其实子需要刷新数字控件（数字增加）和按钮（阴影变色）
所有控件均刷新，烂费了大量内存，这不符合我们的预期
现在我们引入 InheritedWidget 对这段代码进行改造看看效果

三、使用 InheritedWidget

下面我们针对上述 flutter 模版进行改造
使其达到点击增加时，只刷新数字 Text和 FloatingButton 的效果

3.1 享的数据封装

我们现将需要共享的数据（这里是点击数）分装成一个类，比如 EnvConfig

class EnvConfig {
  int count;
}

3.2 封装 InheritedWidget

在新建一个类，并让其继承与 InheritedWidget
他的作用是将页面与数据类绑定

class _InheritedWidget extends InheritedWidget {
  _InheritedWidget({
    Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);

  final _ConfigWrapperState data;

  @override
  bool updateShouldNotify(_InheritedWidget oldWidget) {
    return true;
  }
}

由于数据更新时，需要刷新页面，所以我们在 InheritedWidget 外在包一层 StatefulWidget

class ConfigWrapper extends StatefulWidget {

  final EnvConfig config;

  final Widget child;

  ConfigWrapper({Key key, this.config, this.child});

  @override
  State<StatefulWidget> createState() => _ConfigWrapperState();

  static _ConfigWrapperState of(BuildContext context) {
    final _InheritedWidget inheritedConfig =
    context.dependOnInheritedWidgetOfExactType<_InheritedWidget>();
    return inheritedConfig.data;
  }
}

class _ConfigWrapperState extends State<ConfigWrapper> {

  void incrementCounter() {
    setState(() {
      widget.config.count++;
    });
  }

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

在创建类 ConfigWrapper 用于包装，方便管理

class ConfigWrapper extends StatelessWidget {
  ConfigWrapper({Key key, this.config, this.child});

  @override
  Widget build(BuildContext context) {
    return new _InheritedWidget(data: this.config, child: this.child);
  }

  static EnvConfig of(BuildContext context) {
    final _InheritedWidget inheritedConfig =
    context.dependOnInheritedWidgetOfExactType<_InheritedWidget>();
    return inheritedConfig.data;
  }

  final EnvConfig config;

  final Widget child;
}

3.3 修改 HomePage

将原先的 app 入口 MyApp/MyHomePage 独立出来
使用共享数据通过 ConfigWrapper.of(context)... 方法
修改数据/刷新页面可通过 ConfigWrapper.of(context).incrementCounter 回调

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _TitleText(),
            _CountText()
          ],
        ),
      ),
      floatingActionButton: _FloatBtn()
    );
  }
}

class _TitleText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'You have pushed the button this many times:',
    );
  }
}

class _CountText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '${ConfigWrapper.of(context).widget.config.count}',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

class _FloatBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: ConfigWrapper.of(context).incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ); // This trailing comma makes auto-formatting nicer for build methods.
  }
}

3.4 最后

将原先的入口 main 修改为：

void main() {
  runApp(ConfigWrapper(
      config: EnvConfig(),
      child: MyApp())
  );
}

运行一下，这时我们在点击增加按钮
可以看到只有数量的 Text 和悬浮按钮发生了更新

三、总结

以上属于 InheritedWidget 的较复杂使用，如果不需要刷新数据会容易更多
如果文中有不足之处，也欢迎大家评论区补充，我会更改进原文里
那么，感谢大家的点赞加关注支持，我们下期再见

如果对 InheritedWidget 还有疑问的可以参考： 1、InheritedWidget使用说明 2、数据共享（InheritedWidget）

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-03-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

「 flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用

「 flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用

一、前言

二、未引入时

三、使用 InheritedWidget

3.1 享的数据封装

3.2 封装 InheritedWidget

3.3 修改 HomePage

3.4 最后

三、总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

「 flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用

「 flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用

一、前言

二、未引入时

三、使用 InheritedWidget

3.1 享的数据封装

3.2 封装 InheritedWidget

3.3 修改 HomePage

3.4 最后

三、总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

「 flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用

「 flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用