使用onTouch实现按下抬起事件,.mask()实现遮罩的效果。代码如下:
@Entry
@Component
struct Index {
@State mask:boolean=false
build() {
Column() {
Image('/comment/bg.jpg')
.mask(this.mask?new Rect({ width: '500px', height: '280px' }).fill(Color.Gray):null)
.width('500px').height('280px')
.onTouch((event: TouchEvent) => {
switch(event.type){
case TouchType.Down:
this.mask=true
break;
case TouchType.Up:
this.mask=false
break;
}
})
}.width('100%').margin({ top: 5 })
}
}
eTS默认使用的单位是vp,将px转vp:
px:屏幕物理像素单位。
vp:屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素
ppi:屏幕像素点密度(Pixels Per Inch-PPI),对角线像素点个数/屏幕尺寸。 即每英寸中有多少个像素点。
vp=(px*160)/PPI
PS:乘以160是因为在一些通用屏幕下160像素密度下刚好1vp=1px;
备注:各屏幕密度如下
320*480(120<160),以此类推,密度为420会归到1080x1920里面<>
在这里,我们将字符串用@state包裹,这样可以监听数据的更新
我们给Text绑定点击时间,然后点击,即可显示当前时间,下面是效果。
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold).onClick(()=>{
let date = new Date()
//获取当前时间
// this.message=date.toLocaleString();
//周几
// this.message=date.getUTCDay().toString();
//日期
// this.message=date.getUTCDate().toString();
// //农历月份
// this.message=date.getUTCMonth().toString();
this.message=date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds()+ "秒"
})
}
.width('100%')
}
.height('100%')
}
}
aboutToAppear:是被@Component修饰自定义组件的生命周期方法,函数在创建自定义组件的新实例后,在执行其build函数之前执行。
onAppear:是每个组件的属性方法,在该组件显示时触发此回调。
审核编辑:汤梓红
全部0条评论
快来发表一下你的评论吧 !