共分爲三個代碼文件:
/* 定義APP中需要用到的模型 Models.ets */ export class TaskDataModel { private tasks: Array<string> = [ "早起早讀", "準備早餐", "閱讀周易", "學習實踐ArkTS", "玩遊戲放鬆一下", "準備午飯", "午休", "刷劇一下午" ] getData():Array<string> { return this.tasks } } // new TaskDataModel()
/** * 每一項的一個組件 ItemComponent.ets */ import media from '@ohos.multimedia.media' @Component export default struct ItemComponent { private task_content:string // 代辦任務的內容 @State isComplete:boolean = false // 是否完成該任務的標記 @Builder // 構建函數 createIcon(icon:Resource) { Image(icon) .width(28) .height(28) .objectFit(ImageFit.Contain) .margin(20) } build() { // 構建一個任務的UI界面 Row() { // 第一個是圖標 if (this.isComplete) { this.createIcon($r('app.media.ic_ok')) } else { this.createIcon($r('app.media.ic_default')) } // 第二個是文本 Text(this.task_content) .fontSize(20) .fontWeight(500) .decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None}) // 根據任務是否完成決定是否有刪除線 .opacity(this.isComplete ? 0.5 : 1) // 根據任務是否完成來設置透明度 } .borderRadius(24) .backgroundColor(Color.White) .width('93%') .height(65) .onClick(() => { this.isComplete = !this.isComplete }) } }
/** * 構建入口的UI界面 Index.ets */ import {TaskDataModel} from './Models' import ItemComponent from './ItemComponent' @Entry @Component struct TaskListIndex { private totalData: Array<string> = [] // 待辦列表中所有的數據 aboutToAppear() { // 初始化數據 this.totalData = new TaskDataModel().getData() } build() { Column({space: 6}) { Text('待辦') .fontSize(28) .lineHeight(33) .fontWeight(FontWeight.Bold) .width('80%') .margin({ top: 24, bottom: 12 }) .textAlign(TextAlign.Start) // 循環渲染 ForEach(this.totalData, (item:string) => { ItemComponent({task_content: item}) }) } .width('100%') .height('100%') .backgroundColor('#F1F3F5') } }
效果圖如下: