Flutter 父子组件通信

在Flutter 中父组件调用子组件的方法可以通过GlobalKey实现,而子组件调用父组件方法可以通过回调函数实现。

父组件

class _MyHomePageState extends State<MyHomePage> {final GlobalKey<LoadPencilState> loadPencilKey = GlobalKey<LoadPencilState>();// 动画状态bool isRun = false;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: SizedBox(width: 350,child: Column(children: [LoadPencil(backgroundColor: Colors.blue,key: loadPencilKey,changeState: (state) {setState(() {isRun = state;});},),ElevatedButton(onPressed: () {if (isRun == true) {loadPencilKey.currentState?.stop();} else {loadPencilKey.currentState?.start();}},child: isRun == true ? const Text("停止") : const Text("开始")),],),));}
}

子组件

import 'package:flutter/material.dart';class LoadPencil extends StatefulWidget {final Color backgroundColor;final Function(bool state) changeState;const LoadPencil({super.key, required this.backgroundColor, required this.changeState});@overrideState<StatefulWidget> createState() => LoadPencilState();
}class LoadPencilState extends State<LoadPencil>with SingleTickerProviderStateMixin {// 定义动画控制器对象late AnimationController _controller;// 定义一个动画对象late Animation _animation;double _size = 0;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: const Duration(seconds: 2),);final Tween tween = Tween(begin: 0, end: 300);_animation = tween.animate(_controller);// 监听动画帧的变化,在每一帧中更新UI_animation.addListener(() {setState(() {_size = _animation.value.toDouble();});});//  监听动画的状态,当动画正序完成后反向执行动画_controller.addStatusListener((status) {// 动画状态status的值有:dismissed(动画停止在开始处)、forward(正向运行)、reverse(反向运行)、completed(动画停止在结束处)if (status == AnimationStatus.completed) {_controller.reverse();} else if (status == AnimationStatus.dismissed) {_controller.forward();}});}@overridevoid dispose() {super.dispose();//释放动画_controller.dispose();}@overrideWidget build(BuildContext context) {return Container(width: _size,height: 2,color: widget.backgroundColor,);}// 启动start() {_controller.forward();// 向父组件通信widget.changeState(true);}// 终止stop() {_controller.stop();// 向父组件通信widget.changeState(false);}
}

有一个需要注意的地方是,在使用GlobalKey<>设置类型时,这个类型子组件的State,而不是子组件本身

final GlobalKey<LoadPencilState> loadPencilKey = GlobalKey<LoadPencilState>();

在这里插入图片描述

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

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

相关文章

react中虚拟dom,diff,fiber - 初级了解

借鉴&#xff1a; 「React深入」一文吃透虚拟DOM和diff算法 - 掘金 (juejin.cn) 虚拟dom、fiber、渲染dom、dom-diff - 掘金 (juejin.cn) 未阅读源码&#xff0c;了解层面&#xff0c;后续可以深入了解 1.虚拟DOM ①.结构上&#xff1a;虚拟DOM比真实DOM轻很多 ②.操作上&…

主流的低代码平台有哪些?程序员应该如何与低代码相处?

本文主要阐述低代码的概念&#xff0c;介绍目前主流的低代码平台&#xff0c;总结低代码平台的典型特征、存在优势以及未来发展趋势。并站在程序员的角度&#xff0c;分析如何在已经到来的低代码战争中&#xff0c;找到自己的定位&#xff0c;一展所长。 什么是低代码&#xff…

脉冲宽度基础知识简介

脉冲宽度是指脉冲所能达到的最大值所持续的周期时间。脉冲宽度是电子领域中一个重要的概念&#xff0c;它与脉冲重复间隔和占空比等参数密切相关。 脉冲宽度通常用于电信号的测量&#xff0c;可以用来描述脉冲的形状、幅度和宽度等特性。在雷达和电源领域中&#xff0c;脉冲宽度…

Flink 替换 Logstash 解决日志收集丢失问题

在某客户日志数据迁移到火山引擎使用 ELK 生态的案例中&#xff0c;由于客户反馈之前 Logstash 经常发生数据丢失和收集性能较差的使用痛点&#xff0c;我们尝试使用 Flink 替代了传统的 Logstash 来作为日志数据解析、转换以及写入 ElasticSearch 的组件&#xff0c;得到了该客…

实现一个计算机

图片&#xff1a; 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>body {padding: 20px;font-family: Arial;}.calc-wrap {width: 300px;bor…

VL06O报表添加增强字段

业务描述 用户需要在VL06O事务代码下进行批量交货过账&#xff0c;现有的筛选条件不太适用当前公司的业务&#xff0c;需要在报表中新增三个交货单增强字段&#xff0c;方便其筛选&#xff08;选择屏幕没有加&#xff0c;用户在报表里用标准按钮功能自己筛选&#xff09; 效果…

十一 动手学深度学习v2计算机视觉 ——微调

一、网络架构 一个神经网络一般可以分成两块 特征抽取&#xff0c;将原始像素变成容易线性分割的特征。线性分类器来做分类。 二、训练 是一个目标数据集上的正常训练任务&#xff0c; 但使用更强的正则化 使用更小的学习率使用更少的数据迭代 源数据集远远复杂于目标数据集…

蓝桥杯算法双周赛心得——迷宫逃脱(dp)

大家好&#xff0c;我是晴天学长&#xff0c;dp版的来啦&#xff0c;可以是受益匪浅啊&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .迷宫逃脱 迷官逃脱[算法赛] 问题描述 在数学王国中&#xff0c;存…

便携式心电图机方案_基于MT6735平台的手持心电图机

便携式心电图机具备体积小、易携带、兼容12导模式的特点&#xff0c;通过工频滤波、基线滤波和肌电滤波等处理&#xff0c;能够获得更精准的心电图谱。该设备可以与医院信息系统(HIS)相连接&#xff0c;实现患者信息的共享。采集的心电数据可以通过无线方式发送到心电判读平台&…

企业建数仓的第一步是选择一个好用的ETL工具

当企业决定建立数据仓库&#xff08;Data Warehouse&#xff09;&#xff0c;第一步就是选择一款优秀的ETL&#xff08;Extract, Transform, Load&#xff09;工具。数据仓库是企业数据管理的核心&#xff0c;它存储、整合并管理各种数据&#xff0c;为商业决策和数据分析提供支…

PC8250(CC-CV控制)5V/8A同步降压恒流恒压软启动带EN功能只需极少外围元件

概述 PC8250是一个同步降压转换器输出电流至8A。它的设计允许操作电源电压范围从9V到42V。外部关闭功能可以通过逻辑电平来控制COMP/EN引脚下降&#xff0c;然后进入待机模式。外部补偿使反馈控制具有良好的线路和负载调节&#xff0c;外部设计灵活。PC8250在CC&#xff08;恒定…

【读懂AUTOSAR规范】PduR 缓存分配(Buffer allocation)

1. 前言 PDU路由器模块支持将I-PDU从一个源总线网关到一个或多个目标总线。与从/到本地模块的传输和接收不同,PDU路由器模块必须同时充当接收器和发射器,并且在某些情况下还提供I-PDU的缓冲。网关需求被有意地分离,以便在不需要网关的情况下高效实现PDU路由器模块。如果PDU…

华三无线控制器WX2540H配合准入做Portal认证

数据通信 - 建设篇 - 无线 第四章 华三无线控制器WX2540H配合准入做Portal认证 数据通信 - 建设篇 - 无线系列文章回顾华三无线控制器WX2540H配合准入做Portal认证前言其他配置优化参考来源系列文章回顾 第一章 华三无线控制器配置本地转发 第二章 华三无线控制器配置802.1X认…

Redis-Day1基础篇(初识Redis, Redis常见命令, Redis的Java客户端)

Redis-Day1基础篇 初识Redis认识NoSQL认识Redis安装Redis启动RedisRedis客户端 Redis命令数据结构介绍通用命令操作命令StringHashListSetSortedSet Redis的Java客户端客户端对比Jedis客户端Jedis快速入门Jedis连接池 SpringDataRedis客户端SpringDataRedis概述SpringDataRedis…

boardmix AI思维导图,一键自动生成思维导图!

在日常学习和工作中&#xff0c;我们常常需要记忆和整理大量的知识点和思维结构。 此时&#xff0c;思维导图的存在就大大方便了我们的工作。与传统的文本笔记不同&#xff0c;思维导图可以结合文字、图像、颜色等多种元素&#xff0c;帮助我们更好地整理和分析知识的关系&…

centos7上用docker部署redis

1. 下载redis镜像 docker pull redis docker images # 查看镜像是否下载成功2. 安装redis容器 2.1 先准备好配置文件redis.conf vi /data/redis/redis.conf写入配置信息&#xff0c;appendonly yes&#xff0c;如果需要给redis配置密码&#xff0c;可以写入requirepass root…

如何选择更快更稳定的存储服务器

如何选择更快更稳定的存储服务器 存储介质&#xff1a;存储服务器的主要存储介质包括固态硬盘&#xff08;SSD&#xff09;和机械硬盘&#xff08;HDD&#xff09;。相比于机械硬盘&#xff0c;固态硬盘具有更高的读写速度和更低的延迟&#xff0c;因此能够提供更快的数据传输…

python安装的记录

python setup.py install --user

(附程序)AD采集中的10种经典软件滤波程序优缺点分析

前言 本次我们学习一下AD采集的一些简单的软件滤波算法并分析优缺点 本篇博客大部分是自己收集和整理&#xff0c;如有侵权请联系我删除。 AD采样点的电压多少有点起伏波动&#xff0c;经运放放大后电压的波动如果超过ADC的分辩率&#xff0c;则显示的值会出现波动。波动如…

RTOS的任务触发底层逻辑

&#xff08;定时器用于计时和触发事件&#xff0c;任务则由调度器进行调度和执行&#xff1a;每当时钟节拍到达时&#xff0c;系统会触发一个称为 tick 中断的事件。当 tick 中断发生时&#xff0c;操作系统会在中断服务例程中执行一定的处理&#xff0c;其中包括更新任务的运…