鸿蒙NEXT开发：ArkTS组件-通用属性（前景属性设置）

最新推荐文章于 2025-06-02 18:12:44 发布

奋斗的小野猪

最新推荐文章于 2025-06-02 18:12:44 发布

阅读量354

点赞数 3

分类专栏：鸿蒙5.0 ArkUI 鸿蒙NEXT 文章标签： harmonyos 华为 android 前端鸿蒙系统 ArkUI ArkTS

本文链接：https://blog.csdn.net/zpyqaq/article/details/146527576

版权

鸿蒙NEXT 同时被 3 个专栏收录

265 篇文章

订阅专栏

鸿蒙5.0

217 篇文章

订阅专栏

ArkUI

176 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

前景属性设置

设置组件的前景属性。

说明

从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

foregroundEffect

foregroundEffect(options: ForegroundEffectOptions)

设置组件的前景属性。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	ForegroundEffectOptions	是	设置组件前景属性包括：模糊半径。

ForegroundEffectOptions12+

前景效果参数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
radius	number	是	模糊半径，取值范围：[0, +∞)，默认为0。仅在组件范围内生效，与其他接口连用时超出组件范围的效果无法生效。

名称

类型

必填

说明

radius

number

是

模糊半径，取值范围：[0, +∞)，默认为0。

仅在组件范围内生效，与其他接口连用时超出组件范围的效果无法生效。

示例

该示例主要演示通过foregroundEffect接口设置前景属性。

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Row() {
      Image($r('app.media.icon'))
          .width(100)
          .height(100)
          .foregroundEffect({ radius: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

效果图如下：

radius表示模糊半径，数值越大越模糊