在 DevEco Studio 中开发 OpenHarmony 应用时,有时会遇到这样的情况:uiEffect.createFilter()  可以正常使用,但查看官方文档时明明能看到 waterRipple(),在编辑器里却找不到这个方法。

原因之一是工程使用了 Public SDK。Public SDK 面向普通应用开发,不提供全部系统 API 声明;Full SDK 包含系统 API 声明,适用于需要调用这些接口的开发场景。`waterRipple` 正好是一个可以用来验证 Full SDK 的官方系统接口。

本文以 Windows 和 DevEco Studio 26 为例,介绍如何保留原 SDK、并排安装 Full SDK、让工程切换到新目录,最后用 waterRipple 验证配置。安装和编译验证都可以在电脑上完成,不需要连接开发板。

一、确认当前工程使用的 SDK

先在 DevEco Studio 的设置中搜索 OpenHarmony SDK,查看 SDK Location。具体查看步骤如下图所示:

先记下这个路径,后续切回原 SDK 时会用到。

二、获取 Full SDK

优先从团队提供的构建产物或与目标分支对应的交付目录获取 OpenHarmony Full SDK。下载时要留意名称中的 full 和 public。下载网址如下:每日构建 | OpenHarmony CI 。如果没有现成的 Full SDK,也可以参考 官方 Full SDK 编译指南,从配套源码构建。

直接下载全量包即可。

下载好后,解压 Full SDK 外层压缩包后,进入:xxxx/ohos-sdk/windows/

在这个目录中可以看到五个组件包:

这里选 windows-x64,看的是运行 DevEco Studio 的电脑,而不是开发板的处理器架构。 即使目标设备是 ARM32 的,Windows 开发机仍然选择 Windows 组件。

三、解压到独立目录

在原 SDK 目录旁边 新建 一个目录,例如:

C:\Users\<用户名>\AppData\Local\OpenHarmony\SdkFull-26.0.0.33

在里面新建平台版本目录 26.0.0,将五个 ZIP 分别解压到这里。完成后的目录结构应当是:

OpenHarmony/
├─ Sdk/                              ← 原来的 SDK,保留不动
└─ SdkFull-26.0.0.33/                ← 新的 SDK 根目录
   └─ 26.0.0/
      ├─ ets/
      │  ├─ oh-uni-package.json
      │  └─ api/
      │     └─ @ohos.graphics.uiEffect.d.ts
      ├─ js/
      ├─ native/
      ├─ previewer/
      └─ toolchains/

四、让工程切换到 Full SDK

回到 DevEco Studio,将 OpenHarmony SDK Location 指向新 SDK 的根目录:

注意选到 26.0.0 的上一级。不要选到 ...\26.0.0\ets,也不要选外层压缩包的解压

目录 ohos-sdk\windows。切换完成后可以看见已经切换版本和阶段:

五、用 waterRipple 验证是否真正生效

只看 SDK 设置页面还不够。最可靠的验证是回答两个问题:编辑器跳到了哪份声明文件?编译器能否用这份声明编译代码?

可以新建一个空白 ArkTS 测试工程,将 entry/src/main/ets/pages/Index.ets 替换为以下内容:

import { uiEffect } from '@kit.ArkGraphics2D';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WaterRippleCheck {
  @State private progress: number = 0.45;
  @State private rippleEnabled: boolean = false;
  @State private errorText: string = '';
  @State private ripple: uiEffect.Filter = uiEffect.createFilter();

  private readonly cells: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  private showFrame(p: number): void {
    try {
      // 每次创建一个新 Filter:更新这一帧,而不是在旧 Filter 上不断追加效果。
      const smallToSmall = 2 as uiEffect.WaterRippleMode;
      this.ripple = uiEffect.createFilter().waterRipple(
        p, 2, 0.5, 0.5, smallToSmall
      );
      this.errorText = '';
      this.rippleEnabled = true;
    } catch (err) {
      const e = err as BusinessError;
      this.rippleEnabled = false;
      this.errorText = 'waterRipple 调用失败:' + e.code + ' ' + e.message;
    }
  }

  build() {
    Column({ space: 12 }) {
      Text('系统接口 waterRipple 验证').fontSize(20)

      Stack() {
        // 底层棋盘:方格的直边便于观察水波导致的局部变形。
        Column() {
          ForEach(this.cells, (row: number) => {
            Row() {
              ForEach(this.cells, (col: number) => {
                Rect()
                  .width(24)
                  .height(24)
                  .fill((row + col) % 2 === 0 ? '#23516B' : '#A8DCCF')
              }, (col: number) => col.toString())
            }
          }, (row: number) => row.toString())
        }

        // 上层只挂背景滤镜,不填底色,让它处理后面的棋盘。
        if (this.rippleEnabled) {
          Stack() {}
          .width(240)
          .height(240)
          .backgroundFilter(this.ripple)
        }
      }
      .width(240)
      .height(240)
      .clip(true)

      Text((this.rippleEnabled ? '水波纹' : '原图') + '  |  progress = ' + this.progress.toFixed(2))
        .fontSize(16)

      Button(this.rippleEnabled ? '看原图' : '显示水波纹')
        .onClick(() => {
          if (this.rippleEnabled) {
            this.rippleEnabled = false;
          } else {
            this.showFrame(this.progress);
          }
        })

      Slider({ value: this.progress, min: 0.05, max: 0.95, step: 0.01 })
        .width('85%')
        .onChange((value: number) => {
          this.progress = value;
          if (this.rippleEnabled) {
            this.showFrame(value);
          }
        })

      Text('先显示水波纹,再拖动滑块观察方格边缘。').fontSize(14)
      if (this.errorText.length > 0) {
        Text(this.errorText).fontSize(14).fontColor('#B42318')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

1、简单验证

选中 waterRipple ,按住 ctrl + 点击 waterRipple,看看是否成功跳转到上述安装的 sdk/ets 中,若成功跳转则验证成功。 

2、运行验证

选中预览器,运行结果,可以拖动进度条显示水波纹是否显示,成功显示则说明fullsdk安装成功。 

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐