Flutter:InheritedWidget数据共享

news/2024/11/17 2:50:36 标签: flutter, android, javascript

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

下边代码中,创建了一个按钮,当点击时_count++
并将数据通过Test1(count)传递给Test2(count),最终传递给Test3(count)进行渲染展示。

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数据共享,优化下上边代码

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());
  }
}


http://www.niftyadmin.cn/n/5754830.html

相关文章

CICD持续集成与持续交付

一 CICD是什么 CI/CD 是指持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09; 1.1 持续集成&#xff08;Continuous Integration&#xff09; 持续集成…

【Redis_Day4】内部编码和单线程模型

【Redis_Day4】内部编码和单线程模型 五大数据类型内部编码object encoding key1&#xff1a;查询key1对应值的内部编码 redis中的单线程模型 redis中的数据都是以键值对的方式存的&#xff0c;redis内部用哈希表组织这些键值对。 五大数据类型 站在用户角度&#xff0c; 在一…

后端总指挥---文件接口

为了方便编写项目时前后端的连接&#xff0c;在这里引进文件接口的概念&#xff0c;通常包含以下几个部分&#xff1a; 功能请求路径请求方式传输的数据类型请求入参数据样本响应的出参响应成功后的数据样本 这样前端编程与后端编程 可以根据文件接口这个文档来分别编写前后端&…

go-bindata

go bindata 在项目中引用了静态资源时&#xff0c;项目打包后&#xff0c;需要保证包与静态资源的相对目录不变。bindata可以将静态资源生成.go文件&#xff0c;在打包时会嵌入到包中&#xff0c;非常好用。 安装 需要让bindata下载到GOPATH/bin目录下&#xff0c;在项目外执…

Centos 9 安装 PostgreSQL 16 并支持远程访问

仅列出核心操作&#xff0c;可以解决使用过程中遇到的访问问题。 1 安装 使用dnf源安装 sudo dnf module -y install postgresql:16 2 配置文件夹权限 使用root权限操作 sudo chown postgres:postgres /var/lib/pgsql/datasudo chmod -R 0750 /var/lib/pgsql/data 3 初…

计算机网络WebSocket——针对实习面试

目录 计算机网络WebSocket什么是WebSocket&#xff1f;WebScoket和HTTP协议的区别是什么?说明WebSocket的优势和使用场景&#xff1f;说明WebSocket的建立连接的过程&#xff1f; 计算机网络WebSocket 什么是WebSocket&#xff1f; WebSocket是一个网络通信协议&#xff0c;提…

微搭低代码入门05循环

目录 1 for 循环2 while 循环3 do...while 循环4 break 语句5 循环展示组件总结 在编程中&#xff0c;循环是一种非常强大的控制结构&#xff0c;它允许我们重复执行一段代码直到满足某个条件为止。在微搭中&#xff0c;我们一般用循环来处理我们数据库返回的结果。 在微搭中&a…

外网访问 WebDav 服务

从外部网络环境&#xff08;比如异地和家中网络&#xff09;来访问公司内网的 WebDav 服务&#xff08;基于 IIS &#xff09;并映射成本地虚拟磁盘。 步骤如下 第一步 在公司内网的电脑上设置 webDav。 1&#xff0c;找到【控制面板】&#xff0c;双击进入。 2&#xff0c…