Flutter InheritedWidget #

一、InheritedWidget基础 #

1.1 什么是InheritedWidget #

InheritedWidget是Flutter中数据向下传递的高效机制，可以让子Widget树中的任何Widget访问祖先Widget的数据。

1.2 基本用法 #

dart

class MyInheritedWidget extends InheritedWidget {
  final int count;
  final VoidCallback increment;
  
  MyInheritedWidget({
    required this.count,
    required this.increment,
    required Widget child,
  }) : super(child: child);
  
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
  
  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return count != oldWidget.count;
  }
}

二、完整示例 #

2.1 计数器示例 #

dart

class CounterInherited extends InheritedWidget {
  final int count;
  final VoidCallback increment;
  
  CounterInherited({
    required this.count,
    required this.increment,
    required Widget child,
  }) : super(child: child);
  
  static CounterInherited? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterInherited>();
  }
  
  @override
  bool updateShouldNotify(CounterInherited oldWidget) {
    return count != oldWidget.count;
  }
}

class CounterProvider extends StatefulWidget {
  final Widget child;
  
  const CounterProvider({required this.child});
  
  @override
  State<CounterProvider> createState() => _CounterProviderState();
}

class _CounterProviderState extends State<CounterProvider> {
  int _count = 0;
  
  void _increment() {
    setState(() {
      _count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return CounterInherited(
      count: _count,
      increment: _increment,
      child: widget.child,
    );
  }
}

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = CounterInherited.of(context);
    return Text('Count: ${counter?.count ?? 0}');
  }
}

class IncrementButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = CounterInherited.of(context);
    return ElevatedButton(
      onPressed: counter?.increment,
      child: Text('Increment'),
    );
  }
}

三、总结 #

3.1 核心要点 #

要点	说明
InheritedWidget	数据向下传递
of方法	获取数据
updateShouldNotify	判断是否更新

3.2 下一步 #

让我们学习 Provider！