【HarmonyOS开发】案例-记账本开发

OpenHarmony最近一段时间，简直火的一塌糊度，学习OpenHarmony相关的技术栈也有一段时间了，做个记账本小应用，将所学知识点融合记录一下。

1、记账本涉及知识点

• ??? 基础组件（Button、Select、Text、Span、Divider、Image）、容器（Row、Flex、List、Grid、Column）、定位（position）、路由（router）、Toast（promptAction）、Web组件；
• ??? 自定义弹窗（@CustomDialog）；
• ??? 分布式键值数据库（@ohos.data.distributedKVStore）；
• ??? Web组件；
• ??? OpenHarmony三方库；

2、效果预览

??

??

3、功能点实现简介

3.1?自定义弹窗

// 自定义弹窗定义
@CustomDialog
struct CustomDialogSetting {
  // 双向绑定传值
  @Link settingBudgetValue: string
  // 弹窗控制器，控制打开/关闭，必须传入，且名称必须为：controller
  controller: CustomDialogController
  // 弹窗中的按钮事件
  cancel: () => void
  confirm: () => void

  // 弹窗中的内容描述
  build() {
    Column() {
      Text($r('app.string.budget_setting'))
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin(12)
        .textAlign(TextAlign.Center)
        .width("100%")
      TextInput({
        placeholder: $r('app.string.estimated_amount_tips'),
        text: this.settingBudgetValue
      })
        .type(InputType.Number)
        .height(60)
        .width('90%')
        .onChange((value: string) => {
          this.settingBudgetValue = value
        })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button($r('app.string.cancel'))
          .onClick(() => {
            this.settingBudgetValue = ''
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button($r('app.string.confirm'))
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(AccountBookConstant.FONT_COLOR_BLUE)
      }.margin(15)
    }
  }
}

// 使用自定义弹窗
dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogSetting({
      cancel: this.onCancel.bind(this),
      confirm: this.onAccept.bind(this),
      settingBudgetValue: $settingBudgetValue
    }),
    cancel: this.onCancel,
    autoCancel: true,
    alignment: DialogAlignment.Center,
    gridCount: 4,
    customStyle: false
})

// 开启弹窗
this.dialogController.open()

3.2?悬浮按钮

// 设置按钮， 通过position进行绝对定位
Button({  stateEffect: true }){
  Image($rawfile('setting.svg')).width(22).height(22)
}.width(42).height(42)
.borderRadius(90)
.shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY:5 })
.position({ x: '98%', y: '98%' })
.markAnchor({ x: '98%', y: '98%'})
.margin(10).backgroundColor('#67C23A')
.onClick(() => {
  if (this.dialogController != undefined) {
    this.dialogController.open()
  }
})

3.3??数据存储

// 定义键值对存储类

import distributedKVStore from '@ohos.data.distributedKVStore';

const BUNDLE_NAME = "baseInfo"

let context = getContext(this)
// 数据库对象
let kvManager: distributedKVStore.KVManager | undefined = undefined;
// KVStore数据库
let kvStore: distributedKVStore.SingleKVStore | undefined = undefined;

class DistributedUtil {
  constructor() {
    this.createKeyValueDB();
  }
  async getKvManager(bundleName?: string) {
    const kvStoreConfig: distributedKVStore.KVManagerConfig = {
      context: context,
      bundleName: bundleName || BUNDLE_NAME
    };
    try {
      kvManager = distributedKVStore.createKVManager(kvStoreConfig);
    }
    catch (err) {
      console.error(`error:${err}`)
    }
  }

  // 创建并得到指定类型的KVStore数据库
  async createKeyValueDB(op?: distributedKVStore.Options) {
    if (!kvManager) {
      await this.getKvManager();
    }
    try {
      const options: distributedKVStore.Options = {
        // 当数据库文件不存在时是否创建数据库，默认为true
        createIfMissing: true,
        // 设置数据库文件是否加密，默认为false，即不加密
        encrypt: false,
        // 设置数据库文件是否备份，默认为true，即备份
        backup: false,
        // 设置数据库文件是否自动同步。默认为false，即手动同步
        autoSync: true,
        // kvStoreType不填时，默认创建多设备协同数据库
        kvStoreType: distributedKVStore.KVStoreType.SINGLE_VERSION,
        // 多设备协同数据库：kvStoreType: distributedKVStore.KVStoreType.DEVICE_COLLABORATION,
        securityLevel: distributedKVStore.SecurityLevel.S1
      };
      kvManager.getKVStore<distributedKVStore.SingleKVStore>('storeId', op || options, (err, store: distributedKVStore.SingleKVStore) => {
        if (err) {
          console.error(`Failed to get KVStore: Code:${err.code},message:${err.message}`);
          return;
        }
        console.info('Succeeded in getting KVStore.');
        kvStore = store;
      });
    } catch (e) {
      console.error(`An unexpected error occurred. Code:${e.code},message:${e.message}`);
    }
    return kvStore;
  }

  // 删除指定键值的数据
  async deleteStoreData(key: string) {
    if (!kvStore) {
      return;
    }

    try {
      kvStore.delete(key, (err) => {
        if (err !== undefined) {
          console.error(`Failed to delete data. Code:${err.code},message:${err.message}`);
          return;
        }
        console.info('Succeeded in deleting data.');
      });
    } catch (e) {
      console.error(`An unexpected error occurred. Code:${e.code},message:${e.message}`);
    }
  }

  // 向键值数据库中插入数据
  async putStoreData(key: string, value: any) {
    if (!key || !value) {
      return
    }

    if(!kvStore) {
      kvStore = await this.createKeyValueDB();
    }

    try {
      kvStore.put(key, value, (err) => {
        if (err !== undefined) {
          console.error(`Failed to put data. Code:${err.code},message:${err.message}`);
          return;
        }
        console.info('Succeeded in putting data.');
      });
    } catch (e) {
      console.error(`putStoreData===>An unexpected error occurred. Code:${e.code},message:${e.message}`);
    }
  }

  // 获取指定键的值
  async getStoreData(key: string) {
    if (!key) {
      return
    }

    if(!kvStore) {
      kvStore = await this.createKeyValueDB();
    }

    return new Promise((resolve, reject) => {
      try {
        kvStore.get(key, (err, data) => {
          if (err != undefined) {
            console.error(`Failed to get data. Code:${err.code},message:${err.message}`);
            reject(err)
            return;
          }
          resolve(data)
        });
      } catch (err) {
        reject(err)
        console.error('TAG-getStoreData', `Failed to get value, Cause: ${err}`)
      }
    });
  }
}

export default new DistributedUtil();

// 使用键值对存储
import distributedUtil from '../../common/distributedStrong'
// 1、增加
distributedUtil.putStoreData('amountRecords', JSON.stringify(dataArray))
// 2、 获取
distributedUtil.getStoreData('amountRecords').then((res: string) => {
  if(res) {
    const result = JSON.parse(res)
    // 处理存储的图片资源，会自动转换为id的形式，无法直接获取展示
    result.map(item => {
      item.icon = $rawfile(item.icon.params[0])
      return item
    })
    this.recordsArray = result
  }
})

3.4?统计图表

3.4.1?定义本地html文件

在resources下创建rawfile文件夹，增加chart.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="./js/echarts5.4.0.js"></script>
</head>
<body>
<h1>本月支出</h1>
<div id="chartBarContainer" style="width: 400px; height: 300px;"></div>

<div id="chartPieContainer" style="width: 400px; height: 300px;"></div>

</body>
<script>
    function initBarChart(chartData) {
      const data = JSON.parse(chartData);

      var chartContainer = document.getElementById('chartBarContainer');
      var chart = echarts.init(chartContainer);

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.seriesData,
          type: 'bar',
          showBackground: true,
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          },
          itemStyle: {
            borderRadius: [25, 25, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }]
      };

      chart.setOption(option);
    }

    function initPieChart(chartData) {
      const data = JSON.parse(chartData);

      var chartContainer = document.getElementById('chartPieContainer');
      var chart = echarts.init(chartContainer);

      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [{
          data: data.seriesData,
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          startAngle: 180,
          labelLine: {
            show: true,
            length: 20, // 标签线的长度
            length2: 50 // 标签线的第二段长度
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          }
        }]
      };

      chart.setOption(option);
    }
</script>
</html>

3.4.2?Web组件使用本地文件

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Chart {
    controllerWeb: web_webview.WebviewController = new web_webview.WebviewController()
    
    build() {
        Web({ src: $rawfile('barChart.html'), controller: this.controllerWeb })
    }
}

3.4.3?Web组件向H5页面传值，调用H5中的方法

// 初始化柱状图
const codeJS = `
  initBarChart('${JSON.stringify(this.chartBarData)}')
`
this.controllerWeb.runJavaScript(codeJS)

3.4.4?完整调用代码

import web_webview from '@ohos.web.webview'
import router from '@ohos.router';

interface ChartDataType {
  xAxisData?: Array<string | number>;
  seriesData?: Array<string | number | any>;
}

@Entry
@Component
struct BarChart {
  controllerWeb: web_webview.WebviewController = new web_webview.WebviewController()
  private chartBarData: ChartDataType = {
    xAxisData: ['餐饮', '购物', '教育', '生活', '宠物', '运动', '娱乐', '其他'],
    seriesData: [10, 20, 15, 30, 10, 20, 15, 30],
  }

  private chartPieData: ChartDataType = {
    seriesData: [
      { value: 10, name: '餐饮' },
      { value: 20, name: '购物' },
      { value: 15, name: '教育' },
      { value: 30, name: '生活' },
      { value: 10, name: '宠物' },
      { value: 20, name: '运动' },
      { value: 15, name: '娱乐' },
      { value: 30, name: '其他' },
    ],
  }

  build() {
    Column() {
      Row() {
        Button() {
          Image($rawfile('icon_back.png')).width(18)
        }
        .backgroundColor(Color.Transparent)
        .padding(10)
        .onClick(() => router.back())

        Text('图表分析').fontSize(20).fontWeight(FontWeight.Bold)
      }
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      Web({ src: $rawfile('barChart.html'), controller: this.controllerWeb })
        .verticalScrollBarAccess(true)
        .javaScriptAccess(true)
        .onPageEnd(() => {
          // 初始化柱状图
          const codeJS = `
            initBarChart('${JSON.stringify(this.chartBarData)}')
          `
          this.controllerWeb.runJavaScript(codeJS)

          // 初始化饼图
          const codeJSPie = `
            initPieChart('${JSON.stringify(this.chartPieData)}')
          `
          this.controllerWeb.runJavaScript(codeJSPie)
        })
    }.width('100%').height('100%')
  }
}

3.4.5?传值注意点总结

• 传递数据需要通过 JSON.stringify()?转换为字符串；
• 传递的参数必须使用引号包裹，否则无法调用到H5中的方法；
• H5中使用传过来的数据，同理，需要使用 JSON.parse()?进行转换；

3.5??自定义键盘

使用Grid布局，通过rowStart、rowEnd、columnStart、columnEnd进行单元格合并。或者使用column和row布局，循环即可。

参考：https://gitee.com/harmonyos/codelabs/tree/master/SimpleCalculator

Grid() {
  GridItem() {
    this.GridItemButtonBuilder('7')
  }.gridItemStyle().onClick(() => { this.clickBtn(7) })
  GridItem() {
    this.GridItemButtonBuilder('8')
  }.gridItemStyle().onClick(() => { this.clickBtn(8) })
  GridItem() {
    this.GridItemButtonBuilder('9')
  }.gridItemStyle().onClick(() => { this.clickBtn(9) })
  GridItem() {
    Text(this.time).backgroundColor(Color.White).width('100%').height('100%').textAlign(TextAlign.Center)
  }.gridItemStyle()

  GridItem() {
    this.GridItemButtonBuilder('4')
  }.gridItemStyle().onClick(() => { this.clickBtn(4) })
  GridItem() {
    this.GridItemButtonBuilder('5')
  }.gridItemStyle().onClick(() => { this.clickBtn(5) })
  GridItem() {
    this.GridItemButtonBuilder('6')
  }.gridItemStyle().onClick(() => { this.clickBtn(6) })
  GridItem() {
    this.GridItemButtonBuilder('remove')
  }.gridItemStyle().onClick(() => { this.clickBtn('remove') })

  GridItem() {
    this.GridItemButtonBuilder('1')
  }.gridItemStyle().onClick(() => { this.clickBtn('1') })
  GridItem() {
    this.GridItemButtonBuilder('2')
  }.gridItemStyle().onClick(() => { this.clickBtn('2') })
  GridItem() {
    this.GridItemButtonBuilder('3')
  }.gridItemStyle().onClick(() => { this.clickBtn('3') })
  GridItem() {
    this.GridItemButtonBuilder('保存', '#409EFF')
  }.rowStart(2).rowEnd(3).columnStart(3).columnEnd(4).onClick(() => { this.clickBtn('save') })

  GridItem() {
    this.GridItemButtonBuilder('清空')
  }.gridItemStyle().onClick(() => { this.clickBtn('clear') })
  GridItem() {
    this.GridItemButtonBuilder('0')
  }.gridItemStyle().onClick(() => { this.clickBtn('0') })
  GridItem() {
    this.GridItemButtonBuilder('.')
  }.gridItemStyle().onClick(() => { this.clickBtn('.') })
}
.height(220)
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr')
.rowsGap(0)
.margin({ top: 0 })

4、扩展（如何使用基础组件自定义柱状图）

• 使用Stack容器进行堆叠
• 通过Rect绘制柱子
• 通过Divider绘制分割线

????一个简单的柱状图就完成了，具体可以参考健康生活，希望ArkUI可以早日集成Echarts类似的图表组件，JS版本的有Chart组件，ArkTs的还未集成，期待官方??????

@Builder
content(item: OneMealStatisticsInfo) {
  Column() {
    if (item.totalFat > 0) {
      Rect({ width: 14, height: item.totalFat / 200 + 14, radius: 7 }).fill('#FD9A42')
        .padding({ top: 14 })
        .margin({ bottom: -28 })
    }
    if (item.totalProtein > 0) {
      Rect({ width: 14, height: item.totalProtein / 200 + 14, radius: 7 })
        .fill('#FBD44E')
        .padding({ top: 14 })
        .margin({ bottom: -21 })
    }
    if (item.totalCarbohydrates > 0) {
      Rect({ width: 14, height: item.totalCarbohydrates / 200 + 14, radius: 7 }).fill('#73CD57')
        .padding({ top: 7 })
        .margin({ bottom: -7 })
    }
  }.clip(true)
 }
    
@Builder
legendComponent(item: HistogramLegend) {
  Text(item.value).fontSize(12).fontColor('#18181A').fontFamily('HarmonyHeTi')
}
  
@Component
struct Histogram {
  @Consume("dietData") dietData: Array<OneMealStatisticsInfo>
  @BuilderParam content?: (item: OneMealStatisticsInfo) => void
  @BuilderParam legendComponent?: (item: HistogramLegend) => void
  private title: string | Resource = ''
  private legend: HistogramLegend[] = []

  build() {
    Column() {
      Text(this.title)
        .textAlign(TextAlign.Start)
        .fontSize(24)
        .fontColor('#000000')
        .fontFamily('HarmonyHeTi-Medium')
        .width('100%')
        .height(46)

      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          ForEach([0, 0, 0, 0, 0, 0], () => {
            Divider()
              .strokeWidth(1)
              .color('#D8D8D8')
          })
        }
        .height('100%')
        .margin({ top: 20 })
        .justifyContent(FlexAlign.SpaceBetween)

        Column() {
          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Start }) {
            ForEach(this.dietData, (item: OneMealStatisticsInfo) => {
              if (item.mealFoods.length > 1) {
                Column() {
                  if (this.content !== undefined) {
                    this.content(item)
                  }
                  Text(item.mealTime.name).fontSize(14)
                    .fontColor('#7E7E7E')
                    .fontFamily('HarmonyHeTi')
                    .margin({ top: 10 })
                }
                .justifyContent(FlexAlign.End)
                .height('100%')
              }
            })
          }
        }
        .height(236)
      }
      .height(190)

      Row() {
        ForEach(this.legend, (item: HistogramLegend) => {
          Row() {
            Rect({ width: 9, height: 9, radius: 9 }).fill(item.color).margin({ right: 18 })
            if (this.legendComponent !== undefined) {
              this.legendComponent(item)
            }
          }
        })
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width('100%')
      .margin({ top: 70 })
    }
    .height('100%')
    .padding({ left: 32, right: 32 })
    .borderRadius(12)
    .backgroundColor('#FFFFFF')
  }
}

后面计划基于canvas基础组件实现一个柱状图，不断学习，期望鸿蒙不断强大完善。