【HarmonyOS实战开发】鸿蒙应用开发：任务列表

1.项目介绍

任务列表应用，基于OpenHarmony 4.0开发，主要功能：任务列表增删改查，任务进度显示，后台通知提醒

2.项目架构

main
├─ets
│  ├─component	// 自定义组件
│  │      TaskDialog.ets	// 自定义添加/修改弹窗
│  │      TaskKeyboard.ets
│  │      TaskListItem.ets	// 自定义ListItem组件
│  │      TaskProgress.ets	// 进度展示
│  │
│  ├─entryability	// 程序入口
│  │      EntryAbility.ets
│  │
│  ├─pages
│  │      DetailsPage.ets
│  │      TaskPage.ets		// 主页
│  │
│  ├─pojo	// 实体类
│  │  │  Task.ets
│  │  │  TaskMenuItem.ets
│  │  │
│  │  └─dto	// 增强实体类
│  │          TaskDto.ets
│  │
│  ├─service
│  │      TaskReminderService.ets	// 后台提醒提醒工具类
│  │
│  └─utils	// 工具类
│          FileManager.ets
│          NotificationUtil.ets
│          PreferencesUtil.ets
│          RDBUtil.ets
│          TransferToUtil.ets
│
└─resources	// 资源目录

3.项目解析

需要权限： PUBLISH_AGENT_REMINDER

(1)主界面

应用入口界面，在生命周期aboutToAppear中创建/连接数据库 ‘Task’ ，同时查询数据库中所有数据，为数组赋值。使用List组件遍历数组，实现任务列表的呈现。在自定义Menu组件中提供筛选分类功能，根据onClick()点击事件重新查询对应分类数据并赋值。

预览图

源码

import font from '@ohos.font'
import relationalStore from '@ohos.data.relationalStore'
import { AddTaskDialog, EditTaskDialog } from '../component/TaskDialog'
import { TaskListItem } from '../component/TaskListItem'
import { TaskProgress } from '../component/TaskProgress'
import { rdbUtil } from '../utils/RDBUtil'
import TaskDto from '../pojo/dto/TaskDto'
import TaskMenuItem from '../pojo/TaskMenuItem'
import router from '@ohos.router'
import { taskReminderService } from '../service/TaskReminderService'

@Entry
@Component
struct TaskPage {
  @Provide arr: TaskDto[] = []
  @Provide progress: number = 0
  @State index: number = -1
  @State isChecked: boolean = false
  @State menuItems: TaskMenuItem[] = [new TaskMenuItem('全部', '#ffffd88b', true), new TaskMenuItem('待完成', '#ffff', false), new TaskMenuItem('已完成', '#ffff', false)]
  @State menuIndex: number = 0
  addTaskDialogController: CustomDialogController = new CustomDialogController({
    builder: AddTaskDialog()
  })
  editTaskDialogController: CustomDialogController = new CustomDialogController({
    builder: EditTaskDialog({index: this.index})
  })

  build() {
    Column() {
      Row() {
        Text('任务进度:').fontSize(30).fontWeight(FontWeight.Bold).fontFamily('02').margin({ left: 10 })
        TaskProgress().margin({ right: 40 }).id('TaskProgress')
      }
      .backgroundColor('#ffff')
      .borderRadius(20)
      .width('90%')
      .height('20%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 20 })

      Row() {
        Button('添加任务').margin({ left: 10 })
          .onClick(() => {
            this.addTaskDialogController.open()
          })
        Text('全选').fontSize(17).fontWeight(FontWeight.Bold).margin({ left: '45%' })
        Checkbox().width(15).onChange((flag: boolean) => {
          this.isChecked = flag
        })
        Image($r('app.media.screen')).width(30).bindMenu(this.filter_Menu())
      }.width('90%').height('5%').margin({ top: 20 })

      List({ space: 10 }) {
        ForEach(this.arr, (item: TaskDto, index: number) => {
          ListItem() {
            TaskListItem({ taskDto: this.arr[index], isChecked: this.isChecked})
          }.swipeAction({
            start: {
              builder: this.taskListItem_Menu(index)
            }
          })
        })
      }.width('90%').height('65%').margin({ top: 20 })

    }.width('100%').backgroundColor('#ffe9e6e6').justifyContent(FlexAlign.Center)
  }

  // 生命周期 初始化数据
  async aboutToAppear() {
    // 注册字体
    font.registerFont({
      familyName: '01',
      familySrc: $rawfile('font/media.ttf')
    })
    font.registerFont({
      familyName: '02',
      familySrc: $rawfile('font/02.ttf')
    })
    font.registerFont({
      familyName: '03',
      familySrc: $rawfile('font/YanZhenQingDuoBaoTaBei-2.ttf')
    })
    await rdbUtil.createRDB('Task').then