HarmonyOS 鸿蒙Next 端云一体化 SHOW出您的元服务 HarmonyOS低代码开发实现CPI图表

HarmonyOS 鸿蒙Next 端云一体化 SHOW出您的元服务 HarmonyOS低代码开发实现CPI图表 HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，例如基于图形化的自由拖拽、数据的参数化配置等，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。本节介绍如何使用低代码来开发一个简单的HarmonyOS应用——CPI图表。

CPI是指居民消费价格指数，统计局数据按月更新。

创建应用

创建一个HarmonyOS应用，这里以“ArkTSCPIChart”为例。

注意，必须要打开Enable Super Visual，表示使用低代码开发功能开发应用/服务。单击Finish等待工程同步完成。

同步完成后，工程目录中自动生成低代码目录结构。

界面设计

通过低代码平台，可以通过拖拉方式，快速实现界面设计。

为了实现CPI图表的展示，把Text组件删除了，拖入了一个List组件。同时，在List组件中放入ListItem组件，如下图所示。

在ListItem组件中，又拖入了Row组件。Row组件里面又嵌套了两个Text组件。

创建数据模型

创建数据模型CPIData，用来表示CPI数据。

export class CPIData {  
  id: number  
  month: string  
  data: number  
  
  constructor(id: number, month: string, data: number) {    
    this.id = id // 唯一表示    
    this.month = month // 月份    
    this.data = data // CPI数值  
  }
}

在Index.ets文件中，编制CPI数据列表，代码如下：

import { CPIData } from '../model/CPIData'; 
@Entry
@Componentstruct
class Index {
  @State cpiData: Array<CPIData> = [
    { id: 1, month: '2023年08月份', data: 100.1 },
    { id: 1, month: '2023年07月份', data: 99.7 },
    { id: 1, month: '2023年06月份', data: 100 },
    { id: 1, month: '2023年05月份', data: 100.2 },
    { id: 1, month: '2023年04月份', data: 100.1 },
    { id: 1, month: '2023年03月份', data: 100.7 },
    { id: 1, month: '2023年02月份', data: 101 },
    { id: 1, month: '2023年01月份', data: 102.1 },
  ];   
  
  build() {
  }
}

组件关联数据

选中组件树中的ListItem组件，单击右侧属性样式栏中的属性图标（Properties），在展开的Properties栏中单击For属性对应的输入框，并在弹出的下拉框中选中{{this.cpiData}}，实现在低代码页面内引用关联ets文件中定义的数据。成功实现关联后，For属性会根据设置的数据列表，展开当前元素，即复制出8个结构一致的ListItem。

选中画布中的第1个Text组件，分别修改右侧属性栏中的Content属性为item1. month。其中item为cpiData数组中定义的对象。

选中画布中的第2个Text组件，分别修改右侧属性栏中的Content属性为item1. data

查看效果

点击右侧预览，查看界面效果。

在远程模拟器里面的运行效果如下。

完整展示可以见B站： https://www.bilibili.com/video/BV1NP411b7pk/

参考引用

• 鸿蒙HarmonyOS手机应用开发实战. 北京：清华大学出版社，2022.
• 鸿蒙HarmonyOS应用开发从入门到精通. 北京：北京大学出版社，2022.
• 跟老卫学HarmonyOS开发. https://github.com/waylau/harmonyos-tutorial
• HarmonyOS题库. https://github.com/waylau/harmonyos-exam
• 鸿蒙系统实战短视频App 从0到1掌握HarmonyOS. https://coding.imooc.com/class/674.html