HarmonyOS 开发实践——super planner应用之开发篇

原创

小帅聊鸿蒙

发布于 2024-11-01 17:43:23

1900

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

super planner主要功能是进行账单记录和统计，以及日常的事情、idea的记录和设置提醒的功能。

一、主要功能：

1、用户记录账单，账单统计的功能，可以根据日期筛选账单记录。同时可以通过折线图直观显示年度账单。也可以进行账单修改

2、用户可以通过记事本进行事情记录、idea记录、以及提醒设置。通过可以根据不同类型进行筛选。

3.首页可以进行一个用户信息、今日提醒和今日账单的直观展示

二、所用技术以及api

1、采用三层架构，common层、features层、entry层

2、采用Navgation跨包跳转，并进行路由跳转二次封装，以及其基础组件的二次封装。

3、自定义键盘的组件抽取。

4、使用首选项进行用户信息存储。

5、使用关系型数据库进行数据存储。

6、使用三方库，dayjs、mcCharts等三方库。

7、 CustomDialog组件：实现选择窗口弹窗。

8、tabs组件实现基础布局

9、沉浸式屏幕开启，以及安全区域尺寸获取封装。

三、技术难点和解决方案

1、在进行价钱输入时，需要进行约束，但是，普通约束无法完成，只能通过键盘进行约束。所以使用自定义键盘。并对其进行组件抽取。

import { deviceManager } from '../manager/DeviceManager'

@Component
export struct KeyBoardComponent {
  controller: TextInputController = new TextInputController()
  @Link inputValue: string

  aboutToAppear(): void {
    //this.controller = AppStorage.get("keyController") as TextInputController
  }

  build() {
    Column() {
      Row() {
        Blank()
        Image($r("app.media.ic_close"))
          .width(18)
          .height(18)
          .onClick(() => {
            this.controller.stopEditing()
          }).margin({ right: 5, bottom: 5, top: 5 })
      }.width("100%")

      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '—'], (item: number | string) => {
          GridItem() {
            Row() {
              if (item === '—') {
                Image($r("app.media.ic_delete")).fillColor(Color.White).width(22).height(22)
              } else {
                Text(item + "").fontSize(22).fontWeight(600).fontColor(Color.White)
              }
            }
            .justifyContent(FlexAlign.Center)

            .borderRadius(6)
            .backgroundColor($r("app.color.ic_common_green"))
            .width(110)
            .height(30)
            .onClick(() => {
              if (item === '—') {
                let len = this.inputValue.length
                this.inputValue = this.inputValue.slice(0, len - 1)
              }
              let res = this.inputValue.split('.')
              if (res.length === 1 || (res.length === 2 && res[1].length < 2)) {
                if (this.inputValue === '0' && item !== '.') {
                } else {
                  if (item === '.') {
                    if (this.inputValue.search(/\./) === -1 && this.inputValue.length > 0) {
                      this.inputValue += item
                    }
                  } else if (item != '—') {
                    this.inputValue += item
                  }
                }
              }
            })
          }
        })
      }
      .maxCount(3)
      .columnsGap(10)
      .rowsGap(10)
      .padding({
        left: 5,
        right: 5,
        top: 5,
        bottom: deviceManager.screenAvoidBottomHeight
      })
    }.backgroundColor(Color.Gray)
  }
}

2、bindSheet无法修改圆角，通过弹窗配合动画专场实习日历弹窗功能。

具体实现：

import dayjs from 'dayjs'
import { JSON } from '@kit.ArkTS'

@CustomDialog
@Component
export struct CalenderComponent {
  @State flag: boolean = true
  control: CustomDialogController
  private effect: object = TransitionEffect.move(TransitionEdge.BOTTOM)
    .animation({ duration: 500, curve: Curve.Ease })
    .combine(TransitionEffect.translate({ y: 358 }))

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Blank().onClick(() => {
        this.flag = false
        setTimeout(() => {
          this.control.close()
        }, 500)
      })
      if (this.flag)
      Column() {
        Row() {
          Text("取消").fontWeight(400).fontSize(16).fontColor("#999999").onClick(() => {
            this.flag = false
            setTimeout(() => {
              this.control.close()
            }, 500)
          })
          Column(){
            //样式
          }

        }.backgroundColor("#FFFFFF").width("100%").height(300).transition(this.effect)
      }.width("100%").height("100%")
    }
  }
}

以上是鸿蒙原生应用super planner应用的功能、技术选择以及遇到的问题和分享!