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

2021-12-30 16:31:24 浏览数 (1)

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

一、前言

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

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

二、未引入时

  • 下面我们以系统自带的模版为例，逐步引入 InheritedWidget
  • 当 new flutter project 时，会自动生成如下模版
代码语言：javascript复制
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
代码语言：javascript复制
class EnvConfig {
  int count;
}
3.2 封装 InheritedWidget
  • 在新建一个类，并让其继承与 InheritedWidget
  • 他的作用是将页面与数据类绑定
代码语言：javascript复制
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
代码语言：javascript复制
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 用于包装，方便管理
代码语言：javascript复制
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 回调
代码语言：javascript复制
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 修改为：
代码语言：javascript复制
void main() {
  runApp(ConfigWrapper(
      config: EnvConfig(),
      child: MyApp())
  );
}
  • 运行一下，这时我们在点击增加按钮
  • 可以看到只有数量的 Text 和悬浮按钮发生了更新

三、总结

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

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

网站 编程算法 flutter ios android

0 人点赞