Flutter-InheritedWidget

InheritedWidget

  • flutter中用于数据共享的组件。
  • 创建自定义类，继承 InheritedWidget ，用这个自定义类的组件实例包裹子组件，使得子组件及其后代都可以访问自定义类实例中的共享数据。

自定义类

使用 inh 简写快速生成自定义类并继承数据共享组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class WaitingData extends InheritedWidget {
  final String name; //自定义共享数据，需要final前缀
  const WaitingData({
    Key? key,
    required Widget child,
    required this.name
  }) : super(key: key, child: child);

  static WaitingData of(BuildContext context) {//静态方法，简化了获取共享数据的方式。不用这种就用下面这行复杂方式
    final WaitingData? result = context.dependOnInheritedWidgetOfExactType<WaitingData>();
    assert(result != null, 'No WaitingData found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(WaitingData old) {//指明什么时候重新渲染组件
    return true;//true则当数据改变的时候，每次都重新渲染。可以写箭头函数来指明条件。
  }
}

自定义类实例的使用

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
class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {

  @override
  Widget build(BuildContext context) {
    return  WaitingData(
        name: "Kahvia!",
        child: Builder(//用Builder才能获取到上下文
            builder: (BuildContext centerContext){//这个上下文的内容包括Builder（）外面的东西，即包含了name
              return Center(
                child: Text(
                    "Hello,${WaitingData.of(centerContext).name}",//如果用的的context，那context上下文中则没有name，会报错
                    style: const TextStyle(
                      fontSize: 25,
                      color: Colors.blue
                    ),
                ),
              );
            }
        )
    );
  }
}

注意事项

  • 明确上下文（context），想要获取共享数据，就需要使用共享数据组件的子组件的上下文
  • 获取上下文可以用Builder（）