--- theme: condensed-night-purple --- # 前言在前面，我们已经完成了`Home、Mine、Calendar`三个模块了现在我们继续往下`Data模块`和`Add`模块这次我们要完成整个项目啦~ 大家加油！ # Data 老样子，新建一个`Data.ets`，然后再`TabBar`中引用

## DataPane模块我现在想搞一个冰箱容量的模块那么我可以用一下自带的`DataPanel`组件

但是这个组件比较蛋疼，只能说还不完善吧，功能较少

效果

但是我现在并不知道每个模块都是什么东西，光有个占比，所以我自己加了一个文本，并加上了一个背景色，用来区分

这是目前的效果，需要说的是，颜色好像也不能更改，我还是自己吸的色，哈哈哈哈有点搞笑在里面东西太多了，我给抽出去了，大家到这里应该懂我的意思了

目前除了这个Arc自带的这个组件，我还找到了一个`openharmony`第三方的库，叫做[ohos-MPChart](https://gitee.com/openharmony-sig/ohos-MPChart "ohos-MPChart")

它有点类似于`echarts`，可以完成一些更多的可视化效果，但是文档太难受了

是全是代码的形式，看惯了组件库的文档的我，表示很难受，而且在使用的时候API还出现了一些问题，所以先搁置了，待我研究一下这里打算单门再出文章但是由此我看到目前已经有一些第三方库，于是我想去自建库，也就是文档的这里

但是我第一步就卡住了

这个库的模板在哪啊？目前也没有找到，求教。。并不是想造轮子，是根本没有啥轮子，要不也得封装，不如做个库了但是还不知道咋建立，所以目前只能单建项目，把封装的组件记录一下了 > 这里有懂建库的可以评论一下 ### ohpm踩坑当我最开始用ohpm的时候是失败的，如果有人遇到了可以看我下面的解决方案如果你想通过ohpm来下载依赖发现失败的时候

这个时候你先检查一下，你的配置是不是出问题了如果不会配置的话 > 官网文档这里教了，挺全面的：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3#section0849413782 正常完事是这样的

如果你在引入库出现这个报错的话

那么你可以在`setting`中将下面这项关掉

## List 好的，我们继续我现在想里面的内容更加细分，比如，我想知道我现在的食品里面都有什么，于是我打算再搞一个`List`

老朋友了，我们先做成目前的效果好的，我们现在加点内容

这是我想要的效果，于是我把这一块封装成一个`DataItem`组件

然后里面的值需要父组件进行传递于是我新建了一个`ItemData`存放数据

> 这里懒得起名字了，所以草率了点然后在`Data.ets`中进行遍历

效果

然后这里我希望我的这个`List`是横向的那么我们需要改变排列方向

所以现在可以得到效果

# Add 最后一个模块了，现在我们别的地方都完成了，就差一个`加入商品`了首先新建`Add.ets`然后再`TabBar`中进行替换我的构想是这样的，理论上可以扫描`二维码或者条形码`，快速加入商品，但是此部分内容较为复杂，可以通过`OpenHarmony`的三方库 `@ohos/zxing`，它是一个解析/生成一维码/二维码的库

地址：[OpenHarmony-TPC/zxing (gitee.com)](https://gitee.com/openharmony-tpc/zxing) 这里仅仅提供样式和布局，后面有时间了我再加上功能除了扫码，我们还可以通过`输入框`输入信息来添加商品那咱们开始吧~ 扫描条形码的部分我封装成一个`Scan`组件然后我用Stack布局简单书写一下我想要的样式

看看效果

好的，开始剩余的部分，剩余的部分类似于一个表单

所以这里简单封装一下，我叫做`ProductForm` 我们简单写一下，目前是这样的

发现有大量的重复样式，所以这里我们可以用`样式装饰器@Extend` 首先，把`Text`的封装了

然后是`输入框`

然后有两个输入框是输入日期的，这里我们不想手写输入，而是需要通过`日期选择器`进行输入那我们第一时间应该想到`DatePickerDialog`

那我们就去写一下

看看效果

好的，效果没问题，现在我们这里按照之前`Mine`的思路进行父子间的传值即可，我们改进一下`ProductForm`

这样就可以获取到值了我们看看效果吧

这里的时间大家可以通过`Date`获取当前的日期，比较简单，我就给大家提供个思路最后我们再加一个按钮即可

效果

# 结尾

项目的初版算是完成了，希望大家不要去深挖一些业务逻辑上的漏洞，因为这个项目主要是为了帮助大家学习，复习一些ArcTS的语法，以及一些组件的使用当然，目前我自己也是很不满意的，所以我在下一节会对整个项目进行优化和改造（但是整体页面效果不会变太多，大多是细节和逻辑上的优化）整体大概是四节，跟我预料的差不多，写这种实战教学真的耗时耗精力，希望大家多支持希望这套专栏对大家有所帮助吧~那么这一切都是值得的有什么问题或者交流的话可以**加V：Js_perplexed09** 感谢大家的支持~ 后面出什么内容大家可以建议一下 # 吐槽 ArcUI的确处在一个较为初步的阶段，组件功能不够完善，有一些组件还没有，很多都需要自己封装，不知道Arc组件库啥时候出 IDE有bug，有时候会生成js和一些文件官方文档待完善，有的地方书写的不对（不知道是不是没更新）不知道大家有没有同样的感受：文档找东西费劲（我感觉是设计问题），我现在多少算是熟读文档了，但是有的时候我想找点找过的东西，这个费劲第三方库太少了，自己想封装还不知道为啥库的模板没有了一些小的坑属于不记得了，可能也算是无伤大雅吧。。另外，能不能页面调试方便一点，类似于微信开发者工具那样也行（虽然体验感也挺差的）但是最后，我想说的是，我是期待国内的技术蓬勃发展的，我也很期待鸿蒙能够很好地发展，在ArcTS普及的初期，难免问题会多一些，但是希望官方能尽快地完善期间华为打过几次电话寻求开发者反馈，我反馈了不少，但是并不知道结果如何希望能做的更好吧~