OpenHarmony-基于ETS范式应用开发初体验 原创 精华

发布于 2022-3-31 11:36
浏览
7收藏

前言

最近刚接触基于openHarmong开源框架的应用开发,特别是基于JS/ETS开发范式。其中基于JS的应用开发,与vue语法和思想高度相似,数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接式。可以类比学习。今天就ETS规范,写一个Loading的组件,熟悉ETS下的一些基础组件的应用和联动。

参考资料

OpenHarmony API
OpenHarmony / docs

UI开发模式

OpenHarmony-基于ETS范式应用开发初体验-开源基础软件社区

实现

  1. 新建项目
    OpenHarmony-基于ETS范式应用开发初体验-开源基础软件社区

语言选择eTS,API Version 选择8,不然部分组件不支持

  1. 页面布局
    用到的容器组件有:Column,Row
    用到的其他组件有:Image, Text, Slider
Column(){ // 沿垂直方向布局的容器
  Row(){ // 沿水平方向布局容器。
    Text() //文本,用于呈现一段信息。
    Image()
  }
  Row(){
    Text()
    Image() //图片组件,用来渲染展示图片。
  }
  Row(){
    Text()
    Silder() //滑动条组件,用来快速调节设置值,如音量、亮度等。
  }
  Row(){
    Text()
    Silder()
  }
}
  1. 根据Silder和Image的参数设置要求赋初始值
    OpenHarmony-基于ETS范式应用开发初体验-开源基础软件社区
  @State inSetValue: number = 10
  @State outVerticalSetValue: number = 40
  @State inVerticalSetValue: number = 40

  @State private degree: number = 0
  @State private speed: number = 5
  @State private timer: number = 0
  @State private imageSize: number = 0
  1. 设置关联
    将Slider进度值赋给Image rotate属性的坐标值,在页面加载的生命周期onPageShow中反复这一过程,最后记得把清楚定时器以免内存泄漏。
Image($r('app.media.load'))
   .rotate({x:0,y:0,z:1,angle:this.degree}).objectFit(ImageFit.Contain)
   .scale({x:this.imageSize,y:this.imageSize})
  speedChange(){
    this.timer = setInterval(() =>{
      this.degree += this.speed;
    },20)
  }
  onPageShow(){
    this.speedChange()
  }
  onPageHide(){
   this.timer = null;
  }

5.用@Builder()装饰器封装相同的功能,减少冗余代码

  //声明
  @Builder
  TextInfo(text: string){
    Column(){
      Text(text)
        .fontSize(29)
        .fontColor("#708090")
        .width('90%')
        .margin({top:20,left:25})
    }
}
  // 调用
   this.TextInfo('Change speed')
  1. OpenHarmony-基于ETS范式应用开发初体验-开源基础软件社区

总结

此例就基于ETS组件的基本使用和关联,以及装饰器@Builer的简单使用展开说明,旨在熟悉ETS规范和对组件的初体验

思考
如果业务比较复杂,可以根据实际的场景和数据的情况抽成更小粒度的组件,以便更方便的组合,提升效率。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-3-31 11:38:43修改
8
收藏 7
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐