四、harmonyos实现一个待办列表toDoItem

小小婷几

已于 2024-03-28 09:46:33 修改

阅读量180

点赞数 1

分类专栏： harmonyos学习笔记文章标签： harmonyos

于 2024-03-27 17:09:24 首次发布

本文链接：https://blog.csdn.net/qq_40128375/article/details/137083285

版权

harmonyos学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

官方讲的很大概，有些细节得去看源码才能知道，不过还是撸出来一个简易版的的item了

import image from '@ohos.multimedia.image';

@Entry // 表示入口
@Component
struct Index {
  @State isComplete:boolean = false;
  private totalTasks: Array<string> = [];

  aboutToAppear() { // 初始化
    this.totalTasks = [
      "早起晨练",
      "准备早餐",
      "阅读名著",
      "学习ArkTS",
      "看剧放松"
    ]
  }

  build() {
    Row() {
      Column() {
        Text('代办')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff03')
        ForEach(this.totalTasks, (item) => {
          ToDoItem({content: item})
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct ToDoItem {
  private content?:string;
  @State isComplete:boolean = false;

  build() {
    Row() {
      Image($r('app.media.app_icon'))
        .width(30)
      Text(this.content)
        .fontSize(28)
        .fontColor(this.isComplete ? '#FF0000' : '#333')
        .onClick(() => {
          this.isComplete = !this.isComplete;
        })
    }
    .borderRadius(10)
    .backgroundColor('#f1f1f1')
    .width(300)
    .height(30)
  }
}