HarmonyOS6 filter 通用属性使用指南

文章目录

• 1.核心特性
  • DropShadowOption 结构说明
• 2. 完整示例代码解析
  • 2.1 代码结构说明
  • 2.2 关键代码解析
• 3. 运行前置条件
  • 3.1 环境配置
  • 3.2 运行方式
• 4. 常见问题及解决方案
• 总结

1.核心特性

DropShadowOption 结构说明

2. 完整示例代码解析

2.1 代码结构说明

以下代码实现了 filter 属性的全参数动态调节，包含状态管理、交互控制、参数重置等核心功能，适配 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:number=0;@State invertSwitch:boolean=false;@State saturateVal:number=1.0;@State sepiaSwitch:boolean=false;@State shadowSwitch:boolean=false;build(){// 主布局Column(){// 标题Text('HarmonyOS6 滤镜演示（兼容版）').fontSize(22).fontWeight(700)// 直接用数字，避免FontWeight导入.margin({ top:20, bottom:15});// 图片展示区（API 10+ 启用filter）Image('https://picsum.photos/300/200').width(300).height(200).borderRadius(12).backgroundColor('#f5f5f5')// ========== filter 核心配置（API 10+ 启用）==========.filter({ blur:this.blurSwitch ?'5px':'0px', brightness:this.brightnessVal, contrast:this.contrastVal, grayscale:this.graySwitch ?1:0, hueRotate:`${this.hueVal}deg`, invert:this.invertSwitch ?1:0, saturate:this.saturateVal, sepia:this.sepiaSwitch ?1:0, dropShadow:this.shadowSwitch ?{ blurRadius:8, color:'#66000000', offsetX:4, offsetY:4}:{ blurRadius:0, color:'#00000000', offsetX:0, offsetY:0}})// ====================================================// 控制区（滚动布局适配屏幕）Scroll(){Column({ space:10}){// 1. 模糊控制Button(this.blurSwitch ?'关闭模糊':'开启模糊(5px)').width('90%').onClick(()=>this.blurSwitch =!this.blurSwitch);// 2. 亮度调节Text(`亮度：${this.brightnessVal.toFixed(1)}`).fontSize(14).margin(15);Slider({ value:this.brightnessVal, min:0, max:2, step:0.1, style: SliderStyle.OutSet }).width('90%').onChange((v)=>this.brightnessVal = v);// 3. 对比度调节Text(`对比度：${this.contrastVal.toFixed(1)}`).fontSize(14).margin(15);Slider({ value:this.contrastVal, min:0, max:2, step:0.1, style: SliderStyle.OutSet }).width('90%').onChange((v)=>this.contrastVal = v);// 4. 灰度控制Button(this.graySwitch ?'关闭灰度':'开启灰度').width('90%').onClick(()=>this.graySwitch =!this.graySwitch);// 5. 色相旋转调节Text(`色相旋转：${this.hueVal}°`).fontSize(14).margin(15);Slider({ value:this.hueVal, min:0, max:360, step:10, style: SliderStyle.OutSet }).width('90%').onChange((v)=>this.hueVal = v);// 6. 反色控制Button(this.invertSwitch ?'关闭反色':'开启反色').width('90%').onClick(()=>this.invertSwitch =!this.invertSwitch);// 7. 饱和度调节Text(`饱和度：${this.saturateVal.toFixed(1)}`).fontSize(14).margin(15);Slider({ value:this.saturateVal, min:0, max:3, step:0.1, style: SliderStyle.OutSet }).width('90%').onChange((v)=>this.saturateVal = v);// 8. 复古控制Button(this.sepiaSwitch ?'关闭复古':'开启复古').width('90%').onClick(()=>this.sepiaSwitch =!this.sepiaSwitch);// 9. 阴影控制Button(this.shadowSwitch ?'关闭阴影':'开启阴影').width('90%').onClick(()=>this.shadowSwitch =!this.shadowSwitch);// 重置按钮Button('重置所有参数').width('90%').backgroundColor('#ff4d4f').fontColor('#ffffff').margin(10).onClick(()=>{this.blurSwitch =false;this.brightnessVal =1.0;this.contrastVal =1.0;this.graySwitch =false;this.hueVal =0;this.invertSwitch =false;this.saturateVal =1.0;this.sepiaSwitch =false;this.shadowSwitch =false;});}.padding(10)}.height('60%')}.width('100%').padding(10).justifyContent(0)}}

运行效果如图：

2.2 关键代码解析

1. 状态变量设计：
   • 变量名添加 Switch/Val 后缀（如 blurSwitch、brightnessVal），避免与 ArkUI 内置方法（如 brightness()）重名。
   • 所有变量通过 @State 装饰，实现参数修改后滤镜效果实时刷新。
2. filter 核心配置：
   • blur：通过布尔值切换 5px/0px，控制模糊开关。
   • 数值型参数（如 brightness/contrast）直接绑定滑块值，支持连续调节。
   • dropShadow 始终返回完整结构（无空对象 {}），符合 ArkTS 严格类型检查规则。
3. 交互控制：
   • 开关类滤镜（模糊/灰度/反色等）通过 Button 切换布尔值。
   • 连续调节类滤镜（亮度/对比度/色相）通过 Slider 组件绑定数值。
   • 重置按钮一键恢复所有参数默认值。

3. 运行前置条件

3.1 环境配置

1. DevEco Studio 版本 ≥ 4.0。
2. 同步 SDK：点击 DevEco Studio 右上角 Sync Now，确保 API 10 相关依赖下载完成。

工程 API 版本配置（entry/build-profile.json5）：

{"apiType":"stageMode","compileSdkVersion":10,"compatibleSdkVersion":10}

3.2 运行方式

1. 优先选择 API 10+ 远程模拟器/真机 运行（预览器可能存在兼容性问题）。
2. 若使用低版本 API（<10），需注释 filter 相关代码，仅保留交互框架。

4. 常见问题及解决方案

总结

1. filter 是 HarmonyOS API 10+ 提供的强大视觉滤镜属性，支持9类常用滤镜效果。
2. 使用时需注意组件兼容性（仅支持显示类组件）和类型检查规则（禁止空对象）。
3. 示例代码实现了全参数动态调节，可直接复用至实际项目，适配严格模式语法规范。
4. 低版本工程需升级 API 或使用 imageEffect 做降级处理。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！