picture 0

应用程序-记事本源码

MyNote.ets

import {NewTaskModel, TaskDataModel} from './Models'
import ItemComponent from './ItemComponent'

@Entry
@Component
struct  TaskListIndex{
  private totalData: Array<string> = []  // 待办列表中所有的数据
  @State newTotalData:Array<NewTaskModel>=[
    new NewTaskModel({task:'早起早练',isOk:true}),
    new NewTaskModel({task:'准备早餐',isOk:true}),
    new NewTaskModel({task:'阅读名著',isOk:false}),
    new NewTaskModel({task:'学习ArkTs',isOk:true}),
    new NewTaskModel({task:'玩游戏',isOk:true}),
  ]

  @State newTask:string =''
  @State taskFilterControl:string = 'all'
  @State taskBak:Array<NewTaskModel>=[]

  aboutToAppear(){  // 生命周期之一，目的是初始化数据
    this.taskBak = this.newTotalData
  }

/**
 * 用于数据的过滤
 */
  filterTasks(){
    if (this.taskFilterControl =='all'){
      return this.newTotalData
    }
    else if (this.taskFilterControl == 'todo'){
      return this.newTotalData.filter((item)=>{
        if(!item.isOk) return true
      })
    }
    else if (this.taskFilterControl == 'finish'){
      return this.newTotalData.filter((item)=>{
        if(item.isOk) return true
      })
    }

  }

  build() { // 构建入口的UI界面
    Column({space: 10}) {
      
      Text('待办')
        .fontSize(28)
        .lineHeight(33)
        .fontWeight(FontWeight.Bold)
        .width('80%')
        .margin({
          top: 24,
          bottom: 12
        })
        .textAlign(TextAlign.Start)

      Row({space:30}){
        Button("全部").onClick(()=>{
          this.taskFilterControl='all'
          this.taskBak = this.filterTasks()
        })
        Button("待办").onClick(()=>{
          this.taskFilterControl='todo'
          this.taskBak = this.filterTasks()
          })
        Button("已办").onClick(()=>{
          this.taskFilterControl='finish'
          this.taskBak = this.filterTasks()
          })
      }

      /**
       * 外部自定义组件
       */
      ItemComponent({tasks:$taskBak})

      TextArea({text:this.newTask,placeholder:'请输入新任务'})
        .onChange((value)=>{
          this.newTask = value
        })

      Button('添加任务')
        .onClick(()=>{
          this.newTotalData.push({task:this.newTask, isOk:false})
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}

ItemComponent.etx

自定义组件

import { NewTaskModel } from './Models'
@Builder
function CreateIcon(icon: Resource){
  Image(icon)
    .width(28)
    .height(28)
    .objectFit(ImageFit.Contain)
    .margin(20)
}

@Component
export default  struct ItemComponent{

  // private task_content: string;  // 待办任务的内容
  // @State isComplete: boolean = false // 是否完成该任务的标记
  @Link tasks:Array<NewTaskModel>

  build() { // 构建一个任务的UI界面

    Column({space:10}){
      
      ForEach(this.tasks, (item: NewTaskModel,index)=>{
        
        Row({space:20}) {
          //第一个是图标
          if (item.isOk) {
            CreateIcon($r('app.media.ic_ok'))
          }else{
            CreateIcon($r('app.media.ic_default'))
          }

          // 第二个是文本
          Text(item.task)
            .fontSize(20)
            .fontWeight(500)
            .decoration( {type: item.isOk ? TextDecorationType.LineThrough : TextDecorationType.None })  // 根据任务是否完成确定删除线
            .opacity(item.isOk ? 0.5 : 1)  // 根据任务是否完成来设置透明度

          Button('del').onClick(()=>{
            this.tasks.splice(index,1)
          })

        }
        .borderRadius(24)
        .backgroundColor(Color.White)
        .width('93%')
        .height(65)
        .onClick( ()=> {
          let oldTask = this.tasks[index]
          item.isOk = !item.isOk
          let newTask = new NewTaskModel({task:oldTask.task,isOk:item.isOk})
          this.tasks[index]= newTask

        })
      })

    }


  }
}

Model.ets

// 定义APP中需要用到的数据模型

// export  class TaskDataModel{

//   private tasks: Array<string> = [
//     "早起晨练", // 数组第一个元素：早起晨练
//     "准备早餐", // 数组第二个元素：准备早餐
//     "阅读名著", // 数组第三个元素：阅读名著
//     "学习ArkTS", // 数组第四个元素：学习ArkTS
//     "玩游戏放松一下"
//   ]

//   getData(): Array<string> {
//     return this.tasks
//   }
// }

export class NewTaskModel{
   task:string
   isOk:boolean

  constructor({task:task,isOk:isOk}) {
    this.task = task
    this.isOk = isOk
  }
}