OpenHarmony-基于ETS范式应用开发初体验 原创 精华
司空摘猫
发布于 2022-3-31 11:36
浏览
7收藏
前言
最近刚接触基于openHarmong开源框架的应用开发,特别是基于JS/ETS开发范式。其中基于JS的应用开发,与vue语法和思想高度相似,数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接式。可以类比学习。今天就ETS规范,写一个Loading的组件,熟悉ETS下的一些基础组件的应用和联动。
参考资料
OpenHarmony API
OpenHarmony / docs
UI开发模式
实现
- 新建项目
语言选择eTS,API Version 选择8,不然部分组件不支持
- 页面布局
用到的容器组件有:Column,Row
用到的其他组件有:Image, Text, Slider
Column(){ // 沿垂直方向布局的容器
Row(){ // 沿水平方向布局容器。
Text() //文本,用于呈现一段信息。
Image()
}
Row(){
Text()
Image() //图片组件,用来渲染展示图片。
}
Row(){
Text()
Silder() //滑动条组件,用来快速调节设置值,如音量、亮度等。
}
Row(){
Text()
Silder()
}
}
- 根据Silder和Image的参数设置要求赋初始值
@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
- 设置关联
将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')
总结
此例就基于ETS组件的基本使用和关联,以及装饰器@Builer的简单使用展开说明,旨在熟悉ETS规范和对组件的初体验
思考
如果业务比较复杂,可以根据实际的场景和数据的情况抽成更小粒度的组件,以便更方便的组合,提升效率。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-3-31 11:38:43修改
赞
8
收藏 7
回复
举报
相关推荐
博主可以详细介绍下ETS组件吗?
适合新人学习,很不错的,希望博主尽快更新
博主尽快更新呀马上有个项目是基于ETS组件的,希望跟博主学习一下
可以,比较基础的讲解,希望深入讲解下
后续会逐渐深入的学习,提高质量,谢谢支持。
也是这几天才接触,一起学习呗
博主每天都会更新嘛 期待期待
适合新手学习开发流程,希望博主继续更新
初体验 ,标题不是说了吗??