微信交流群

InheritedModelInheritedWidget 的子类,是对 InheritedWidget 组件功能的扩展,InheritedWidget 组件根据 updateShouldNotify 方法的返回决定是否通知子组件,如果需要共享的数据有多个,比如有 nameage,有两个子组件,一个依赖 name,一个依赖 age,如果使用 InheritedWidget 组件,任何一个数据发生变化,这两个组件都会被通知更新。

关于 InheritedWidget 组件的使用及原理分析可以参考此文:

我们希望共享数据中 name 属性发生变化时,只通知依赖 name 的组件,而依赖 age 的组件不被通知,InheritedModel 组件就是解决此类场景的。

InheritedModel 的用法,自定义InheritedModel组件:

class MyInheritedModel extends InheritedModel<String> {
  static String aspectName = 'aspect_name';
  static String aspectAge = 'aspect_age';

  String name;
  int age;

  MyInheritedModel({this.name, this.age, Widget child}) : super(child: child);

  static MyInheritedModel of(BuildContext context, String aspect) {
    return InheritedModel.inheritFrom<MyInheritedModel>(context,
        aspect: aspect);
  }

  
  bool updateShouldNotify(covariant MyInheritedModel oldWidget) {
    return name != oldWidget.name || age != oldWidget.age;
  }

  
  bool updateShouldNotifyDependent(
      covariant MyInheritedModel oldWidget, Set<String> dependencies) {
    return (name != oldWidget.name && dependencies.contains(aspectName)) ||
        (age != oldWidget.age && dependencies.contains(aspectAge));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

updateShouldNotifyupdateShouldNotifyDependent 共同决定是否通知更新。

获取共享数据与 InheritedWidget 组件不同,使用如下方法:InheritedModel.inheritFrom(context, aspect: aspect) ,其中 aspect 表示注册哪一个属性。

定义两个组件,NameWidgetAgeWidget

class NameWidget extends StatefulWidget {
  
  _NameWidgetState createState() => _NameWidgetState();
}

class _NameWidgetState extends State<NameWidget> {
  
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('NameWidget didChangeDependencies ');
  }

  
  Widget build(BuildContext context) {
    return Text(
        'name:${MyInheritedModel.of(context, MyInheritedModel.aspectName).name}');
  }
}

class AgeWidget extends StatefulWidget {
  
  _AgeWidgetState createState() => _AgeWidgetState();
}

class _AgeWidgetState extends State<AgeWidget> {
  
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('AgeWidget didChangeDependencies ');
  }

  
  Widget build(BuildContext context) {
    return Text(
        'age:${MyInheritedModel.of(context, MyInheritedModel.aspectAge).age}');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

使用:

class InheritedModelDemo extends StatefulWidget {
  
  _InheritedModelDemoState createState() => _InheritedModelDemoState();
}

class _InheritedModelDemoState extends State<InheritedModelDemo> {
  int _nameIndex = 0;
  int _age = 0;

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InheritedModel'),
      ),
      body: MyInheritedModel(
        name: '老孟_$_nameIndex',
        age: _age,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              NameWidget(),
              AgeWidget(),
              RaisedButton(
                child: Text('修改name'),
                onPressed: () {
                  setState(() {
                    _nameIndex++;
                  });
                },
              ),
              RaisedButton(
                child: Text('修改age'),
                onPressed: () {
                  setState(() {
                    _age++;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

点击 修改name 时日志打印:

flutter: NameWidget didChangeDependencies
1

点击 修改age 时日志打印:

flutter: AgeWidget didChangeDependencies
1

说明单独修改某个属性,只会通知其依赖的组件。