Flutter 父子组件通信

news2024/9/26 1:26:46

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

父组件

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<LoadPencilState> loadPencilKey = GlobalKey<LoadPencilState>();
  // 动画状态
  bool isRun = false;
  @override
  Widget 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});

  @override
  State<StatefulWidget> createState() => LoadPencilState();
}

class LoadPencilState extends State<LoadPencil>
    with SingleTickerProviderStateMixin {
  // 定义动画控制器对象
  late AnimationController _controller;
  // 定义一个动画对象
  late Animation _animation;
  double _size = 0;

  @override
  void 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();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    //释放动画
    _controller.dispose();
  }

  @override
  Widget 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.coloradmin.cn/o/1243415.html

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

相关文章

千梦网创:创业,一场游戏一场梦

创业这件事就好比一场养成类游戏&#xff0c;而我们自己就是游戏主角。 这个游戏有一个特殊之处在于&#xff1a;SSS级装备有穿戴等级设定&#xff0c;就算你氪重金买到了一把神器&#xff0c;自身阅历不够也根本无法发挥它的强大威力而只能当个装饰。 这就要求我们真正沉浸在…

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

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

每日汇评:黄金测试2000美元水平遭到拒绝,为下跌留下了空间

黄金在心理关键的2000美元水平失去了上升动力&#xff1b; 美元指数上涨持续&#xff0c;同时国债收益率反弹&#xff0c;都对黄金价格的上涨构成压力&#xff1b; 美国即将迎来感恩节假期&#xff0c;意味着明天和周五流动性较低&#xff1b; 黄金价格继续在每盎司2000美元以上…

Android二维码扫描开源库 - BGAQRCode-Android

目录 ● 功能介绍 ● 常见问题 ● 效果图与示例 apk ● Gradle 依赖 ● 布局文件 ● 自定义属性说明 ● 接口说明 ● 下载源码 功能介绍 根据之前公司的产品需求&#xff0c;参考 barcodescanner 改的&#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…

DDoS攻击和CC攻击有什么不同之处?

DDoS是针对服务器IP发起&#xff0c;CC攻击针对的是业务端口。DDoS攻击打的是网站的服务器&#xff0c;而CC攻击是针对网站的页面攻击&#xff0c;用术语来说就是&#xff0c;一个是WEB网络层拒绝服务攻击&#xff08;DDoS&#xff09;&#xff0c;一个是WEB应用层拒绝服务攻击…

C语言从入门到实战——数组和指针的强化练习题

数组和指针的强化练习题 前言1. sizeof和strlen的对比1.1 sizeof1.2 strlen1.3 sizeof和strlen的对⽐ 2. 数组和指针笔试题解析2.1 一维数组2.2 字符数组2.3 二维数组 3. 指针运算笔试题解析3.1 题目1&#xff1a;3.2 题目23.3 题目33.4 题目43.5 题目53.6 题目63.7 题目7 前言…

玩具礼品经营配送小程序商城作用是什么

玩具礼品所覆盖的需求人群年龄阶层非常广&#xff0c;尤其是孩子们乃至年轻人比较喜欢的&#xff0c;也因此无论线下还是线上都不缺各种店铺&#xff0c;传统商家主要以自然流量和线上开广告、一堆图文等方式分享获得生意。 然而如今随着互联网电商冲击&#xff0c;线下店铺流…

【数据结构】一题带你出师链表!

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 题目链接 138. 随机链表的复制https://leetcode.cn/problems/copy-list-with-random-pointer/ 题目描述 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机…

PowerDesigner异构数据库转换

主要流程:sql->pdm->cdm->other pdm->sql 1.根据sql生成pdm 2.根据pdm生成cdm 3.生成其他类型数据库pdm

4.3 实时阴影

一、基于图像的阴影技术&#xff08;Shadow Map&#xff09; 什么是阴影 当来自光源的至少一个点在空间中被遮挡时&#xff0c;就产生了阴影区域。 阴影的前提 直接光照不透明物体 阴影的实现方式 阴影体&#xff08;Shadow Volumes&#xff09;——空间中黑暗部分的几何…

【办公常识_1】写好的代码如何上传?使用svn commit

首先找到对应的目录 找到文件之后点击SVN Commit

1688API如何获取商品详情信息(关键词搜索商品列表),1688API接口开发系列

1688商品详情接口是指1688平台提供的API接口&#xff0c;用于获取商品详情信息。通过该接口&#xff0c;您可以获取到商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口&#xff0c;您需要先申请1688的API权限&#xff0c;并获取ac…

Harmony Ble蓝牙App(二)连接与发现服务

Ble蓝牙App&#xff08;二&#xff09;连接与发现服务 前言正文一、BlePeripheral回调二、连接和断连三、连接状态回调四、发现服务五、服务提供者六、显示服务七、源码 前言 在上一篇中我们进行扫描设备的处理&#xff0c;本文中进行连接和发现服务的数据处理&#xff0c;运行…

多线程,线程池,线程的创建,线程池的参数

文章目录 多线程-1 高并发〇、使用多线程的场景1. 为什么使用多线程 1. 线程概述1.1 线程和进程1.2 并发和并行1.3 多线程的优势1.4 程序运行原理1.5 主线程 1.6 线程的 6 种状态2. 线程的创建和启动2.1 Thread类2.2创建线程有哪几种方法2.2.1 继承**Thread**类&#xff0c;重写…

一、用户管理

一、后端数据库初始化 1.1 因为版本问题&#xff0c;始终报错&#xff0c;按照报错信息去查询解决方案&#xff0c;无法解决 灵机一动&#xff1a; 网址&#xff1a; Spring Boot 3.0 升级 实战踩坑记录 - 掘金 (juejin.cn) &#xff11;.&#xff12; 个人配置【运行成功…

1、基础入门——操作系统文件下载反弹SHELL防火墙绕过

名词解释 POC&#xff1a;验证漏洞存在的代码&#xff1b; EXP&#xff1a;利用漏洞的代码&#xff1b; payload&#xff1a;漏洞利用载荷&#xff0c; shellcode&#xff1a;漏洞代码&#xff0c; webshell&#xff1a;特指网站后门&#xff1b; 木马&#xff1a;强调控制…

注意:怎么用JMeter操作MySQL数据库?看完秒懂!

近期用JMeter做接口测试&#xff0c;遇到了一个需要用到数据数据库的场景&#xff1a;一个关于数据报告的页面&#xff0c;需要将数据库里面的数据求和或者取均值之后&#xff0c;展示出来。 如果要断言的话&#xff0c;需要连接数据库&#xff0c;通过写sql语句&#xff0c;将…

OpenLayers实战,WebGL图层如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染

专栏目录: OpenLayers实战进阶专栏目录 前言 本章主要讲解OpenLayers使用WebGL图层的情况下,如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染不同图片到地图上的功能。 为方便讲解原理,本章使用的一张图片是按照横向4等分,纵向两等分规则拼接了6个图标的合成图片…

【分布式】分布式事务及其解决方案

目录 一、分布式事务二、分布式事务的解决方案1. 全局事务&#xff08;1&#xff09;DTP模型&#xff08;2&#xff09; 两阶段提交协议&#xff08;2PC&#xff09;原理二阶段提交的缺点 &#xff08;3&#xff09;三阶段提交协议&#xff08;3PC&#xff09;原理 2. 基于可靠…