Flutter InheritedWidget 共享状态管理

InheritedWidget和React中的context功能类似,可以实现跨组件数据的传递。
定义一个共享数据的InheritedWidget,需要继承自InheritedWidget

  • 这里定义了一个of方法,该方法通过context开始去查找祖先的HYDataWidget(可以查看源码查找过程)
  • updateShouldNotify方法是对比新旧HYDataWidget,是否需要对更新相关依赖的Widget
// 数据共享
class DataWidget extends InheritedWidget {
    
    
// 1、共享的数据
  final int counter;
// 2、定义构造方法
  const DataWidget({
    
    super.key, required this.counter, required Widget child})
      : super(child: child);
// 3、获取组件最近的当前InheritedWidget
  static DataWidget? of(BuildContext context) {
    
    
  // 沿着Element树,去找最近的CounterElement,从Element中取出Widget对象
    return context.dependOnInheritedWidgetOfExactType();
  }

// 4、 决定要不要回调State中的didChangeDependencies 方法
  
  bool updateShouldNotify(covariant DataWidget oldWidget) {
    
    
    // 如果返回true:执行依赖当前的InheritedWidget的state中的  didChangeDependencies
    return counter != oldWidget.counter;
  }
}

使用定义的 DataWidget 共享数据

class _MyHomePageState extends State<MyHomePage> {
    
    
  HomeRequest homeRequest = HomeRequest();

  int data = 100; // 定义一个共享数据变量
  
  void initState() {
    
    
    super.initState();
    Logs("_MyHomePageState", StackTrace.current);
    homeRequest.getMovieTopList(0, 20).then((value) {
    
    });
  }

  
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      // 脚手架
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: DataWidget( // 需要在共享数据组件的父类上继承DataWidget
          counter: data, // 将数据传递给共享数据 counter
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                HYShowData01(),
                HYShowData02(),
              ],
            ),
          )
      ),
      // 定义一个 按钮点击自动增加数据
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
    
    
          setState(() {
    
    
            data++;
          });
        },
      ),
    );
  }
}

class HYShowData01 extends StatelessWidget {
    
    
  
  Widget build(BuildContext context) {
    
    
    int? _counter = DataWidget.of(context)?.counter; // 使用共享数据
    return Container(
      color: Colors.red,
      child: Text("共享状态:${
      
      _counter}"),
    );
  }
}

class HYShowData02 extends StatefulWidget {
    
    
  
  State<HYShowData02> createState() => _HYShowData02State();
}

class _HYShowData02State extends State<HYShowData02> {
    
    

  
  void didChangeDependencies() {
    
    
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  
  Widget build(BuildContext context) {
    
    
    int? _counter = DataWidget.of(context)?.counter;
    return Container(
      color: Colors.blue,
      child: Text("共享状态:${
      
      _counter}"),
    );
  }
}

猜你喜欢

转载自blog.csdn.net/tongwei117/article/details/132035611