任务列表,功能实现新增任务,任务进度,完成的任务数和总任务数,勾选完成任务以及删除任务。

功能实现新增任务,任务进度,完成的任务数和总任务数,勾选完成任务以及删除任务。

HarmonyOS
2024-05-26 13:58:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fanyu0803

使用的核心API

就是一些基础的组件,以及函数的抽离,提高复用性以及代码的简单性。

核心代码解释

//任务类 
class Task { 
  static id: number = 1 
  //任务名称 
  name: string = "任务" 
  //任务状态:是否完成 
  finished: boolean = false 
} 
 
//统一的卡片格式 
@Styles 
function card() { 
  .width('95%') 
  .padding(20) 
  .backgroundColor(Color.White) 
  .borderRadius(15) 
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 }) 
} 
 
@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(i => i.finished).length 
  } 
 
  build() { 
    Row() { 
      Column({ space: 10 }) { 
        //任务进度卡片 
        Row() { 
 
          Text('任务进度: ') 
            .fontSize(30) 
            .fontWeight(FontWeight.Bold) 
          Stack() { 
            Progress({ 
              value: this.finishTask, 
              total: this.totalTask, 
              type: ProgressType.Ring 
            }).width(100) 
            Row() { 
              Text(this.finishTask.toString()) 
                .fontSize(24) 
                .fontColor('#36D') 
              Text(' / ' + this.totalTask.toString()) 
                .fontSize(24) 
                .fontColor('#36D') 
            } 
          } 
        } 
 
        //新增任务按钮 
        Button('新增任务') 
          .width(200) 
          .onClick(() => { 
            this.tasks.push(new Task()) 
            this.handleTaskChange() 
          }) 
        //任务列表 
 
        List({ space: 10 }) { 
          ForEach( 
            this.tasks, 
            (i: Task, index) => { 
              ListItem() { 
                Row() { 
                  Text(i.name) 
                    .fontSize(20) 
                  Checkbox() 
                    .select(i.finished) 
                    .onChange(val => { 
                      i.finished = val 
                      this.handleTaskChange() 
                    }) 
                }.card() 
                .justifyContent(FlexAlign.SpaceBetween) 
              } 
              .swipeAction({ end: this.deleteButton(index) }) 
            } 
          ) 
        } 
        .width('100%') 
        .layoutWeight(1) 
        .alignListItem(ListItemAlign.Center) 
      } 
      .width('100%') 
      .height('100%') 
      .backgroundColor('#F1F2F3') 
    } 
  } 
 
  @Builder 
  deleteButton(index: number) { 
    Button() { 
      Image($r('app.media.delete')) 
        .fillColor(Color.White) 
        .width(20) 
    } 
    .width(40) 
    .height(40) 
    .type(ButtonType.Circle) 
 
    .margin(15) 
    .onClick(() => { 
      this.tasks.splice(index, 1) 
      this.handleTaskChange() 
    }) 
  } 
}

实现效果


分享
微博
QQ
微信
回复
2024-05-27 16:28:42
相关问题
编译打包流程任务编排
366浏览 • 1回复 待解决
线程信息以及线程任务栈如何获取
673浏览 • 1回复 待解决
如何申请多个长时任务
881浏览 • 1回复 待解决
TaskPoolWorker中任务调度机制
823浏览 • 1回复 待解决
后台长时任务启动失败
911浏览 • 1回复 待解决
如何利用taskpool执行多任务
899浏览 • 1回复 待解决
如何实现定时任务有懂吗?
1432浏览 • 1回复 待解决
HarmonyOS线程池周期执行任务
374浏览 • 1回复 待解决
延迟任务什么时候会执行
676浏览 • 1回复 待解决
音频播放长时任务不生效
701浏览 • 1回复 待解决
taskpool异步任务支持串行处理方法
483浏览 • 1回复 待解决
如何确认延迟任务是否申请成功
860浏览 • 1回复 待解决
自定义构建任务写入文件
381浏览 • 1回复 待解决
请问用什么接口可以实现定时任务
593浏览 • 0回复 待解决
如何设置组件定时任务定时器
76浏览 • 1回复 待解决
编译构建怎么编写自定义任务
275浏览 • 1回复 待解决
自定义hvigor任务,定制编译产物
446浏览 • 1回复 待解决
ets 开发中是否拥有长驻任务能力?
1838浏览 • 0回复 待解决
智能穿戴如何启用后台任务?
1472浏览 • 1回复 待解决
延迟任务执行时机及运行线程
1005浏览 • 1回复 待解决
BearPi-HM_Nano IIC整个任务卡死
4080浏览 • 1回复 待解决