ArkUI常见问题汇总【系列2】

1.如何实现遮罩效果

使用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 })
  }
}

2.使用蓝湖时，eTS单位的换算

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里面<>

3.ets声明式ui开发，怎么获取当前系统时间

 

在这里，我们将字符串用@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%')
  }
}

4.aboutToAppear和onAppear的区别?

aboutToAppear：是被@Component修饰自定义组件的生命周期方法，函数在创建自定义组件的新实例后，在执行其build函数之前执行。

onAppear：是每个组件的属性方法，在该组件显示时触发此回调。

　　审核编辑：汤梓红