HarmonyOS interface router scale pageTransition SlideEffect.Left ArkTS ArkUI

在这里插入图片描述

🎬️create

@Component
export  default struct TitleBar {build(){Row(){Text('transition').fontSize('30fp').fontColor(Color.White)}.width('100%').height('8%').backgroundColor('#4169E1').padding({left:10})}}

🎞️interface

export  interface IList{title:string;url :string;
}
  @State listData:IList[]=[ //  @State listData:Array<IList>=[{title:'in',url:'pages/home1'},{title:'scale',url:'pages/home2'},{title:'small',url:'pages/home3'},{title:'in',url:''}]

💡foreach

   ForEach(this.listData,( item: IList,index?:number)=>{//listitemButton({type:ButtonType.Capsule}){Text(item.title).fontSize('35fp').fontColor(Color.White)}//...})

🔦router

import router from '@ohos.router'

📼mainpage

  "pages/home1"

📹️onclick

 .onClick(()=>{//routerrouter.pushUrl({url:item.url})})

📺️setInterval

//home1  page1
import  router from '@ohos.router'
@Entry
@Component
struct Index {@State TOTAL_TIME:number = 6;//s@State FIRST_CT:number =3;//saboutToAppear(){//timerlet timer=   setInterval(()=>{this.TOTAL_TIME--;if(this.TOTAL_TIME===0){//endrouter.pushUrl({url:"pages/Index"})clearInterval(timer);}},1000)}build() {Column() {Row() {if(this.TOTAL_TIME>this.FIRST_CT){//1Image($r('app.media.t2')).objectFit(ImageFit.Contain)}else if(this.TOTAL_TIME<this.FIRST_CT) {//2Image($r('app.media.bc')).objectFit(ImageFit.Contain).width('30%')Text(' - m - ').fontSize('30fp')}}.width('100%').height('100%').justifyContent(FlexAlign.Center)// Text('in')//   .fontSize('50fp')}.width('100%')}
}

-----------

📽️TransitionEnter scale

//home2 page2@State scale1: number = 1@State opacity1: number = 1
//...Column()
.scale({ x: this.scale1 }).opacity(this.opacity1)
//...pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type: RouteType, progress: number) => {this.scale1 = 1this.opacity1 = progress}) // onEnter (0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) => {this.scale1 = 1 - progressthis.opacity1 = 1}) // onExit (0% -- 100%)}

在这里插入图片描述

🎥SlideEffect.Left

  pageTransition() {PageTransitionEnter({ duration: 1200 }).slide(SlideEffect.Left)PageTransitionExit({ delay: 100 }).translate({ x: 100.0, y: 100.0 }).opacity(0)}

在这里插入图片描述

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

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

相关文章

EXPLAIN执行计划详解

EXPLAIN 是 MySQL 中的一个非常实用的命令&#xff0c;主要用于分析 SQL 查询语句的执行计划&#xff08;Query Execution Plan&#xff0c;QEP&#xff09;。通过这个命令&#xff0c;用户可以获取到数据库引擎如何执行特定的 SQL 语句的详细信息&#xff0c;这对于优化查询性…

DLRover:蚂蚁集团开源的AI训练革命

在当前的深度学习领域&#xff0c;大规模训练作业面临着一系列挑战。首先&#xff0c;硬件故障或软件错误导致的停机时间会严重影响训练效率和进度。其次&#xff0c;传统的检查点机制在大规模训练中效率低下&#xff0c;耗时长且容易降低训练的有效时间。资源管理的复杂性也给…

Codigger编码场景介绍(二):驾驶舱场景(Cockpit)

Codigger&#xff0c;一个专为开发人员设计的工具&#xff0c;致力于为不同的开发场景提供最佳的切换体验。Codigger囊括了多种场景&#xff0c;如传统场景、调试场景、设计器场景、驾驶舱场景以及纯净场景等。在上一篇文章中&#xff0c;我们介绍了传统场景模式&#xff0c;今…

数据结构_栈在括号匹配中的应用_代码

学习笔记 #include<stdio.h> #include<stdlib.h> #include<string.h>#define MaxSize 10 typedef struct{char data[MaxSize];int top; }SqStack;//初始化栈 void InitStack(SqStack &S){S.top 0; } //判断栈是否为空 bool StackEmpty(SqStack S){if (…

深度学习之基于YoloV5钢材微小缺陷检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与目标 在钢材生产过程中&#xff0c;由于各种因素&#xff0c;钢材表面可能会出现微小缺陷&#xff…

DevOps实践:通过云效实现hexo自动构建部署发布

DevOps&#xff08;Development和Operations的组合词&#xff09;是一组过程、方法与系统的统称&#xff0c;用于促进开发&#xff08;应用程序/软件工程&#xff09;、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。这是一种重视“软件开发人员&a…

如何科学制定个性化健康方案?

随着现代生活节奏的加快&#xff0c;慢性病已经成为困扰许多人的健康难题。在这个信息爆炸的时代&#xff0c;如何科学、有效地管理个人健康&#xff0c;成为了我们每个人必须面对的问题。今天&#xff0c;我们就来探讨一下如何通过一体化解决方案&#xff0c;科学制定个性化健…

接口自动化测试工具-----pytest

首先确保安装了Python环境&#xff0c;首先&#xff0c;你需要确保已安装 Python 和 Pip。如果还没有安装&#xff0c;可以从 Python 官方网站下载并安装最新版本的 Python。安装过程中请确保选中“Add Python to PATH”选项。 安装pytest:打开命令提示符&#xff08;Command …

水面漂浮物生活垃圾识别检测系统

水面漂浮物生活垃圾识别检测系统通过现场监控摄像机对河道湖面等水体进行实时监测&#xff0c;水面漂浮物生活垃圾识别检测系统借助智能视频分析技术和YOLO深度学习技术&#xff0c;系统能够自动识别和抓拍水面上的垃圾漂浮物。一旦系统检测到有垃圾漂浮在水面上&#xff0c;立…

深度学习之基于暗通道算法+卷积神经网络图像去雾可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在图像处理领域&#xff0c;图像去雾技术一直是一个重要的研究方向。由于雾霾等天气条件的影响…

软件测试/测试开发丨学习笔记之Allure2测试报告

Allure2测试报告 1、使用 Allure2 运行方式-Python 1&#xff09;–alluredir 参数生成测试报告。 在测试执行期间收集结果 pytest [测试用例/模块/包] --alluredir./result/ (—alluredir这个选项 用于指定存储测试结果的路径)#生成在线的测试报告 allure serve ./result2…

解决Ubuntu无法使用root登录的问题

1、登录普通用户 2、使用vi编辑器打开/etc/pam.d/gdm-autologin并注释掉auth required pam_succeed_if.so user ! root quiet_success 3、使用vi编辑器打开/etc/pam.d/gdm-password并注释掉auth required pam_succeed_if.so user ! root quiet_success 4、注销用户重新用roo…

Windows部署Jar包到系统服务(Service)

使用WinSW工具 1、工具下载地址&#xff1a;https://github.com/winsw/winsw/releases 选择最新版本下载 根据机器32位或者64位分别下载exe&#xff0c;再下载sample-minimal.xml文件 2、修改文件名 将两个文件名称修改为服务名&#xff0c;如&#xff1a; test.exe 和 test…

【誉天618·年中钜惠】无忧卡计算VIP会员上线

在数字化浪潮汹涌的当下&#xff0c;技术更新迭代的速度令人目不暇接。为了满足广大技术爱好者与专业人士对于最新技术的渴望与追求。2022年我们推出了誉天系列会员卡&#xff0c;受到了学员和企业的一致好评&#xff0c;现在我们又结合当下的热门ICT技术进行了会员卡升级。 誉…

Manjaro Linux上安装和配置输入法Fcitx5(稳定2014-5-17亲测)

在Manjaro Linux上安装和配置输入法&#xff0c;通常会选择Fcitx5或Ibus作为输入法框架。以下是详细步骤&#xff0c;包括安装和配置输入法框架以及安装中文输入法。 安装过程中冲突 卸载老版本 fcitx-4.*即可&#xff0c; 应为全面拥抱Fcitx5 参考文献&#xff1a; Fcitx5 do…

文件中海量数据的排序

文件中海量数据的排序 题目&#xff1a; 跟之前堆排序可以解决TopK问题一样&#xff0c;我们来看看归并排序会用来解决什么问题&#xff1f; 思路&#xff1a; 我们说归并排序是外排序。其实就是将数据分成一个个小段&#xff0c;在内存中进行排序&#xff0c;再拿出内存&am…

【Linux001】centos常用命令总结总结(已更新)

1.熟悉、梳理、总结下centos知识体系。 2.Linux相关知识&#xff0c;在日常开发中必不可少&#xff0c;如一些必知必会的常用命令&#xff0c;如环境搭建、应用部署等。同时&#xff0c;也要谨慎使用一些命令&#xff0c;如rm -rf&#xff0c;防止一些生产事故的发生。 3.欢迎点…

Mysql8.0离线安装 centos

Mysql8.0离线安装 centos 上传mysql安装包并解压 tar xvf mysql-8.0.37-1.el7.x86_64.rpm-bundle.tar运行安装对应的rpm包&#xff0c;按照一下顺序 rpm -ivh mysql-community-common-8.0.37-1.el7.x86_64.rpm rpm -ivh mysql-community-client-plugins-8.0.37-1.el7.x86_64.rp…

预约直播丨ETLCloud训练营:ETL中多流数据合并与运算专题

在大数据处理领域&#xff0c;一个至关重要的步骤是对多源数据流进行汇聚与融合&#xff0c;进而开展深度处理与剖析。此操作对于构建高效数据仓库、实现数据动态变化的实时洞察&#xff0c;以及驾驭复杂事件流的处理机制尤为关键。过程涉及从多样化的数据源中抽取信息&#xf…

Spring Boot 3.x使用knife4j

Spring Boot 3.x使用knife4j 1.添加knife4j依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId><version>4.4.0</version> </dependency>2.在…