HarmonyOS学习第六周(实践版)(一)

本周是跟着尚硅谷的教程进行了一个实践项目的编写,相比于黑马的项目,我个人觉得尚硅谷的项目会比较的简单,结构比较清晰。更多使用@Builder和@Component,将组件封装在page页面中,好处是更容易寻找,而且不会有那么多的文件,坏处是代码会显得很冗长,而且代码的复用性会比较差。

本周的项目是一个单词打卡项目,包括了登录、打卡、答题等页面,是一个相对完整的项目,但这个项目更像一个纯前端项目,通过调用后端接口,而不是建表和操作数据库来进行数据的交互与存储。

欢迎页

这个页面非常的简单,就是一个背景图片加上一个转场动画。

背景设置

  .backgroundImage($r('app.media.img_splash_bg'))
  .backgroundImageSize({ width: '100%', height: '100%' })

转场动画

转场动画的详细介绍见第三周。

 if(this.flag){
       Image($r('app.media.ic_logo'))
         .logoStyle()
         .transition({type:TransitionType.Insert,opacity:0,translate:{x:-150}})
       Text('快速单词记忆神器')
         .titleStyle()
         .transition({type:TransitionType.Insert,opacity:0,translate:{x:150}})
     }

关键在于调用transition,并设置各种自定义属性。如type可以设置进场动画或者是出场动画。

跳转和动画启动逻辑 

 onPageShow(){
    animateTo({duration:1000,onFinish:()=>{
      setTimeout(()=>{
        router.replaceUrl({url:'pages/Index'})
      },200)
    }},()=>{
      this.flag=true;
    })
  }

当我们用transition设置好动画样式后,我们要用animateTo设置动画的运行时间 。

onfinish回调函数,用于设置动画完成后的逻辑。动画完成2s后,我们要跳转到到主页,所以用路由router的replaceUrl进行跳转。(用replaceUrl的原因是:欢迎页面一般只有在进入APP时要调用,后续不会再出现)

flag是控制动画开始与否的变量,当flag为true时,才会显示上面的Image和text,动画才会显示。

最外层的onPageShow是生命周期函数,当页面展示时会调用这个函数。

答题页

(细心的友友可能发现这个页面的停止测试的止不见了,还有一个奇怪的答案灌,这个我也不太清楚是为什么,在预览器的时候是正常的,但是用模拟器跑的时候就会这样,其他项目也没有问题。知道是为什么的友友麻烦评论区跟我说一下,谢谢大家!)

在这个页面中,我们可以看到底部又有熟悉的tabbar页面切换,这应该是每个手机软件的标配了。用于切换不同的主要页面。除此之外主要有三个部分,统计部分,单词部分,选项部分。

统计部分

由图可见&#x

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值