1、记账本涉及知识点

基础组件#xff08;Button、Select、Text、Span、Divider、Image简直火的一塌糊度学习OpenHarmony相关的技术栈也有一段时间了做个记账本小应用将所学知识点融合记录一下。

1、记账本涉及知识点

基础组件Button、Select、Text、Span、Divider、Image、容器Row、Flex、List、Grid、Column、定位position、路由router、ToastpromptAction、Web组件

自定义弹窗CustomDialog

分布式键值数据库ohos.data.distributedKVStore

Web组件

弹窗控制器控制打开/关闭必须传入且名称必须为controllercontroller:

voidconfirm:

{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)

{Button($r(app.string.cancel)).onClick(()

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)}}

使用自定义弹窗

CustomDialogController({builder:

this.onCancel.bind(this),confirm:

this.onAccept.bind(this),settingBudgetValue:

true,alignment:

DialogAlignment.Center,gridCount:

4,customStyle:

}){Image($rawfile(setting.svg)).width(22).height(22)

.borderRadius(90)

.margin(10).backgroundColor(#67C23A)

.onClick(()

ohos.data.distributedKVStore;const

BUNDLE_NAME

distributedKVStore.SingleKVStore

undefined

{this.createKeyValueDB();}async

string)

distributedKVStore.KVManagerConfig

{context:

distributedKVStore.createKVManager(kvStoreConfig);}catch

(err)

{console.error(error:${err})}}//

{if

当数据库文件不存在时是否创建数据库默认为truecreateIfMissing:

true,//

设置数据库文件是否加密默认为false即不加密encrypt:

false,//

设置数据库文件是否自动同步。

默认为false即手动同步autoSync:

true,//

kvStoreType不填时默认创建多设备协同数据库kvStoreType:

distributedKVStore.KVStoreType.SINGLE_VERSION,//

多设备协同数据库kvStoreType:

distributedKVStore.KVStoreType.DEVICE_COLLABORATION,securityLevel:

distributedKVStore.SecurityLevel.S1};kvManager.getKVStoredistributedKVStore.SingleKVStore(storeId,

options,

distributedKVStore.SingleKVStore)

{if

Code:${err.code},message:${err.message});return;}console.info(Succeeded

getting

Code:${e.code},message:${e.message});}return

kvStore;}//

Code:${err.code},message:${err.message});return;}console.info(Succeeded

deleting

Code:${e.code},message:${e.message});}}//

向键值数据库中插入数据async

Code:${err.code},message:${err.message});return;}console.info(Succeeded

putting

Code:${e.code},message:${e.message});}}//

getStoreData(key:

this.createKeyValueDB();}return

new

Code:${err.code},message:${err.message});reject(err)return;}resolve(data)});}

catch

{reject(err)console.error(TAG-getStoreData,

Failed

distributedUtil.putStoreData(amountRecords,

distributedUtil.getStoreData(amountRecords).***n((res:

string)

处理存储的图片资源会自动转换为id的形式无法直接获取展示result.map(item

{item.icon

$rawfile(item.icon.params[0])return

result}

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

!DOCTYPE

charsetutf-8title柱状图示例/titlescript

/head

document.getElementById(chartBarContainer);var

chart

echarts.init(chartContainer);var

option

echarts.graphic.LinearGradient(0,

offset:

echarts.graphic.LinearGradient(0,

offset:

}])}}]};chart.setOption(option);}function

{const

document.getElementById(chartPieContainer);var

chart

echarts.init(chartContainer);var

option

false}}]};chart.setOption(option);}

/script

web_webview.WebviewController()build()

{Web({

initBarChart(${JSON.stringify(this.chartBarData)})this.controllerWeb.runJavaScript(codeJS)

3.4.4

web_webview.WebviewController()private

chartBarData:

{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:

}).verticalScrollBarAccess(true).javaScriptAccess(true).onPageEnd(()

{//

initBarChart(${JSON.stringify(this.chartBarData)})this.controllerWeb.runJavaScript(codeJS)//

初始化饼图const

initPieChart(${JSON.stringify(this.chartPieData)})this.controllerWeb.runJavaScript(codeJSPie)})}.width(100%).height(100%)}

3.4.5

转换为字符串传递的参数必须使用引号包裹否则无法调用到H5中的方法H5中使用传过来的数据同理需要使用

JSON.parse()

使用Grid布局通过rowStart、rowEnd、columnStart、columnEnd进行单元格合并。

或者使用column和row布局循环即可。

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

Grid()

{this.GridItemButtonBuilder(7)}.gridItemStyle().onClick(()

this.clickBtn(7)

{this.GridItemButtonBuilder(8)}.gridItemStyle().onClick(()

this.clickBtn(8)

{this.GridItemButtonBuilder(9)}.gridItemStyle().onClick(()

this.clickBtn(9)

{Text(this.time).backgroundColor(Color.White).width(100%).height(100%).textAlign(TextAlign.Center)}.gridItemStyle()GridItem()

{this.GridItemButtonBuilder(4)}.gridItemStyle().onClick(()

this.clickBtn(4)

{this.GridItemButtonBuilder(5)}.gridItemStyle().onClick(()

this.clickBtn(5)

{this.GridItemButtonBuilder(6)}.gridItemStyle().onClick(()

this.clickBtn(6)

{this.GridItemButtonBuilder(remove)}.gridItemStyle().onClick(()

})GridItem()

{this.GridItemButtonBuilder(1)}.gridItemStyle().onClick(()

this.clickBtn(1)

{this.GridItemButtonBuilder(2)}.gridItemStyle().onClick(()

this.clickBtn(2)

{this.GridItemButtonBuilder(3)}.gridItemStyle().onClick(()

this.clickBtn(3)

{this.GridItemButtonBuilder(保存,

#409EFF)}.rowStart(2).rowEnd(3).columnStart(3).columnEnd(4).onClick(()

this.clickBtn(save)

{this.GridItemButtonBuilder(清空)}.gridItemStyle().onClick(()

this.clickBtn(clear)

{this.GridItemButtonBuilder(0)}.gridItemStyle().onClick(()

this.clickBtn(0)

{this.GridItemButtonBuilder(.)}.gridItemStyle().onClick(()

this.clickBtn(.)

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

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

Builder

{Text(item.value).fontSize(12).fontColor(#18181A).fontFamily(HarmonyHeTi)

}Component

ArrayOneMealStatisticsInfoBuilderParam

content?:

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

alignContent:

{Divider().strokeWidth(1).color(#D8D8D8)})}.height(100%).margin({

top:

}).justifyContent(FlexAlign.SpaceBetween)Column()

{Flex({

{this.content(item)}Text(item.mealTime.name).fontSize(14).fontColor(#7E7E7E).fontFamily(HarmonyHeTi).margin({

top:

})}.justifyContent(FlexAlign.End).height(100%)}})}}.height(236)}.height(190)Row()

(item:

{this.legendComponent(item)}}})}.justifyContent(FlexAlign.SpaceEvenly).width(100%).margin({

top:

}).borderRadius(12).backgroundColor(#FFFFFF)}

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