Flutter

Flutter中InheritedWidget的使用

2020-12-08  本文已影响0人  刘铁崧

通常情况下,子widget无法单独感知父widget的变化,当父state变化时,通过其build重建所有子widget;

InheritedWidget可以避免这种全局创建,实现局部的子widget更新:
子widget通过BuildContext.inheritFromWidgetOfExactType从buildContext中获取并监听指定类型的父InheritedWidget,并跟随其重建而rebuild

class FatherWidget extends InheritedWidget {
  final int number;
  const FatherWidget({this.number,
    Key key,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);

  static FatherWidget of(BuildContext context) {
    //沿element树找到最近的FatherWidget
    return context.dependOnInheritedWidgetOfExactType<FatherWidget>();
  }

  @override
  bool updateShouldNotify(FatherWidget old) {
//如果为true时会刷新调用子类ChildOnedidChangeDependencies方法
    return old.number != number;
  }
}
class ChildOne extends StatefulWidget {
  @override
  _ChildOneState createState() => _ChildOneState();
}
class _ChildOneState extends State<ChildOne> {
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    print("ChildOnedidChangeDependencies");
  }
  @override
  Widget build(BuildContext context) {
    int number = FatherWidget
        .of(context)
        .number;
    return Container(
      child: Text("$number"),
    );
  }
}
class ChildTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int number = FatherWidget.of(context).number;
    return Container(
      child: Text("$number"),
    );
  }
}
class TestHome extends StatefulWidget {
  @override
  _TestHomeState createState() => _TestHomeState();
}
class _TestHomeState extends State<TestHome> {
  int _number = 100;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试State"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          setState(() {
            _number++;
          });
        },
      ),
      body: Center(
        child: FatherWidget(
          number: _number,
          child: Column(
            children: [
              ChildOne(),
              ChildTwo()
            ],
          ),
        ),
      ),
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读