flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)

如果我们有这样一个应用场景:

WidgetA执行点击之后将数据通过widgetB传递到其下的widgetC。

通常可以通过设置构造函数,传递对应参数到制定的widget树中,如下面代码所描述:

表示需要将widgetA中的点击改变内容传递到widgetB中的widgetC中展示;

需要通过设置widgetB的构造函数,接收对应参数,再传递给widgetC展示;

class Inheritedwidget extends StatefulWidget {
 @override
 _InheritedWidgetState createState() => _InheritedWidgetState();
}
class _InheritedWidgetState extends State<Inheritedwidget> {
 int count=0;
 @override
 void initState() {
  // TODO: implement initState
  super.initState();
 }
 @override
 Widget build(BuildContext context) {
  print(count);
  return Scaffold(
   appBar: AppBar(title: Text("inherited widget"),),body: Container(
   child: Center(
    child: Column(
     children: <Widget>[
      Text("class0"),
      class1(count),
     ],
    ),
   ),
  ),
   floatingActionButton: FloatingActionButton(onPressed: (){
    return addCount();
   },child: Text("add"),),
  );
 }
 void addCount() {
  setState(() {
   count=1+count;
  });
 }
}

WidgetB:

class class1 extends StatelessWidget {
 int count;
 class1(this.count);
 @override
 Widget build(BuildContext context) {
  return Container(
   child: Column(
     children: <Widget>[
      Text("class1"),
      class2(count),
     ],
   ),
  );
 }
}

widgetC:

class class2 extends StatelessWidget {
 int count;
 class2(this.count);

 @override
 Widget build(BuildContext context) {
  return Container(
   child: Center(
    child: Text("$count"),
   ),
  );
 }
}

以上方法当然可以实现需要的效果,但是当有多层的widget嵌套关系的时候代码阅读性降低,可以通过以下方法传递值到指定的widget中;

通过类似于Android中的contentProvider提供一个中间类,将需要传递的数据通过中间类传递到制定的widget中。

中间类:

//countProvider类 提供count属性和child属性 用于与原widget相关联,
class CountProvider extends InheritedWidget{
 final int count;
 final Widget child;
 //构造方法
 CountProvider({this.count, this.child}):super(child:child);
 //提供方法获取到countprovider类对象
static CountProvider of(BuildContext context){
 return context.inheritFromWidgetOfExactType(CountProvider);
}
 @override
 bool updateShouldNotify(InheritedWidget oldWidget) {
  // TODO: implement updateShouldNotify
  return false;
 }
}

通过counterprovider包裹需要展示的widget并传入需要改变的值;

class Inheritedwidget extends StatefulWidget {
 @override
 _InheritedWidgetState createState() => _InheritedWidgetState();
}
class _InheritedWidgetState extends State<Inheritedwidget> {
 int count=0;
 @override
 Widget build(BuildContext context) {
  print(count);
  return CountProvider(
   count:count,
   child: Scaffold(
    backgroundColor: Colors.blue,
    appBar: AppBar(title: Text("inherited widget"),),body: Container(
    child: Center(
     child: Column(
      children: <Widget>[
       Text("class0"),
       class1(),
      ],
     ),
    ),
   ),
    floatingActionButton: FloatingActionButton(onPressed: (){
     return addCount();
    },child: Text("add"),),
   ),
  );
 }
 void addCount() {
  setState(() {
   count=1+count;
  });
 }
}

使用中间类提供的数据执行更新对应widget。

class class2 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  int count = CountProvider.of(context).count;
  return Container(
   child: Center(
    child: Text("$count"),
   ),
  );
 }
}

通过以上方法即可在不同widget中传递需要改变的值。

总结

以上所述是小编给大家介绍的flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • Flutter中获取屏幕及Widget的宽高示例代码

    前言 我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们有两种方法来获取 widget 的宽高. MediaQuery 一般情况下,我们会使用如下方式去获取 widget 的宽高: final size =MediaQuery.of(context).size; final width =size.width; final height =size.height; 但是如果不注意,这种写法很容易报错,例如下面的写法就会报错: impor

  • Flutter开发之Widget自定义总结

    前言 在Flutter实际开发中,大家可能会遇到flutter框架中提供的widget达不到我们想要的效果,这时就需要我们去自定义widget,从Flutter构建.布局.绘制三部曲中我们了解到,实际的测量.布局.绘制操作都在RenderObject中,我们是可以进行继承相关的RenderObject来实现自定义的.但是其实flutter框架在设计之初就给我们预留出了自定义的入口,方便我们进行自定义. CustomPaint自定义绘制 例:圆形进度条 思路:使用CustomPaint绘制需要的效

  • flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)

    如果我们有这样一个应用场景: WidgetA执行点击之后将数据通过widgetB传递到其下的widgetC. 通常可以通过设置构造函数,传递对应参数到制定的widget树中,如下面代码所描述: 表示需要将widgetA中的点击改变内容传递到widgetB中的widgetC中展示: 需要通过设置widgetB的构造函数,接收对应参数,再传递给widgetC展示: class Inheritedwidget extends StatefulWidget { @override _InheritedW

  • Python实现计算圆周率π的值到任意位的方法示例

    本文实例讲述了Python实现计算圆周率π的值到任意位的方法.分享给大家供大家参考,具体如下: 一.需求分析 输入想要计算到小数点后的位数,计算圆周率π的值. 二.算法:马青公式 π/4=4arctan1/5-arctan1/239 这个公式由英国天文学教授约翰·马青于1706年发现.他利用这个公式计算到了100位的圆周率.马青公式每计算一项可以得到1.4位的十进制精度.因为它的计算过程中被乘数和被除数都不大于长整数,所以可以很容易地在计算机上编程实现. 三.python语言编写出求圆周率到任意

  • 使用Java的方式模拟Flutter的Widget实现多层括号嵌套

    我已经研究Flutter很长时间了.我就想既然Flutter用的Dart语言,而且括号又是嵌套多层,很多人都表示不是很理解,也不是很喜欢那么多层括号嵌套.其实完全不用担心,既然选择了它,就要接受它,当然是选择原谅它.废话少说,其实Java也是可以实现类似的语法的,下面带领大家作死的尝试一下使用Java模拟Flutter的Widget,欢迎各类开发人员前来观战. Flutter最重要的是 Widget ,首先我们来写一个类 Widget ,然后有一个 build 函数.如下所示: Tips: (我

  • 微信小程序实现给嵌套template模板传递数据的方式总结

    本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use

  • python使用参数对嵌套字典进行取值的方法

    因一些特殊需求需要以参数的形式获取字典中特定的值,网上搜了一下并没有特别好的实现(并没有太认真去找~),所以自己实现了一个,以供大家参考:) . 话不多说,直接上代码: def dict_get(dic, locators, default=None): ''' :param dic: 输入需要在其中取值的原始字典 <dict> :param locators: 输入取值定位器, 如:['result', 'msg', '-1', 'status'] <list> :param d

  • 详解vue嵌套路由-params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]

  • 详解vue嵌套路由-query传递参数

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo

  • vue使用refs获取嵌套组件中的值过程

    目录 使用refs获取嵌套组件的值 vue使用ref的好处 使用refs获取嵌套组件的值 功能简介: 1.父组件包含zujian1,而zujian1又包含zujian2 2.zujian2绑定一个输入参数 <input ref="query" v-model="query" @keypress="doSearch"/> 3.父组件获得输入框中的值,通过this.$refs.组件名来获取dom元素,多层嵌套,要调多次 // 记录输入框的

  • C++获取文件哈希值(hash)和获取torrent(bt种子)磁力链接哈希值

    复制代码 代码如下: // CHash.h : header file #pragma once#include "sha1.h" #define        SIZE_OF_BUFFER         16000 class CHash{// Constructionpublic:    CString SHA1Hash(CString strHashFile);}; 复制代码 代码如下: // CHash.cpp : implementation file//#include

  • Golang Copier入门到入坑探究

    目录 正文 安装 快速入门 入坑 再探坑出坑 再盘一盘坑 结语 正文 github: https://github.com/jinzhu/copier 由于 golang 没有对复杂结构体的 clone 方法,所以,就需要有 copier 这样的工具库. 它看起来很简单,但实际使用中,有些“坑”还是要注意! 本文: 入门为辅,探“坑”为主, 看完再划走,CS我没有. 安装 go get github.com/jinzhu/copier 快速入门 好的,来一段代码快速了解 copier packa

随机推荐