鸿蒙开发之@State案例

最新推荐文章于 2024-06-24 16:26:20 发布

Lu_Ca

最新推荐文章于 2024-06-24 16:26:20 发布

阅读量508

点赞数 7

分类专栏：鸿蒙开发文章标签：鸿蒙

本文链接：https://blog.csdn.net/Lu_Ca/article/details/134932332

版权

本文介绍了如何基于State构建一个任务管理应用，涉及Stack组件堆叠、数组操作、Checkbox组件、Progress组件表示进度以及处理任务列表的增删改。还提到了开发过程中的问题和解决方案，如复用刷新机制和命名策略。

摘要由CSDN通过智能技术生成

基于@State来创建一个任务管理的案例。

//任务类
class Task {
  static  id: number = 1
  name:string = '任务名称'+Task.id++
  finished:boolean = false
}

//公共卡片样式
@Styles function  card() {
  .width('90%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius:6,color:'#1F00000',offsetX:2,offsetY:4})
}

//扩展Text的样式，完成效果
@Extend(Text) function successd() {
  .decoration({type: TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}


@Entry
@Component
struct  ProgressTask {

  @State totalTasks: number = 0
  @State finishTasks:number = 0
  @State tasks: Task[] = []

  handleTaskNumber() {
    this.totalTasks = this.tasks.length
    this.finishTasks = this.tasks.filter(item =>
      item.finished