flutter数据传递组件InheritedModel/Inhe

InheritedModel是一个功能性的基础组件，功能非常强大，可以做到##数据从父节点到子孙节点跨层级间传递##, 即如下图展示的传递：

inherited_widget.png

衍生出来的几个状态管理的工具，基本都是通过它来实现的。今天避免写的过于复杂，仅仅展示一下它最基础的用法，见微知著。方便我们更高效的开发，更深入的学习。

首先，看一下InheritedModel最简单的定义示例：

import 'package:flutter/material.dart';

class InheritedColor extends InheritedModel {
  final Color firstColor; 
  InheritedColor({this.firstColor, Widget child}): super(child: child);

  @override
  bool updateShouldNotify(InheritedColor oldWidget) {
    return true;
  }
  
  @override
  bool updateShouldNotifyDependent(InheritedColor oldWidget, Set dependencies) {
    return true;
  }
}

这个firstColor是自定义的，可以是任何属性。

接下来是##main.dart##文件的改动, 重点就是build方法下的：InheritedColor在最外层包裹（wrapper）。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return InheritedColor(
      firstColor: Colors.red,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      )
    );
  }
}

在任意页面都可以获取到InheritedColor里的firstColor属性，及使用##context.dependOnInheritedWidgetOfExactType<InheritedColor>().firstColo##r获取到的，示例如下：

import 'package:flutter/material.dart';
import 'package:week_widget/InheritedWidgets/InheritedColor.dart';

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

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

class _InheritedWidgetsScreenState extends State<InheritedWidgetsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(title: Text('InheritedWidgetsScreen')),
       body: Container(
         alignment: Alignment.center,
         child: Text(
           'demo',
           style: TextStyle(
             color: context.dependOnInheritedWidgetOfExactType<InheritedColor>().firstColor
           ),
         ),
       ),
    );
  }
}

效果图如下：

inherited_widget_screen.jpg

以上就完成了最简单的InheritedModel的使用。虽然用法简单，但是确实功能强大，也为开发强大的状态管理工具提供根本的支持。
常用的全局主题（theme）就是基于InheritedModel实现的，我们日常调用的#Theme.of(context).primaryColor#这种方法，我们增加一个静态方法，InheritedColor实现也是可以做到的。
InheritedColor修改后的代码是：

import 'package:flutter/material.dart';

class InheritedColor extends InheritedModel {
  final Color firstColor;

  InheritedColor({this.firstColor, Widget child}): super(child: child);

  @override
  bool updateShouldNotify(InheritedColor oldWidget) {
    return true;
  }
  
  @override
  bool updateShouldNotifyDependent(InheritedColor oldWidget, Set dependencies) {
    return true;
  }

  static InheritedColor of(BuildContext context)=> context.dependOnInheritedWidgetOfExactType<InheritedColor>(); //即添加这一个静态方法实现的
}

在InheritedWidgetsScreen实现中，就可以把 #context.dependOnInheritedWidgetOfExactType<InheritedColor>().firstColor#替换成#InheritedColor.of(context).firstColor#获取到对应的值了。

InheritedModel作为一个功能性的组件，对于理解状态管理非常重要，这一篇文章展示不再做延伸。稍晚一点，会陆续更新状态管理的文章。

InheritedModel继承自InheritedWidget，这篇文章只涉及基础用法，InheritedModel和InheritedWidget的使用几乎是一样的。稍晚一点会写一篇文章说一下InheritedModel的特殊用法。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。