#端云一体化#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
@Component
struct 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

 

点击进入华为官网