Ark UI 中的问题汇总【系列 1】

作者：坚果

2022 年 7 月 09 日
本文字数：1089 字
阅读完需：约 4 分钟

1.如何实现遮罩效果

使用 onTouch 实现按下抬起事件，.mask()实现遮罩的效果。代码如下：

@Entry@Componentstruct 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<value<160），以此类推，密度为 420 会归到 1080x1920 里面

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

在这里，我们将字符串用 @state 包裹，这样可以监听数据的更新

我们给 Text 绑定点击时间，然后点击，即可显示当前时间，下面是效果。

@Entry@Componentstruct 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：是每个组件的属性方法，在该组件显示时触发此回调。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/c66fe4548ff797bdb0933995e】。文章转载请联系作者。

坚果

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

Ark UI 中的问题汇总【系列 1】

1.如何实现遮罩效果

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

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

4.aboutToAppear 和 onAppear 的区别?

坚果

评论