ArkUI写的备忘录任务

最新推荐文章于 2024-08-09 21:30:00 发布

清一照

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量188

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_52466163/article/details/140985627

版权

效果
是否完成是用了两张图片
在这里插入图片描述
代码

@Entry
@Component
struct BWLPage {
  @State title: string = '备忘录';
@State tasks:string[] = ['起床','敲代码','睡觉','玩游戏','谈恋爱','打瓦','逗猫','吃饭','看电视']
  build() {
    Column(){
      Column(){
        Text(this.title)
          .fontSize(80)
      }
      .width('100%')
      .height(100)
      List({space:8}){
        ForEach(this.tasks,(item:string,index)=>{
          ListItem() {
            ItemCom({ taskName: item })
          }
        })
      }
      .height('80%')
      .alignListItem(ListItemAlign.Center)
      .scrollBar(BarState.Auto)
      Row(){
        Text('海草笔记')
          .fontSize(20)
      }
      .height(20)
      .padding(9)
    }
  }
}

@Component
struct ItemCom{
  @State taskName:string=''
  @State finished:boolean = false
  build() {
    Row(){
      //选项部分
      Image(this.finished?$r('app.media.bwl_finish_true'):$r('app.media.bwl_finish_false'))
        .width(80)
        .height(80)
      //文字部分
      Text(this.taskName)
        .fontSize(60)
        .fontColor(this.finished? Color.Gray: Color.Black)
        .decoration({
          type:this.finished?TextDecorationType.LineThrough:TextDecorationType.None
        })
    }
    .width('90%')
    .borderRadius('50%')
    .height(80)
    .backgroundColor('#ccc')
    .onClick(() => {
      this.finished = !this.finished
    })
  }
}