【江鸟中原】harmonyOS --仿番茄TODO待办目录

一，引言

学习了一段鸿蒙课，觉得有必要晒一晒自己进步，开发了一个仿番茄TODO待办小程序，希望对学习鸿蒙开发的童靴有帮助。

二，项目介绍

本项目是基于鸿蒙arkts开发的仿照番茄Todo的一款小程序，可实现对代办程序的添加，删除，与修改，后续可以添加定时提醒，待办倒计时功能。本项目借鉴于黑马程序员相关程序以及番茄ToDo的灵感。

进入首页，界面简洁，可进行登录与注册账号。登陆后跳转至待办页面。

待办页面会有任务完成进度，以及添加新的待办任务，点击待办任务中间部位，可详细添加待办事务。

通过滑动事件可以对时间进行删除，为防止误删，将会弹出对话框进行确认后在进行删除。

三，代码

import router from '@ohos.router';
class Task{
  static id: number = 1

  name: string = `待办任务${Task.id++}`

  finished:boolean = false
}

@Styles function card(){
  .width('95%')
  .padding(20)
  .backgroundColor(Color.Gray)
  .borderRadius(15)
  .shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY:4})
}
//继承task 任务完成的格式
@Extend(Text) function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}


@Entry
@Component
struct Index {
  @State totalTask: number = 0
  @State finishTask: number = 0
  @State tasks: Task[] = []
  handleTaskChange() {
    //更新数量
    this.totalTask = this.tasks.length

    this.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column({ space: 10 }) {
      //列式布局，占满整个屏幕
      Row() {
        //制作备忘录卡片
        Text('完成进度：').fontSize(30)
          .fontWeight(FontWeight.Bold)
        Stack() {
          Progress({
            value: this.finishTask,
            total: this.totalTask,
            type: ProgressType.Capsule
          })
            .width(100)

          Row() {
            Text(this.finishTask.toString())
              .fontSize(24)
            Text('/' + this.totalTask.toString())
              .fontSize(24)
          }

        }
      }
      .card()
      .margin({ top: 20, bottom: 10 })
      .justifyContent(FlexAlign.SpaceEvenly)

      //2.添加任务按钮
      Button('新增待办')
        .width(200)
        .onClick(() => {
          //添加任务总数据和数量
          this.tasks.push(new Task())
          this.handleTaskChange()
        })
      List({ space: 10 }) {
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row() {
                Text(item.name).fontSize(20)
                // 设置任务框文本内容
                TextInput()
                  .fontColor(Color.Blue)
                  .fontSize(20)
                  .width(100)
                Checkbox().select(item.finished)
                  .onChange(val => {
                    //更新已完成数量和当前任务的状态
                    item.finished = val
                    this.handleTaskChange()
                  })
              }.card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            //设置删除功能

            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      //居中
      .alignListItem(ListItemAlign.Center)
      //分配剩下高度
      .layoutWeight(1)
      //遍历任务


      //
    }
  }

  @Builder DeleteButton(index: number) {
    Button() {
      Image($r('app.media.icon'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Capsule)
    .backgroundColor(Color.Red)
    .onClick(() => {
      AlertDialog.show({
        title: "是否删除此文件？",
        message: "移动到最近删除后最长保留30天，之后将永久删除。",
        alignment: DialogAlignment.Bottom,
        primaryButton: {
          value: '取消',
          fontColor: Color.Blue,
          action: () => {
            console.info('点击了取消')
          }
        },
        secondaryButton: {
          value: '删除',
          fontColor: Color.Red,
          action: () => {
            console.info('点击了删除')
            this.tasks.splice(index, 1)
            this.handleTaskChange()
          }
        },
      })
    })
  }





}

//引用路由
import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = '欢迎使用Todo'
  @State tips: string = '登录'
  @State text: string = '注册账号'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button(this.tips)
          .width(200)
          .height(60)
          .fontColor(Color.White)
          .fontSize(20)
          .margin({
            top: 20
          })
          .onClick(() => {
            router.pushUrl({
              url: "pages/IndexPage.ets",
              params: {
                data: "从首页带到第二页的数据"
              }
            })
          })
        Button(this.text)
          .width(200)
          .height(60)
          .fontColor(Color.White)
          .fontSize(20)
          .margin({
            top: 20
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}