Flutter：InheritedWidget数据共享

未使用数据共享时，要传递数据，只能组件间一级一级向下传递

下边代码中，创建了一个按钮，当点击时_count++，

并将数据通过Test1(count)传递给Test2(count)，最终传递给Test3(count)进行渲染展示。

js 复制代码

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Test1(_count),
        ElevatedButton(onPressed: (){
          _count++;
          setState(() {});
        }, child: Text('我是按钮'))
      ],
    )
  }
}

class Test1 extends StatelessWidget {
  final int count;
  Test1(this.count);
  @override
  Widget build(BuildContext context) {
    return Test2(count);
  }
}


class Test2 extends StatelessWidget {
  final int count;
  Test2(this.count);
  @override
  Widget build(BuildContext context) {
    return Test3(count);
  }
}

class Test3 extends StatefulWidget {
  final int count;
  Test3(this.count);
  @override
  State<Test3> createState() => _Test3State();
}

class _Test3State extends State<Test3> {

  @override
  Widget build(BuildContext context) {
    return Text(widget.count.toString());
  }
}

InheritedWidget数据共享，优化下上边代码

js 复制代码

import 'package:flutter/material.dart';

// 声明MyData类 继承 InheritedWidget
class MyData extends InheritedWidget{
  // 在子组件中需要共享的数据
  final int data;
  // 构造方法
  const MyData({required this.data, child}):super(child: child);
  // 对外提供方法，方便在子组件中获取共享的数据
  static MyData? of(BuildContext context){
    return context.dependOnInheritedWidgetOfExactType<MyData>();
  }
  // 该回调决定当前data发生变化的时候，是否通知子组件依赖data的Widget：子组件中只有使用了MyData.of(context)!.data 的才会产生依赖关系
  @override
  bool updateShouldNotify(covariant MyData oldWidget) {
    // 如果旧的data不等于新的data，返回true，子组件依赖data的Widget（就看子组件build中是否使用了MyData.of(context)!.data）：就会触发生命周期：didChangeDependencies
    // 如果return false; 则不会触发：didChangeDependencies
    return oldWidget.data != data;
  }
}

class Demo extends StatefulWidget {
  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    // MyData在Widget树中必须是根，MyData里边的数据才能产生共享
    return MyData(data: _count,child: Column(
      children: [
        SizedBox(height: 100,),
        Test1(_count),
        ElevatedButton(onPressed: (){
          _count++;
          setState(() {});
        }, child: Text('我是按钮'))
      ],
    ),);
  }
}

class Test1 extends StatelessWidget {
  final int count;
  Test1(this.count);
  @override
  Widget build(BuildContext context) {
    return Test2(count);
  }
}


class Test2 extends StatelessWidget {
  final int count;
  Test2(this.count);
  @override
  Widget build(BuildContext context) {
    return Test3(count);
  }
}

class Test3 extends StatefulWidget {
  final int count;
  Test3(this.count);
  @override
  State<Test3> createState() => _Test3State();
}

class _Test3State extends State<Test3> {

  @override
  void didChangeDependencies() {
    // 如果有很多逻辑依赖这个数据，可以在这里进行保存
    print('didChangeDependencies：调用了');
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    // return Text(widget.count.toString());
    print('当数据发生变化，build重新渲染');
    return Text(MyData.of(context)!.data.toString());
  }
}