
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
最近刚接触基于openHarmong开源框架的应用开发,特别是基于JS/ETS开发范式。其中基于JS的应用开发,与vue语法和思想高度相似,数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接式。可以类比学习。今天就ETS规范,写一个Loading的组件,熟悉ETS下的一些基础组件的应用和联动。
OpenHarmony API
OpenHarmony / docs
语言选择eTS,API Version 选择8,不然部分组件不支持
Column(){ // 沿垂直方向布局的容器
Row(){ // 沿水平方向布局容器。
Text() //文本,用于呈现一段信息。
Image()
}
Row(){
Text()
Image() //图片组件,用来渲染展示图片。
}
Row(){
Text()
Silder() //滑动条组件,用来快速调节设置值,如音量、亮度等。
}
Row(){
Text()
Silder()
}
}
@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
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规范和对组件的初体验