鸿蒙元服务项目实战:备忘录实现列表展示

程序员一鸣
• 阅读 11

前言

本文基于Api12

鸿蒙元服务项目实战:备忘录实现列表展示

前两章的内容,我们已经实现了UI还有编辑页面的所有的逻辑,这篇文章,我们着重概述下列表展示,毕竟有数据了,如何分列并且友好的展示出来,这是最重要的,毕竟每一个备忘录都需要一个指定的入口。

展示列表,一种是默认进来展示,一种是从编辑页面编辑后返回来更新列表数据,两种情况在实际的开发中都需要考虑到;由于目前未使用数据库进行存储数据,所以分页实现起来稍显复杂,一般备忘录也不会有大量的数据,当然了特殊情况除外,这里我们就先舍弃掉分页,直接全部获取,在实际的APP项目或者联网操作中,为了性能,尽量要做成分页加载。

还有一点需要注意,那就是编辑好的或者修改好的备忘录内容,在保存的时候使用的用户首选项DataPreferences,是并没有进行时间排序的,所以我们在展示列表的时候,就需要根据内容的时间戳进行排序,使得最新编辑的内容显示在最前边。

this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)

数据展示

目前呢,所有的数据都是从用户首选项中取的,也就是在编辑页中保存的数据,这里直接遍历了所有的key,获取到所有的数据,然后转化为我们需要的对象,方便我们渲染数据,有一点需要注意,也就是上述中的排序,目前是根据时间戳进行。

doData() {
    try {
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
        let content = DataPreferences.getInstance().getSync<string>(key)
        let bean = JSON.parse(content) as ListContentBean
        this.mListContentBean.push(bean)
        if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {
          //排序
          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)
        }
      })
    } catch (e) {
    }
  }

数据回显

有了数据之后,当我们点击条目查看之后,有多种处理方式,一种是直接查看,还有一种回显到编辑页面,也就是查看和修改放到一起,这里我们选择第二种,点击条目之后,回显到编辑页面。

点击,数据传递。

router.pushUrl({
              url: "pages/EditPage", params: {
                "data": JSON.stringify(item)
              }
            })

编辑页面,需要等RichEditor初始化完成之后,再进行数据渲染,我们可以在onReady方法中进行设置。

RichEditor(this.options)
          .onReady(() => {
            if (router.getParams() != undefined) {
              let params = JSON.stringify(router.getParams())
              let bean = JSON.parse(JSON.parse(params)["data"]) as ListContentBean
              this.title = bean.title!
              this.nowTime = bean.time!
              this.clickSkinColorValue = bean.bgColor!
              this.tempContentItemId = bean.id!

              if (bean.content != undefined) {
                let array = JSON.parse(bean.content) as Array<RichEditorTextSpanResult>
                array.forEach((item) => {
                  this.controller.addTextSpan(item.value, {
                    style: {
                      fontColor: item.textStyle.fontColor,
                      fontSize: item.textStyle.fontSize,
                      fontStyle: item.textStyle.fontStyle,
                      fontFamily: item.textStyle.fontFamily,
                      fontFeature: item.textStyle.fontFeature,
                      fontWeight: item.textStyle.fontWeight > 10 ? FontWeight.Bold : FontWeight.Normal
                    }
                  })
                })
              }

            } else {
              //获取当前的时间
              this.nowTime = this.getDateTime()
              this.nowInterval = setInterval(() => {
                this.nowTime = this.getDateTime()
              }, 1000)
            }

          })

数据删除

鸿蒙元服务项目实战:备忘录实现列表展示

数据删除,这里我们使用的侧滑方式,可以直接使用List组件中swipeAction属性即可。

删除,做到列表数组数据删除,用户首选项中的数据删除,另外,还需要判断,如果当前无数据时的缺省页面展示。

DataPreferences.getInstance().delete("abner" + id, (isSuccess: boolean) => {
          if (isSuccess) {
            _this.mListContentBean.splice(index, 1)
            this.doContentEmpty()
          }
        })

相关总结

算上这篇文章,备忘录项目已经输出了90%了,基本涵盖了数据的编辑,展示,回显,存储等等,一个小型的笔记项目就完成了,当然了还差一个搜索,我们放到最后一篇文章。

目前仅仅是文字的存储,在实际的备忘录中,还有很多的功能,比如图片,比如画图,比如表格等等,当然了需要我们一步一步来实现。

点赞
收藏
评论区
推荐文章
凯特林 凯特林
4年前
JS - 用 for 循环实现常见的数组迭代方法
常见的数组迭代方法有很多种,比如some,filter,map等等,底层也都可以用for来实现,我们来康一康。somejsconstsome(arr,fn)for(leti0;i<arr.length;i)if(fn(arri,i,arr))re
Wesley13 Wesley13
3年前
Java日期时间API系列30
  实际使用中,经常需要使用不同精确度的Date,比如保留到天2020042300:00:00,保留到小时,保留到分钟,保留到秒等,常见的方法是通过格式化到指定精确度(比如:yyyyMMdd),然后再解析为Date。Java8中可以用更多的方法来实现这个需求,下面使用三种方法:使用Format方法、 使用Of方法和使用With方法,性能对比,使用
Stella981 Stella981
3年前
HarmonyOS应用开发项目实战
鸿蒙2.0已经发布了有段时间了,目前网上也有些小demo了,但是缺乏稍微大点的项目代码。我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。我会陆续更新连载此贴,一步步从0基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误
Stella981 Stella981
3年前
Spring Boot 2.x基础教程:实现文件上传
文件上传的功能实现是我们做Web应用时候最为常见的应用场景,比如:实现头像的上传,Excel文件数据的导入等功能,都需要我们先实现文件的上传,然后再做图片的裁剪,excel数据的解析入库等后续操作。今天通过这篇文章,我们就来一起学习一下如何在SpringBoot中实现文件的上传。动手试试第一步:创建一个基础的SpringBo
程序员一鸣 程序员一鸣
2天前
鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现
开发元服务,有很多的限制性因素,比如包的大小限制,相关API限制,所以,我们在实际开发的时候,具体Api能否使用,还需要去官网查看一下,目前,针对当前这个小项目,总结了几个小问题,大家在开发的过程中可以作为参考。
程序员一鸣 程序员一鸣
19小时前
鸿蒙开发:使用nestedScroll解决滑动冲突
在实际的开发中,远远要比前边的案例复杂,比如我之前封装的刷新库,滚动组件上面有刷新头,下面也有加载尾,还有更复杂的,列表吸顶操作等等,一个nestedScroll属性是远远不够的,往往还要和滑动监听,是否滚动到了顶部和尾部等相结合,才能实现我们实际的效果。
GeorgeGcs GeorgeGcs
9小时前
【HarmonyOS 5】鸿蒙用户头像编辑功能实践
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言1、应用背景在鸿蒙化开发过程中,我们发现最基本常见的功能用户头像的编辑,实现方式和Android与IOS有极大的不同。在实际开发和调研的过程中,我们发现并总结了鸿蒙隐私处理与业内A
程序员一鸣 程序员一鸣
2星期前
鸿蒙开发:实现AI打字机效果
需要注意的是,内容一般都是以markdown的形式输出,也就是真实的数据中,内容都是有样式的,比如加粗,图片,表格等等,所以,不能以单一的Text组件进行展示,需要针对markdown文本适配。
程序员一鸣 程序员一鸣
2天前
鸿蒙元服务项目实战:备忘录UI页面开发
UI页面绘制没什么好说的,就是组件的位置摆放,和组件的显示逻辑,有很多的属性并没有文章记录,大家可以去仓库中查看即可,文章中用到了我的一个标题栏组件,如果大家不想用,可以使用自己写的即可。
程序员一鸣 程序员一鸣
2天前
鸿蒙元服务项目实战:备忘录内容编辑开发
编辑页面还有一些其他的注意事项,比如换肤功能,底部的样式设置等等,都是比较的简单,就不做赘述了。