王学岗鸿蒙开发(北向)——————(十)子组件修改父组件的内容与 动画

news2024/11/26 5:33:07

子组件修改父组件的内容

使用类似Android的回调,父组件传递给子组件一个函数

import { MyComment } from './component/MyComment'
import { MyContent } from './component/MyComtent'
import { MyTitleComponent } from './component/MyTitleComponent'

@Entry
@Component
struct Index {
  checkLove(){
    console.log("我被执行了")
  }
  build() {
    Column(){
      //注意,不要这么写,有数据的时候会报错
      // Child({myfun:this.checkLove})
      Child({myfun:()=>{
        this.checkLove()
      }})
    }
  }
}
@Component
struct Child{
//myfun是函数名
//()=>void:表示这个函数类型
//()=>{}:表示这个函数类型的变量的默认值
  myfun: ()=>void = ()=>{}
  build(){
     Button('点我').onClick(()=>{
       this.myfun()
     })
  }
}

带参数的写法

@Entry
@Component
struct Index {
  checkLove(index:number){
    console.log(`我被执行了${index}`)
  }
  build() {
    Column(){
      //注意,不要这么写,有数据的时候会报错
      // Child({myfun:this.checkLove})
      Child({myfun:(index:number)=>{
        this.checkLove(index)
      }})
    }
  }
}
@Component
struct Child{
  myfun: (index:number)=>void = (index)=>{}
  build(){
     Button('点我').onClick(()=>{
       this.myfun(7)
     })
  }
}

动画

在这里插入图片描述
动画分为:属性动画,显示动画(本质上也是属性动画),组件转场动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

//属性动画

@Entry
@Component
struct Index {
  @State myWidth: number = 100;
  @State myHeight: number = 100;
  @State myOpacity:number = 1;

  build() {
    Column() {
      Button('点我变变变').width(this.myWidth).height(this.myHeight).opacity(this.myOpacity)
        //必须放到width和height之后,只能监听前面的属性
        .animation({duration:500})
        .onClick(()=>{
          this.myWidth = 200;
          this.myHeight = 200;
          this.myOpacity = 0;
        })
    }
  }
}

显示动画

@Entry
@Component
struct Index {
  @State myWidth: number = 100;
  @State myHeight: number = 100;
  @State myOpacity: number = 1;

  build() {
    Column() {
      Button('我变').width(this.myWidth).height(this.myHeight).opacity(this.myOpacity)
        .onClick(() => {
          animateTo(
            { duration: 1000 }, () => {
            this.myWidth = 200;
            this.myHeight = 200;
            this.myOpacity = 0;
          }
          )
        })
    }
  }
}

组件转场动画
组件出现或消失的动画效果

@Entry
@Component
struct DhPage3 {
  @State flag: boolean = true;
  @State show: string = 'show';

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          //控制按钮的显示文字
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }

          animateTo({ duration: 1000 }, () => {
            // 动画闭包内控制Image组件的出现和消失
            this.flag = !this.flag;
          })
        })

      if (this.flag) {
        // Image的出现和消失配置为不同的过渡效果
        Image($r('app.media.11')).width(200).height(200)
          //通过transition可以设置转场动画。 
          .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
          .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      }
    }.height('100%').width('100%')

  }
}

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

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

相关文章

安卓逆向经典案例——XX牛

安卓逆向经典案例——XX牛 按钮绑定方式 1.抓包 2.查看界面元素,找到控件id 通过抓包,发现点击登录后,才会出现Encrpt加密信息,所以我们通过控件找到对应id:btn_login 按钮绑定方法——第四种 public class LoginA…

把文件从一台linux机器上传到另一台linux机器上

文章目录 1,第一种情况1.1 先测试2台机器是否可以互相通信1.2 对整个文件夹里面的所有内容进行传输的命令1.3 检查结果 2,第二种情况2.1,单个文件传输的命令 1,第一种情况 我这里有2台linux机器, 机器A:19…

uni-app uni-swipe-action 滑动操作状态恢复

按照uni-app官方文档的写法 当前同一条滑动确认之后 页面列表刷新 但是滑动的状态还在 入下图所示: 我们需要在滑动确认之后 页面刷新 滑动状态恢复 那么我们就来写一下这部分的逻辑: 首先,配置一下:show"isOpened[item.id]" chan…

基于JSP的医院远程诊断系统

开头语: 你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。 开发语言: Java 数据库: MySQL 技术: JSP Servlet JSPBean 工具: IDEA/Eclipse、Navica…

ChatTTS - 用于对话场景的文本转语音

大家好,我是小麦,今天给大家分享一款免费,可用于对话场景的文本转语音工具。 阅读感悟 不知道大家在日常的学习、工作中是否有这样的一个情况,当我们阅读完一篇文章,很快就能读完,但印象不会很深&#xf…

Python学习打卡:day01

day1 笔记来源于:黑马程序员python教程,8天python从入门到精通,学python看这套就够了 1、Python 软件(PyCharm) 安装:在 Linux 环境下安装 Pycharm 插件:汉化、翻译 设置字体大小 常用快捷…

Django ListView 列表视图类

ListView是Django的通用视图之一,它用于显示一个对象列表。这个视图将所有的对象作为一个上下文变量传递给模板。 1,创建应用 python manage.py startapp app3 2,注册应用 Test/Test/settings.py Test/Test/urls.py 3,添加模型 …

车联网安全入门——CAN总线模糊测试

文章目录 车联网安全入门——CAN总线模糊测试介绍主要特点使用场景 模糊测试(Fuzz Testing)CAN 总线模糊测试(CAN Packet Fuzzing)主要步骤工具和软件主要目标 Can-Hax安装使用获得指纹模糊测试 SavvyCAN 总结参考 车联网安全入门…

深入理解 C++ 智能指针

文章目录 一、引言二、 原始指针的问题1、原始指针的问题2、智能指针如何解决这些问题 三、智能指针的类型四、std::shared_ptr1、shared_ptr使用2、shared_ptr的使用注意事项3、定制删除器4、shared_ptr的优缺点5、shared_ptr的模拟实现 五、std::unique_ptr1、unique_ptr的使…

端午节到了,祝大家粽子甜甜,生活美满!愿粉丝们心想事成,健康平安,阖家幸福!

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

java+Vue +Spring boot技术开发的UWB高精度定位技术系统源码 uwb定位系统+基站定位

javaVue Spring boot技术开发的UWB高精度定位技术系统源码 uwb定位系统基站定位 系统采用UWB高精度定位技术,可实现厘米级别定位。UWB作为一种高速率、低功耗、高容量的新兴无线局域定位技术,目前应用主要聚焦在室内高精确定位,例如在工业自动…

ABAP - SAP与企业微信集成

最近接到一个SAP直接给企业微信推送消息的需求,说实话之前一直没接触过,脑袋空空的,最终通过在百度搜索案例成功解决了,百度虽然一直被诟病,但却无法否认它的神奇。实现效果 实现思路:从需求出发&#xff0…

游戏服务器工程实践一:百万级同时在线的全区全服游戏

我应该有资格写这篇文章,因为亲手设计过可以支撑百万级同时在线的全区全服类型的游戏服务器架构。 若干年前我在某公司任职时,参与研发过一款休闲类型的游戏,由 penguin 厂独代。研发的时候,p 厂要求我们的游戏服务器要能支撑百万…

IO进程线程(十一)进程间通信 消息队列

文章目录 一、IPC(Inter-Process Communication)进程间通信相关命令 :(一)ipcs --- 查看IPC对象(二)获取IPC键值(三)删除IPC对象的命令(四)获取IPC键值的函数1. 函数定义…

[office] 快速提取出Excel 2010单元格括号内的文字信息 #知识分享#经验分享

快速提取出Excel 2010单元格括号内的文字信息 实例演示 ①我们打开一份Excel电子表格,我们要将C列里面括号内的内容提取到D列里面,单击D2单元格,输入下面的函数公式: MID(C2,FIND("(",C2)1,LEN(C2)-FIND("("…

vue如何使用slot

1. vue2 如何使用slot 1.1. 默认插槽(Default Slot)1.2. 具名插槽(Named Slot)1.3. 作用域插槽(Scoped Slot) 2. vue3 如何使用slot 2.1. 默认插槽(Default Slot)2.2. 具名插槽&…

Pytorch学习11_神经网络-卷积层

1.创建神经网络实例 import torch import torchvision from torch import nn from torch.nn import Conv2d from torch.utils.data import DataLoaderdatasettorchvision.datasets.CIFAR10("../dataset_cov2d",trainFalse,transformtorchvision.transforms.ToTensor(…

【深度学习】NLP,Transformer讲解,代码实战

文章目录 1. 前言2. Transformer结构训练过程1. 输入嵌入和位置编码2. 编码器层2.1 单头的注意力机制(便于理解)2.2 多头的注意力机制(Transformer真实使用的)2.3 残差连接和层归一化2.4 前馈神经网络(FFN)2.5 残差连接和层归一化2.6 总结 3. 解码器层 推…

本周重磅日程:美联储决议、中美通胀、苹果AI和英伟达拆股

当周重磅看点颇多:美联储FOMC将公布最新利率“点阵图”,中国5月金融数据、中美通胀数据将出炉,日本央行购债计划是否变动成为市场焦点,苹果2024全球开发者大会一系列AI功能将亮相;特斯拉2024股东大会上马斯克560亿美元…

Linux 内核参数-相关介绍

Linux 内核参数-相关介绍 今天,介绍Linux内核参数相关内容。由于Linux内核优化需要根据具体需求进行具体优化,同时需要具备一定经验,所以这里不涉及优化操作内容。 不过,遇到面试中有相关题目,不至于答不上来&#x…