写点什么

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

作者:黎燃
  • 2022-11-23
    内蒙古
  • 本文字数:2123 字

    阅读完需:约 7 分钟

应用支持多语言

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

使用多语言数据

使用资源目录中的资源,ArkUI 开发框架为我们提供了一个快捷方式:('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:页面进入站点时的事件回调。进度值范围为[0~1]。OnExit:页面进入站点时的事件回调。进度值范围为[0~1]。

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'
复制代码


发布于: 刚刚阅读数: 3
用户头像

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

评论

发布
暂无评论
对于基于鸿蒙系统的应用支持多语言Arkui框架的线性容器类和PieChart的研究实战_前端_黎燃_InfoQ写作社区