鸿蒙UI开发——隐私遮罩效果
1、概 述
如果我们希望对某些文字或图片做隐私遮罩处理，ArkUI为组件提供了一个属性可以方便的实现此效果，效果类似如下：
2、具体使用
我们在实现组件时，可以为组件添加obscured属性，用于为该属性设置隐私遮罩，接口定义如下：
// 设置组件内容的遮罩类型。obscured(reasons: Array<ObscuredReasons>)
入参ObscuredReasons是一个枚举，目前只有一个值，如下：
PLACEHOLDER // 显示的数据为通用占位符。需要注意：
-
目前支持的组件类型只有：Text文本组件、Image图片显示组件。
-
在为Image组件设置隐私遮罩时，最好设置一个默认宽高，因为如果图片是异步加载的，在图片加载完成前，如果没有默认宽高，会导致遮罩没有宽高信息。
-
如果Text组件设置了属性字符串，则隐私遮罩不生效（后续会有例子介绍）。
3、示例
👉🏻 step1：我们创建一个基本文本组件和图片显示组件，代码如下：
@Entry@Componentstruct ObscuredExample {build() {Row() {Column() {Text('欢迎加入【Harmony自习室】').fontSize(30).width(300).fontColor(Color.Black).border({ width: 1 })Image($r('app.media.send_heart')).width('200px').height('200px')}.width('100%')}.height('100%')}}
效果如下：
👉🏻 step2：我们为刚刚创建的文本组件与图片组件添加隐私遮罩（12、16行）
@Entry@Componentstruct ObscuredExample {build() {Row() {Column() {Text('欢迎加入【Harmony自习室】').fontSize(30).width(300).fontColor(Color.Black).border({ width: 1 }).obscured([ObscuredReasons.PLACEHOLDER])Image($r('app.media.send_heart')).width('200px').height('200px').obscured([ObscuredReasons.PLACEHOLDER])}.width('100%')}.height('100%')}}
效果如下：
如果我们为Text组件设置了属性字符串，将不会生效隐私遮罩，代码如下：
@Entry@Componentstruct ObscuredExample {fontStyle1: StyledString = new StyledString("欢迎加入【Harmony自习室】");controller1: TextController = new TextController();async onPageShow() {this.controller1.setStyledString(this.fontStyle1)}build() {Row() {Column() {// 显示属性字符串Text(undefined, { controller: this.controller1 }).obscured([ObscuredReasons.PLACEHOLDER])}.width('100%')}.height('100%')}}
效果如下：
