Flutter 数据传递
创始人
2024-05-27 06:23:05
0

在应用开发过程中数据传递,flutter提供 InheritedWidget 以及多种 provider, 各有差异从从使用习惯上面 这边主要介绍以下两种:

  • InheritedWidget
  • provider   (ChangeNotifier)

 InheritedWidget:

提供一种 从上而下 的数据提供 (而且子节点需要  Widget 包裹); 且单向切记只能由上而下的刷新数据;不能做到 子节点  变数据 而刷新的情况!常用于 静态数据的存储;不会改变的常量保存; 或者子节点只作为 静态展示的数据,父节点提供元数据。子节点展示数据 不参与动态更新交互

 

效果如下:

脚本结构:

 inherited_datum.dart

import 'package:flutter/cupertino.dart';class InheritedDatum extends InheritedWidget {final int count;const InheritedDatum({Key? key, required child, required this.count}): super(key: key, child: child);static InheritedDatum? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType();}///**子组件不能 通过调用该方法 实现子组件刷新updateCount(int count) {count = count;}@overridebool updateShouldNotify(covariant InheritedDatum oldWidget) {// TODO: implement updateShouldNotifyreturn oldWidget.count != count;}
}

widget_child0.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';import 'inherited_datum.dart';class WidgetChild0 extends StatelessWidget {const WidgetChild0({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(color: Colors.blue,height: 40,width: 80,child: Center(child: Text('${InheritedDatum.of(context)?.count}',style: TextStyle(color: Colors.white),),),);}
}

widget_child1.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';import 'inherited_datum.dart';class WidgetChild1 extends StatelessWidget {const WidgetChild1({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(color: Colors.blue,height: 40,width: 80,child: Center(child: Text('${InheritedDatum.of(context)?.count}',style: TextStyle(color: Colors.white),),),);}
}

入口:main.dart

@override
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(child: InheritedDatum(count: _counter,child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,// children: const [],children: const [WidgetChild0(), WidgetChild1()],),),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);
}

InheritedWidget   使用注意细节:

1. 必须是 子组件平行的都不行:

2. 子组件获取 InheritedWidget 中的数据 通过:

InheritedDatum.of(context)?.count

3. 子组件不能仅 通过调用 InheritedWidget 中的方便实现 子组件刷新

小结

        InheritedWidget 的适用场景:子组件共享 父组件中的数据;但不具备 修改更新 父组件中数据的 能力!下面介绍的 ChangeNotifier 则具备 上下 更新数据的能力

provider    数据传递

provider是基于InheritedWidget 的包装 ;为了在Provider中进行数据共享首先我们需要为其定义一个数据模型,为了能够订阅数据的状态通常会让这个数据模型来继承 ChangeNotifier,达到更新的目的; 使用前先导入provider: ^6.0.5

dependencies:flutter:sdk: flutterprovider: ^6.0.5

之前的总结: https://johns.blog.csdn.net/article/details/122139508

需要在父节点中使用以下 组件来完成 子组件的更新:按照自己 更新逻辑的 复杂度。按照实际需要选取适合的 模型

  • ChangeNotifierProvider
  • ProxyProvider
  • MultiProvider
  • Consumer

效果如下:

父组件 和 子组件都可以 实现对数据的更新

 

脚本结构:

counter.dart

import 'package:flutter/cupertino.dart';class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}void set(int count) {_count = count;notifyListeners();}
}

 widget_child0.dart

import 'package:untitled1/counter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';class WidgetChild0 extends StatelessWidget {const WidgetChild0({Key? key}) : super(key: key);Widget build(BuildContext context) {return Container(color: Colors.blue,height: 40,width: 80,child: GestureDetector(behavior: HitTestBehavior.opaque,onTap: () {context.read().set(0);print('WidgetChild0');},child: Center(child: Text('${context.watch().count}',style: TextStyle(color: Colors.white),),),),);}
}

widget_child1.dart

import 'package:untitled1/counter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';class WidgetChild1 extends StatelessWidget {const WidgetChild1({Key? key}) : super(key: key);Widget build(BuildContext context) {return Container(color: Colors.blue,height: 40,width: 80,child: GestureDetector(behavior: HitTestBehavior.opaque,onTap: () {context.read().set(1);print('WidgetChild1');},child: Center(child: Text('${context.watch().count}',style: TextStyle(color: Colors.white),),),),);}
}

main.dart

class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: ChangeNotifierProvider(create: (_) => Counter(),child: const MyHomePage(title: 'Flutter Demo Home Page'),),//home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
  Widget build(BuildContext context) {return Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,// children: const [],children: const [WidgetChild0(), WidgetChild1()],),),floatingActionButton: FloatingActionButton(onPressed: () {context.read().increment();},tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}

provide   使用注意细节:

也是共享的数据需要放在 父节点中; 再共有的父节点中 都可以对 数据进行修改更新; 实现双向动态数据: 调用

notifyListeners

其中 MultiProvider,Consumer 适合多组 ChangeNotifier ;以实现解耦操作;基本用法和ChangeNotifierProvider 相同;详细可参考:https://johns.blog.csdn.net/article/details/122139508https://johns.blog.csdn.net/article/details/122139508

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...