美文网首页Flutter
Flutter中InheritedWidget的使用

Flutter中InheritedWidget的使用

作者: 刘铁崧 | 来源:发表于2020-12-08 13:16 被阅读0次

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

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

  • 父widget使用InheritedWidget包装
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;
  }
}
  • 子widget
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()
            ],
          ),
        ),
      ),
    );
  }
}

相关文章

网友评论

    本文标题:Flutter中InheritedWidget的使用

    本文链接:https://www.haomeiwen.com/subject/nsbfgktx.html