首页 > 其他分享 >flutter中InheritedWidget共享数据

flutter中InheritedWidget共享数据

时间:2024-01-10 18:23:14浏览次数:39  
标签:Widget const context counter InheritedWidget key child 共享 flutter

InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制。它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget。子Widget可以通过InheritedWidget来获取共享的数据,而不需要通过显式地将数据传递给它们。

import 'package:flutter/material.dart';

class MyKey extends StatelessWidget {
  const MyKey({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue, // 添加背景颜色
          title: const Text("这是导航栏2"),
        ),
        body: MyApp());
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义数据
  int counter = 0;

  // 定义方法,用于改变数据
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      // 将数据和方法传递给 InheritedWidget
      counter: counter,
      incrementCounter: incrementCounter,
      child: const MaterialApp(
        home: Scaffold(
          body: Column(
            children: [
              Expanded(flex: 1, child: MyAPP1()),
              Expanded(flex: 1, child: MyApp2()),
            ],
          ),
        ),
      ),
    );
  }
}

class MyInheritedWidget extends InheritedWidget {
  // 定义数据和方法
  final int counter;
  final VoidCallback incrementCounter;

  MyInheritedWidget({
    Key? key,
    required Widget child,
    required this.counter,
    required this.incrementCounter,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    // 如果数据发生变化,则通知子孙节点更新
    return counter != oldWidget.counter;
  }

  // 手动获取 InheritedWidget 的实例对象
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}

class MyAPP1 extends StatelessWidget {
  const MyAPP1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用 of 方法获取 InheritedWidget 的实例对象
    final counter = MyInheritedWidget.of(context)?.counter ?? 0;

    return Center(
      child: Container(
        color: Colors.red,
        height: double.infinity,
        width: double.infinity,
        child: Text(
          "red,当前值为:$counter", // 显示数据
          style: const TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
    );
  }
}

class MyApp2 extends StatelessWidget {
  const MyApp2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用 of 方法获取 InheritedWidget 的实例对象和方法
    final counter = MyInheritedWidget.of(context)?.counter ?? 0;
    final incrementCounter =
        MyInheritedWidget.of(context)?.incrementCounter ?? () {};

    return Center(
      child: Container(
        color: Colors.yellow,
        height: double.infinity,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "yellow,当前值为:$counter", // 显示数据
              style: const TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: incrementCounter, // 调用方法
              child: const Text("按钮改变值"),
            ),
          ],
        ),
      ),
    );
  }
}

 

标签:Widget,const,context,counter,InheritedWidget,key,child,共享,flutter
From: https://www.cnblogs.com/xbinbin/p/17957068

相关文章

  • Flutter web的创建
    Thispagecoversthefollowingstepsforgettingstartedwithwebsupport:本页介绍了开始使用Web支持的以下步骤:Configurethe flutter toolforwebsupport.配置'flutter'工具以获得Web支持。Createanewprojectwithwebsupport.创建一个具有Web支持的新项目......
  • 将ChatGPT引入企业财务共享服务的探讨与思考
    以ChatGPT为代表AIGC技术的兴起,引发了新一轮的财务变革热潮,对财务共享服务的影响也是迅速深远的。本文通过从底层技术及服务能力、应用场景、应用挑战等三个维度来探讨与思考如何将ChatGPT引入企业财务共享服务,阐述ChatGPT背后的底层技术为财务共享服务注入语境情感分析能力、数......
  • 28、Flutter Key详解
    在Flutter中,Key是不能重复使用的,所以Key一般用来做唯一标识。组件在更新的时候,其状态的保存主要是通过判断组件的类型或者key值是否一致。因此,当各组件的类型不同的时候,类型已经足够用来区分不同的组件了,此时我们可以不必使用key。但是如果同时存在多个同一类型的控件的时候,此......
  • flutter TextFormField
    TextFormField(maxLength:20,controller:controller.shippernameController,decoration:InputDecoration(counterText:'',//计数器的显示border:InputBorder.none,fillColor:Colors.white,filled:true,is......
  • 分享苹果共享证书 - 持续更新中...
     声明:所有苹果共享证书均来自网络整理共享日期:2024-01-09共享证书:ANBANGINSURANCELTD.下载地址:https://www.sharesign.cn/cert.html 共享日期:2024-01-07共享证书:VIETNAMPOSTSANDTELECOMMUNICATIONSGROUP-HOCHIMINHCITYTELECOMBRANCH下载地址:https://www.......
  • flutter MaterialApp介绍
    MaterialApp 是Flutter中常用的一个widget,它是构建基于 MaterialDesign 风格应用的根组件,主要负责各种全局状态的管理以及定义应用程序的主题样式等。voidmain(){runApp(MaterialApp(title:"flutterAPP___test",theme:ThemeData(primarySw......
  • 基于web的资源共享平台的共享与开发
    现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本资源共享平台就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到事半功倍的......
  • 百度网盘(百度云)SVIP超级会员共享账号每日更新(2024.01.05)
    一、百度网盘SVIP超级会员共享账号可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答。我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免了U盘的物理载体,直接在网上就实现文件传输。百度网盘SVIP会员可以让自己百度账......
  • 亮相2023农村金融科技创新与共享发展会议,浪潮信息打造智慧金融“云底座”
    近日,农信银资金清算中心组织举办了主题为“筑基赋能笃行致远”的2023农村金融科技创新与共享发展会议。浪潮信息受邀出席,云计算产品线副总经理刘健发表演讲。2023农村金融科技创新与共享发展会议刘健表示,在市场竞争、客户期望、政策驱动、技术进步等多重因素的驱动下,金融机构数字......
  • 手撕Vuex-模块化共享数据上
    前言好,经过上一篇的介绍,实现了Vuex当中的actions方法,接下来我们来实现Vuex当中的模块化共享数据(modules)。modules方法用于模块化共享数据,那么什么叫模块化共享数据呢?其实非常简单。过去我们将所有模块的数据都放到state中共享,例如:我们有三个模块首页/个人中心/登录......