HarmonyOS Yuan Service Project Actual Combat: Memorandum Implementation List Display

#harmonyos

Foreword

this article is based on Api12

in the first two chapters, we have already realized all the logic of UI and editing pages. In this article, we will focus on the following list Display. After all, there are data. How to disaggregate and display them in a friendly way is the most important. After all, each memo needs a designated entrance.

Display list, one is to display by default, and the other is to update list data after editing the editing page. Both situations need to be considered in actual development. Since the database is not used to store data at present, paging is slightly complicated to implement, and general memos will not have a large amount of data, except for special circumstances, of course, here we will discard paging first and directly obtain all of it, in actual APP projects or networking operations, for the sake of performance, try to make paging loading.

Another point to note is that the edited or modified memo content, the user preference DataPreferences used when saving, is not sorted by time, so when we display the list, we need to sort according to the timestamp of the content, so that the latest edited content is displayed at the front.

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

Data presentation

at present, all the data is taken from the user's preferences, that is, the data saved in the editing page. Here, all the keys are directly traversed, all the data are obtained, and then converted into the objects we need, which is convenient for us to render the data. One thing needs to be noted, that is, the sorting mentioned above is currently carried out according to the timestamp.

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) {
          //sort
          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)
        }
      })
    } catch (e) {
    }
  }

Data Echo

with the data, when we click on the entry to view, there are many ways to deal with it, one is to view it directly, and the other is to echo it to the edit page, that is, to view and modify it together. Here we choose the second one. After clicking on the entry, it will echo to the edit page.

Click, data transfer.

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

To edit the page, we need to wait for RichEditor initialization before rendering data. We can set it in the onReady method.

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 {
              //time
              this.nowTime = this.getDateTime()
              this.nowInterval = setInterval(() => {
                this.nowTime = this.getDateTime()
              }, 1000)
            }

          })

Data deletion

for data deletion, the sideslip method we use here can directly use the swipeAction attribute in the List component.

Delete, delete list array data, delete data in user preferences, and determine the default page display if there is no data currently.

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

Related Summary

counting this article, the memo project has already output 90%, basically covering the editing, display, Echo, storage and so on of the data. A small note-taking project has been completed. Of course, there is still one search to go. We put it in the last article.

At present, it is only the storage of text. In the actual memo, there are many functions, such as pictures, such as drawing, such as tables, etc. Of course, we need to implement them step by step.

DEV Community