flutter开发实战-父子Widget组件调用方法

news2024/11/15 11:16:36

flutter开发实战-父子Widget组件调用方法

在最近开发中遇到了需要父组件调用子组件方法,子组件调用父组件的方法。这里记录一下方案。

在这里插入图片描述

一、使用GlobalKey

父组件使用globalKey.currentState调用子组件具体方法,子组件通过方法回调callback方法调用父组件的方法。
例如示例中的

例如父组件

父组件使用globalKey.currentState调用子组件方法
globalKey.currentState?.subFunction(arg);


class FatherOutContainer extends StatefulWidget {
  const FatherOutContainer({super.key});

  @override
  State<FatherOutContainer> createState() => _FatherOutContainerState();
}

class _FatherOutContainerState extends State<FatherOutContainer> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是父组件方法
  void fatherFunction(String param) {
    print("这里是父组件方法 params:${param}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375,
      height: 600,
      color: Colors.amber,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20,
            height: 100,
          ),
          SubChild(
            key: globalKey,
            onPressedCallback: (param) {
              fatherFunction(param);
            },
          ),
          SizedBox(
            width: 20,
            height: 40,
          ),
          TextButton(
            child: Text("点击调用子组件方法"),
            onPressed: () {
              String arg = "来自父组件的参数";
              globalKey.currentState?.subFunction(arg);
            },
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}


子组件代码

子组件通过方法回调onPressedCallback方法调用父组件的方法。
onPressedCallback: (param) {
fatherFunction(param);
},


GlobalKey<_SubChildState> globalKey = GlobalKey();

// 子组件Widget
class SubChild extends StatefulWidget {
  const SubChild({
    super.key,
    required this.onPressedCallback,
  });

  final Function(String param) onPressedCallback;

  @override
  State<SubChild> createState() => _SubChildState();
}

class _SubChildState extends State<SubChild> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是子组件方法
  void subFunction(String arg) {
    print("这里是子组件方法 arg:${arg}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.greenAccent,
      child: Container(
        width: 200,
        height: 50,
        child: TextButton(
          child: Text("点击调用父组件方法", style: TextStyle(
            color: Colors.brown
          ),),
          onPressed: () {
            onSubBtnPressed();
          },
        ),
      )
    );
  }

  // 点击调用父组件方法
  void onSubBtnPressed() {
    print("点击调用父组件方法");
    String param = "来自子组件的参数";
    widget.onPressedCallback(param);
  }
}


二、使用Controller,中间控制器

2.1、定义Controller,这里定义中间的方法调用的类


// 使用Controller类来调用方法
class MethodController {
  // 用此方法调用子组件方法
  Function(String arg)? dealSubFunction;

  // 用此方法调用父组件方法
  Function(String arg)? dealFatherFunction;
}


2.2、父组件代码

父组件通过定义methodController.dealFatherFunction,子组件可以调用该方法进行调用父组件的方法

// 定义
methodController.dealFatherFunction = (String arg) {
      // 调用父组件方法
      fatherFunction(arg);
    };


父组件完整代码

class FatherOutContainer extends StatefulWidget {
  const FatherOutContainer({super.key});

  @override
  State<FatherOutContainer> createState() => _FatherOutContainerState();
}

class _FatherOutContainerState extends State<FatherOutContainer> {
  final MethodController methodController = MethodController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    methodController.dealFatherFunction = (String arg) {
      // 调用父组件方法
      fatherFunction(arg);
    };
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是父组件方法
  void fatherFunction(String param) {
    print("这里是父组件方法 params:${param}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375,
      height: 600,
      color: Colors.amber,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20,
            height: 100,
          ),
          SubChild(
            methodController: methodController,
          ),
          SizedBox(
            width: 20,
            height: 40,
          ),
          TextButton(
            child: Text("点击调用子组件方法"),
            onPressed: () {
              String arg = "来自父组件的参数";
              if (methodController.dealSubFunction != null) {
                methodController.dealSubFunction!(arg);
              }
            },
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}

2.3、子组件

子组件通过定义methodController.dealSubFunction,父组件可以调用该方法进行调用子组件的方法

// 定义
widget.methodController.dealSubFunction = (String arg) {
      // 调用子方法
      subFunction(arg);
    };


子组件完整代码

// 子组件Widget
class SubChild extends StatefulWidget {
  const SubChild({
    super.key,
    required this.methodController,
  });

  final MethodController methodController;

  @override
  State<SubChild> createState() => _SubChildState();
}

class _SubChildState extends State<SubChild> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    widget.methodController.dealSubFunction = (String arg) {
      // 调用子方法
      subFunction(arg);
    };
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是子组件方法
  void subFunction(String arg) {
    print("这里是子组件方法 arg:${arg}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        height: 300,
        color: Colors.greenAccent,
        child: Container(
          width: 200,
          height: 50,
          child: TextButton(
            child: Text(
              "点击调用父组件方法",
              style: TextStyle(color: Colors.brown),
            ),
            onPressed: () {
              onSubBtnPressed();
            },
          ),
        ));
  }

  // 点击调用父组件方法
  void onSubBtnPressed() {
    print("点击调用父组件方法");
    String param = "来自子组件的参数";
    if (widget.methodController.dealFatherFunction != null) {
      widget.methodController.dealFatherFunction!(param);
    }
  }
}


三、小结

flutter开发实战-父子Widget组件调用方法。这里使用的Globalkey调用子组件方法,通过子组件的方法回调调用父组件的方法。还可以通过Controller类来控制方法调用父子组件对应方法。父子组件方法调用的方式还可以通过事件通知等方法实现调用。

学习记录,每天不停进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/797254.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

U盘里的资料丢失怎么恢复,分享两种有效解决方法

平常我们在用u盘拉文件的时候&#xff0c;有时候会突然发现&#xff0c;本来好好的文件就无缘无故丢失了&#xff0c;这是因为什么情况呢&#xff1f;一般来说&#xff0c;出现这种问题&#xff0c;可能是因为u盘文件被格式化&#xff0c;或者u盘存储损坏了。但是呢&#xff0c…

一键式三分钟轻松打造线上展厅

导语&#xff1a; 在数字时代&#xff0c;线上展厅已成为企业展示品牌和产品的重要方式。随着虚拟现实&#xff08;VR&#xff09;技术的发展&#xff0c;蛙色VR平台成为众多企业选择的首选&#xff0c;因其独特的优势和特点&#xff0c;让线上展厅的打造变得轻松、高效且令人…

使用C#基于ComPDFKit SDK快速构建PDF阅读器

在当今世界&#xff0c;Windows 应用程序对我们的工作至关重要。随着处理 PDF 文档的需求不断增加&#xff0c;将 ComPDFKit PDF 查看和编辑功能集成到您的 Windows 应用程序或系统中&#xff0c;可以极大地为您的用户带来美妙的体验。 在本博客中&#xff0c;我们将首先探索集…

JGIT获取远程仓库、本地仓库提交版本号

https://www.freesion.com/article/50181381474/ JGIT获取远程仓库、本地仓库提交版本号 一、环境搭建二、项目结构二、代码部分 GitUtils.javaGitInfoAtom.java三、运行结果&#xff1a;总结 一、环境搭建 Maven依赖导入 <dependency><groupId>org.eclipse.jg…

进入linux系统中修改网段-ip

第一步 &#xff1a;开启虚拟机 cd 到 /etc/sysconfig/network-scripts 目录下&#xff0c;输入命令给ls,展示这个目录下文件和文件夹 第二步&#xff1a;进入到以ifcfg开头的文件 # ifcfg开头的文件&#xff0c;如果有多个网卡&#xff0c;有多个ifcfg-ensxx文件 命令…

【从零开始学爬虫】采集全国各行业经销商网点数据

l 采集网站 【场景描述】采集全国各行业经销商网点数据&#xff0c;以建材行业为例。 【源网站介绍】买购网MAIGOO.COM建材家居频道&#xff0c;专门提供地面材料、墙顶饰材、洁具五金、门窗楼梯、水电电工、外墙材料、照明灯饰、家纺布艺、家具定制等行业&#xff0c;最新品…

LeetCode.189(轮转数组)

对于轮转数组这个题&#xff0c;文章一共提供三种思路&#xff0c;对于每种思路均提供其对应代码的时间、空间复杂度。 目录 1. 创建变量来保存最后一个数&#xff0c;并将其余数组向前挪动一位 &#xff1a; 1.1 原理解析&#xff1a; 1.2 代码实现&#xff1a; 2.创建一个…

【学习笔记】行为识别SOTA方法比较

这里写目录标题 前言方法1 基于CNN的方法Slow-fast&#xff1a; 2 基于Vision-Transformer的方法Video TimeSformer :Video Swin Transformer : 3、基于自监督的方法VideoMAE&#xff1a; 4、基于多模态的方法Intern video: 前言 常用行为识别数据集包括&#xff1a;HMDB-51、…

TL-ER3220G设置vlan

TL-ER3220G是企业宽带路由器。 自带5个RJ45接口。 其中接口1到接口4都可以接入宽带线路。最多可以并接4路。 本例由接口1接入宽带&#xff0c;默认接口2到接口4组成1个vlan&#xff0c;名称vlan。其中接口5特殊&#xff0c;带宽最大100M。 计划将接口2和接口4组成第一个vlan&…

STM32使用HAL库BH1750光照度传感器

开发环境 单片机&#xff1a;STM32F103C8T6 光照度传感器&#xff1a;BH1750 IDE&#xff1a;KEILSTM32CUBEMX 单片机配置 1、STM32CUBEMX BH1750代码 1、头文件 /* ************************************************* BH1750光照数据计算&#xff08;LUX&#xff09; …

H5和小程序测试点分析

最近接触了较多关于H5页面的测试&#xff0c;H5页面的测试除了业务逻辑功能测试外&#xff0c;其他部分的测试方法基本是可以通用的&#xff0c;在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。 H5优势&#xff1a; 1.H5可以跨平台&#xff0c;开发成本相对较低…

中共湖南麒麟信安科技股份有限公司委员会召开庆祝建党102 周年暨“七一”表彰大会

为隆重庆祝中国共产党成立 102 周年&#xff0c;6月30日下午&#xff0c;中共湖南麒麟信安科技股份有限公司委员会召开庆祝建党102 周年暨“七一”表彰大会。麒麟信安党委书记王忠锋出席会议&#xff0c;党委副书记李广辉主持会议&#xff0c;全体党委委员、各支部委员、受表彰…

Gitlab 合并分支与请求合并

合并分支 方式一&#xff1a;图形界面 使用 GitGUI&#xff0c;右键菜单“GitExt Browse” - 菜单“命令” - 合并分支 方式二&#xff1a;命令行 在项目根目录下打开控制台&#xff0c;注意是本地 dev 与远程 master 的合并 // 1.查看本地分支&#xff0c;确认当前分支是否…

Elasticsearch-增删改查数据工作原理

集群 集群的基本概念&#xff1a; 集群&#xff1a;ES 集群由一个或多个 Elasticsearch 节点组成&#xff0c;每个节点配置相同的 cluster.name 即可加入集群&#xff0c;默认值为 “elasticsearch”。节点&#xff1a;一个 Elasticsearch 服务启动实例就是一个节点&#xff…

伦敦银定盘价机制的改变

一直以来&#xff0c;伦敦都是全球最大的现货白银定价中心&#xff0c;LBMA也是全球金银市场中最具有影响力的机构组织&#xff0c;其定盘价一直是世界各白银市场基准价的主要参考标准&#xff0c;被广泛应用于生产厂商、消费者和金融机构之间的交易结算&#xff0c;也是众多白…

刷题DAY 11

题目一 给定一个整型数组arr&#xff0c;和一个整数num某个arr中的子数组sub&#xff0c;如果想达标&#xff0c;必须满足&#xff1a;sub中最大值-sub中最小值<num&#xff0c;返回arr中达标子数组的数量 滑动窗口法,滑动窗口有两个行为1.右括 2.左缩 错误想法1: 当你已经…

工频耐压测试仪的使用方法

一、凯迪正大工频耐压试验装置使用方法 1、核对试验变压器&#xff0c;测量绕阻额定输出电压&#xff0c;使之与操作箱&#xff08;台&#xff09;相吻合。 2、按接线示意图接好试验变压器与操作箱&#xff08;台&#xff09;及感应调压器之间的联线。 3、接通电源&#xff0c;…

索引能优化查询,那么谈谈索引的优点和缺点?索引原理

面试必备&#xff1a;索引能优化查询&#xff0c;那么谈谈索引的优点和缺点?索引原理 简述&#xff1a; 优点: 第一&#xff0c;通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。 第二&#xff0c;可以大大加快数据的检索速度&#xff0c;这也是创建…

工程设计施工3D模型素材下载,全套1000+免费获取

在建筑设计和施工过程中&#xff0c;3D模型数据是至关重要的。设计师和工程师需要依赖高质量的3D模型数据进行方案优化、细节设计、施工规划和质量控制。因此&#xff0c;如何下载高质量的3D模型数据成为了一个重要的问题。 今天给大家免费提供一个“设计、施工3D模型数据下载…

推荐几个不错的免费配色工具网站

1. Paletton专业的配色套件,提供色轮理论及调色功能。可查看配色预览效果。 网站:http://paletton.com 2. Colormind一个基于机器学习的智能配色工具。可以一键生成配色方案。 网站:http://colormind.io 3. Adobe ColorAdobe官方的配色工具,可以从图片中取色,也可以随机生成配色…