对于基于鸿蒙系统的应用支持多语言Arkui框架的线性容器类和PieChart的研究实战

CodeJourney
646 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

应用支持多语言

ArkUI开发框架对多语言支持很友好。您只需要在资源目录中创建一个与国家对应的文件夹，其名称与国家代码对应。例如，如果中国是zh，您可以在资源下创建zh文件夹，然后在zh文件下创建相应的类别文件。作者以支持多语言的文本资源为例。

使用多语言数据

使用资源目录中的资源，ArkUI开发框架为我们提供了一个快捷方式：（），例如，访问字符串json中的资源可以缩写为（），例如，访问字符串json中的资源可以缩写为（'app.string.name'）。作者在第3节中介绍了$（）的用法。请自己检查。 在索引中，ets中添加的多语言代码如下：

@Entry @Component struct Index {

  build() {
    Column({space: 10}) {
      Text('多语言测试：')
        .fontSize(22)
      Text($r("app.string.calculator")) // 使用多语言
        .fontSize(22)
    }
    .padding(10)
    .width('100%')
    .height('100%')
  }
}

在这里插入图片描述

线性容器类

线性容器类包括List、ArrayList、LinkedList、Vector、Deque、Queue和Stack。底层主要通过数组实现。线性容器类API充分考虑了数据访问的速度，并在运行时用一条指令实现了添加、删除、修改和查询等操作。

列表

List可用于构造单向链表对象，即尾部节点只能从头部节点访问。根据一般定义，List在内存中的存储位置可以是不连续的。可以通过get/set接口修改存储的元素。用于添加、删除、修改和查询列表的API如下：

declare class List<T> {

  constructor();
  length: number;
  add(element: T): boolean;
  get(index: number): T;
  has(element: T): boolean;
  getIndexOf(element: T): number;
  removeByIndex(index: number): T;
  remove(element: T): boolean;
  getLastIndexOf(element: T): number;
  forEach(callbackfn: (value: T, index?: number, List?: List<T>) => void,
  thisArg?: Object): void;
  convertToArray(): Array<T>;
  isEmpty(): boolean;
  [Symbol.iterator](): IterableIterator<T>;
  // 省略部分API
  
}

PieChart

在这里插入图片描述 根据上图的风格效果，要实现饼图，其实质是逐个绘制实心圆弧并添加相应的圆弧颜色。弧的大小根据饼图数据分布计算，相应的颜色可以由自己指定。接下来，当您单击饼图时，需要找到相应的饼图块并将其高亮显示。找到饼图块时，首先计算手指点击坐标与圆弧中心之间的角度，根据每个圆弧的夹角和大小找到相应的圆弧。找到圆弧后，计算圆弧的突出偏移，并重置所有饼图块的起始值。 计算夹角 夹角计算用于计算手指单击的饼图上的坐标（x，y）与饼图的中心坐标（centerX，centerY）之间的顺时针角度。计算方法如下：

private getTouchedAngle(centerX: number, centerY, x: number, y: number) {
  var deltaX = x - centerX;
  var deltaY = centerY - y;
  var t = deltaY / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  var angle = 0;
  if (deltaX > 0) {
    if (deltaY > 0) {
      angle = Math.asin(t);
    } else {
      angle = Math.PI * 2 + Math.asin(t);
    }
  } else if (deltaY > 0) {
    angle = Math.PI - Math.asin(t);
  } else {
    angle = Math.PI - Math.asin(t);
  }
  return 360 - (angle * 180 / Math.PI) % 360;
}

转场动画

ArkUI开发框架提供了转换动画，可分为页面转换动画、组件转换动画和共享元素转换动画。本 页面转换动画是指打开或关闭页面时添加的动画效果。它通过在全局pageTransition方法中配置页面入口组件PageTransitionEnter和页面出口组件PageTransationExit来定义页面转换效果。

// 入场动效接口定义
interface PageTransitionEnterInterface extends CommonTransition<PageTransitionEnterInterface> {
  (value: { type?: RouteType; duration?: number; curve?: Curve | string; delay?: number }): PageTransitionEnterInterface;
  onEnter(event: (type?: RouteType, progress?: number) => void): PageTransitionEnterInterface;
}

// 退场动效接口定义
interface PageTransitionExitInterface extends CommonTransition<PageTransitionExitInterface> {
  (value: { type?: RouteType; duration?: number; curve?: Curve | string; delay?: number }): PageTransitionExitInterface;
  onExit(event: (type?: RouteType, progress?: number) => void): PageTransitionExitInterface;
}

类型：设置页面的路由类型。RouteType描述如下： 无：无样式 Push：当PageA跳到PageB时，PageA是Exit+Push，PageB是Enter+Push。 弹出：当PageB返回PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 持续时间：以毫秒为单位设置动画执行时间，默认值为0。 曲线：动画曲线，默认值为线性。 OnEnter：页面进入站点时的事件回调。进度值范围为[01]。 OnExit：页面进入站点时的事件回调。进度值范围为[01]。

Lottie动画

Lottie（打开新窗口）是一个开源组件，可以为应用程序添加漂亮的动画。它可以解析AE（After Effects）导出的json文件，然后基于Canvas Canvas执行2D渲染，并与原生组件Animator结合，实现动画效果，使复杂的动画资源可以轻松在应用程序中运行。

npm config set @ohos:registry=https://repo.harmonyos.com/npm/
npm install @ohos/lottieETS  

import lottie from '@ohos/lottieETS'
avatar
文章
阅读
粉丝