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());
  }
}
相关推荐
前端 贾公子7 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆11 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山20 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45329 分钟前
css模块化以及rem布局
前端·javascript·css
移动开发者1号41 分钟前
Android 同步屏障(SyncBarrier)深度解析与应用实战
android·kotlin
移动开发者1号44 分钟前
深入协程调试:协程调试工具与实战
android·kotlin
雨白9 小时前
Jetpack系列(三):Room数据库——从增删改查到数据库平滑升级
android·android jetpack
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水10 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html