HarmonyOS6 Filter 属性实战：动态滤镜与阴影配置详解
在 HarmonyOS 6 中，filter 属性为 UI 组件提供了强大的视觉处理能力。它支持模糊、亮度、对比度等多种效果，且允许通过状态变量实现动态调节。不过，由于 ArkTS 的严格类型检查，开发者在使用时需要注意参数结构的完整性，尤其是阴影（DropShadow）部分。
核心特性概览
| 特性 | 说明 |
|---|---|
| 适用版本 | HarmonyOS API 10+ |
| 支持组件 | Image、Text、Button、Span、ImageSpan |
| 核心能力 | 提供 9 类滤镜效果，支持动态参数调节 |
| 类型要求 | 所有对象参数需显式声明完整结构，禁止空对象 {} |
DropShadowOption 结构说明
阴影配置需要完整的对象结构，不能留空。关键参数如下：
| 子参数 | 类型 | 说明 |
|---|---|---|
| blurRadius | number | 阴影模糊半径，非负值 |
| color | string | 阴影颜色（支持 rgba/十六进制） |
| offsetX | number | 阴影 X 轴偏移量 |
| offsetY | number | 阴影 Y 轴偏移量 |
完整示例代码解析
下面这个 Demo 展示了如何结合状态管理实现全参数的动态切换。代码适配了 ArkTS 的严格模式，避免了常见的命名冲突问题。
@Entry
@Component
struct FilterDemo {
// 状态变量设计：添加后缀避免与内置方法重名
@State blurSwitch: boolean = false;
@State brightnessVal: number = 1.0;
@State contrastVal: number = 1.0;
@State graySwitch: boolean = false;
@State hueVal: = ;
: = ;
: = ;
: = ;
: = ;
() {
() {
()
.()
.()
.({ : , : });
()
.()
.()
.()
.()
.({
: . ? : ,
: .,
: .,
: . ? : ,
: ,
: . ? : ,
: .,
: . ? : ,
: .
? { : , : , : , : }
: { : , : , : , : }
})
() {
({ : }) {
(. ? : )
.()
.( (. = !.));
()
.()
.();
({ : ., : , : , : , : . })
.()
.( (. = v));
()
.()
.();
({ : ., : , : , : , : . })
.()
.( (. = v));
(. ? : )
.()
.( (. = !.));
()
.()
.();
({ : ., : , : , : , : . })
.()
.( (. = v));
(. ? : )
.()
.( (. = !.));
()
.()
.();
({ : ., : , : , : , : . })
.()
.( (. = v));
(. ? : )
.()
.( (. = !.));
(. ? : )
.()
.( (. = !.));
()
.()
.()
.()
.()
.( {
. = ;
. = ;
. = ;
. = ;
. = ;
. = ;
. = ;
. = ;
. = ;
});
}.()
}.()
}.().().()
}
}
