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());
  }
}
相关推荐
袁美丽..2 分钟前
Android studio的adb和终端的adb互相抢占端口
android·adb·android studio
前端小巷子32 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
守城小轩1 小时前
Firefox Android 开发环境搭建全流程(四)
android·firefox·chrome devtools·指纹浏览器·浏览器开发
一枚前端小能手1 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖1 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
袁美丽..1 小时前
Android --- AOSP源码导入Android Studio
android·android studio
柯南二号1 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js