HarmonyOS6 obscured 隐私遮罩属性使用指南

文章目录一、属性二、ObscuredReasons 枚举三、核心用法四、支持的组件五、示例解析示例一Text 静态遮罩示例二Image 动态遮罩示例三多字段联动切换银行卡场景示例四多字段静态遮罩个人信息列表六、完整源码总结一、属性obscured是 ArkUI 提供的通用隐私保护属性用于将组件内容替换为灰色占位块防止敏感信息在截图、录屏或屏幕共享时泄露。常见于银行卡号、手机号、身份证、账户余额等隐私场景。接口签名obscured(reasons:ArrayObscuredReasons):T参数类型必填说明reasonsArrayObscuredReasons是遮罩原因数组传空数组[]表示取消遮罩API 版本API 10 起支持。二、ObscuredReasons 枚举枚举值说明ObscuredReasons.PLACEHOLDER将组件内容替换为灰色占位块内容不可见三、核心用法需求写法开启遮罩.obscured([ObscuredReasons.PLACEHOLDER])取消遮罩.obscured([])动态切换State 三元表达式// 静态遮罩始终显示占位块Text(138 **** 8888).obscured([ObscuredReasons.PLACEHOLDER])// 动态遮罩由状态变量控制Text(6222 0000 0000 8888).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])四、支持的组件obscured是通用属性适用于组件遮罩效果Text文字内容替换为灰色横条占位块Image图片替换为灰色矩形占位块其他基础组件组件内容区域整体替换为占位块五、示例解析示例一Text 静态遮罩Column({space:8}){Text(138 **** 8888).fontSize(20).fontColor(#000000).obscured([ObscuredReasons.PLACEHOLDER])// 文字被替换为灰色占位块Text(说明开启遮罩后文字被替换为灰色占位块内容不可见).fontSize(12).fontColor(#999999)}效果示意开启遮罩前 138 **** 8888 开启遮罩后 ████████████ ← 灰色占位块文字不可见示例二Image 动态遮罩StateimageObscured:booleantrueImage($r(app.media.startIcon)).width(120).height(120).borderRadius(8).obscured(this.imageObscured?[ObscuredReasons.PLACEHOLDER]:[])Text(this.imageObscured?当前图片已遮罩:当前图片正常显示).fontColor(this.imageObscured?#FF4D4F:#52C41A)Button(this.imageObscured?取消图片遮罩:开启图片遮罩).onClick((){this.imageObscured!this.imageObscured})要点Image同样支持obscured图片被替换为灰色矩形块点击按钮切换imageObscured状态obscured随之响应更新状态文字和按钮文字同步反映当前遮罩状态提升交互反馈示例三多字段联动切换银行卡场景StateisObscured:booleantrue// 卡号Text(6222 0000 0000 8888).fontSize(22).fontColor(#FFFFFF).letterSpacing(3).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])// 持卡人Text(张 * *).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])// 有效期Text(12/28).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])// 切换按钮Button(this.isObscured?显示卡号信息:隐藏卡号信息).backgroundColor(this.isObscured?#1677FF:#FF4D4F).onClick((){this.isObscured!this.isObscured})状态流转初始状态isObscured true 卡号 → ████████████████ 持卡人 → ████ 有效期 → ████ 点击显示卡号信息isObscured false 卡号 → 6222 0000 0000 8888 持卡人 → 张 * * 有效期 → 12/28示例四多字段静态遮罩个人信息列表Column({space:0}){Row(){Text(姓名).width(70).fontColor(#666666)Text(张小明).obscured([ObscuredReasons.PLACEHOLDER])}Row(){Text(手机号).width(70).fontColor(#666666)Text(138 8888 8888).obscured([ObscuredReasons.PLACEHOLDER])}Row(){Text(身份证).width(70).fontColor(#666666)Text(110101 19900101 0011).obscured([ObscuredReasons.PLACEHOLDER])}Row(){Text(余额).width(70).fontColor(#666666)Text(¥ 99,999.00).fontColor(#FF4D4F).obscured([ObscuredReasons.PLACEHOLDER])}}六、完整源码EntryComponentstruct ObscuredExample{StateisObscured:booleantrueStateimageObscured:booleantruebuild(){Scroll(){Column({space:20}){Text(obscured 隐私遮罩属性演示).fontSize(18).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start)// ── 示例一Text 组件隐私遮罩 ────────────────────────────────────Text(示例一Text 隐私遮罩ObscuredReasons.PLACEHOLDER).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#333333).alignSelf(ItemAlign.Start)Column({space:8}){Text(138 **** 8888).fontSize(20).fontColor(#000000).obscured([ObscuredReasons.PLACEHOLDER])Text(说明开启遮罩后文字被替换为灰色占位块内容不可见).fontSize(12).fontColor(#999999)}.width(100%).padding(12).backgroundColor(Color.White).borderRadius(8)// ── 示例二Image 组件隐私遮罩 ───────────────────────────────────Text(示例二Image 隐私遮罩).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#333333).alignSelf(ItemAlign.Start)Column({space:8}){Image($r(app.media.startIcon)).width(120).height(120).borderRadius(8).obscured(this.imageObscured?[ObscuredReasons.PLACEHOLDER]:[])Text(this.imageObscured?当前图片已遮罩:当前图片正常显示).fontSize(12).fontColor(this.imageObscured?#FF4D4F:#52C41A)Button(this.imageObscured?取消图片遮罩:开启图片遮罩).width(140).height(36).fontSize(13).onClick((){this.imageObscured!this.imageObscured})}.width(100%).padding(12).backgroundColor(Color.White).borderRadius(8).alignItems(HorizontalAlign.Start)// ── 示例三动态切换遮罩模拟银行卡号场景─────────────────────Text(示例三动态切换遮罩模拟银行卡号).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#333333).alignSelf(ItemAlign.Start)Column({space:12}){Column({space:6}){Text(储蓄卡).fontSize(13).fontColor(#FFFFFF).alignSelf(ItemAlign.Start)Text(6222 0000 0000 8888).fontSize(22).fontColor(#FFFFFF).letterSpacing(3).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])Row({space:16}){Column({space:2}){Text(持卡人).fontSize(11).fontColor(rgba(255,255,255,0.7))Text(张 * *).fontSize(14).fontColor(#FFFFFF).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])}.alignItems(HorizontalAlign.Start)Column({space:2}){Text(有效期).fontSize(11).fontColor(rgba(255,255,255,0.7))Text(12/28).fontSize(14).fontColor(#FFFFFF).obscured(this.isObscured?[ObscuredReasons.PLACEHOLDER]:[])}.alignItems(HorizontalAlign.Start)}.width(100%).margin({top:8})}.width(100%).padding({left:20,right:20,top:16,bottom:16}).borderRadius(12).linearGradient({angle:135,colors:[[#1677FF,0.0],[#0050B3,1.0]]})Button(this.isObscured?显示卡号信息:隐藏卡号信息).width(160).height(40).fontSize(14).backgroundColor(this.isObscured?#1677FF:#FF4D4F).onClick((){this.isObscured!this.isObscured})}.width(100%).padding(12).backgroundColor(Color.White).borderRadius(8).alignItems(HorizontalAlign.Center)// ── 示例四多组件同时遮罩个人信息场景───────────────────────Text(示例四多字段同时遮罩个人信息).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#333333).alignSelf(ItemAlign.Start)Column({space:0}){Row(){Text(姓名).fontSize(14).fontColor(#666666).width(70)Text(张小明).fontSize(14).fontColor(#333333).obscured([ObscuredReasons.PLACEHOLDER])}.width(100%).padding({top:12,bottom:12,left:16,right:16}).border({width:{bottom:1},color:#F0F0F0})Row(){Text(手机号).fontSize(14).fontColor(#666666).width(70)Text(138 8888 8888).fontSize(14).fontColor(#333333).obscured([ObscuredReasons.PLACEHOLDER])}.width(100%).padding({top:12,bottom:12,left:16,right:16}).border({width:{bottom:1},color:#F0F0F0})Row(){Text(身份证).fontSize(14).fontColor(#666666).width(70)Text(110101 19900101 0011).fontSize(14).fontColor(#333333).obscured([ObscuredReasons.PLACEHOLDER])}.width(100%).padding({top:12,bottom:12,left:16,right:16}).border({width:{bottom:1},color:#F0F0F0})Row(){Text(余额).fontSize(14).fontColor(#666666).width(70)Text(¥ 99,999.00).fontSize(14).fontColor(#FF4D4F).obscured([ObscuredReasons.PLACEHOLDER])}.width(100%).padding({top:12,bottom:12,left:16,right:16})}.width(100%).backgroundColor(Color.White).borderRadius(8)Text(注obscured([ObscuredReasons.PLACEHOLDER]) 将组件内容替换为灰色占位块适用于截图保护、隐私信息展示等场景。).fontSize(12).fontColor(#999999).padding({left:4,right:4,bottom:16})}.width(100%).padding(16)}.width(100%).height(100%).backgroundColor(#F5F5F5)}}运行效果如图总结需求写法Text 静态遮罩.obscured([ObscuredReasons.PLACEHOLDER])Image 静态遮罩.obscured([ObscuredReasons.PLACEHOLDER])取消遮罩.obscured([])State动态切换this.show ? [] : [ObscuredReasons.PLACEHOLDER]多字段联动共用同一个State布尔变量如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力