2024-02-20 使用ArkTS开发待办列表

ArkTS

ArkTS是由ArkUI框架提供，使用声明式开发范式开发界面。

ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。

运行结果如下：

代码：

import CommonConstants from '../common/constant/CommonConstant';


@Entry
@Component
struct ToDoList {
  totalTasks: Array<string> = [
    '早起晨练',
    '准备早餐',
    '阅读名著',
    '学习ArkTs',
    '看剧放松'
  ]

  build() {
    Column() {
      Text('待办事项')
        .fontSize($r('app.float.title_font_size'))
        .width(CommonConstants.TITLE_WIDTH)
        .fontWeight(FontWeight.Bold)
        .lineHeight($r('app.float.title_font_height'))
        .margin({
          top: $r('app.float.title_margin_top'),
          bottom: $r('app.float.title_margin_bottom')
        })
        .textAlign(TextAlign.Start)
      ForEach(this.totalTasks, (item) => {
        ToDoItem({ content: item })
      })
    }
    .width(CommonConstants.FULL_LENGTH)
    .height(CommonConstants.FULL_LENGTH)
    .backgroundColor($r('app.color.page_background'))
  }
}

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

  @Builder labelIcon(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain)
      .width($r('app.float.checkbox_width'))
      .height($r('app.float.checkbox_width'))
      .margin($r('app.float.checkbox_margin'))
  }

  build() {
    Row() {
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'));
      } else {
        this.labelIcon($r('app.media.ic_default'));
      }

      Text(this.content)
        .fontSize($r('app.float.item_font_size'))
        .fontWeight(CommonConstants.FONT_WEIGHT)
        .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    .borderRadius(CommonConstants.BORDER_RADIUS)
    .backgroundColor($r('app.color.start_window_background'))
    .width(CommonConstants.LIST_DEFAULT_WIDTH)
    .height($r('app.float.list_item_height'))
    .onClick(() => {
      this.isComplete = !this.isComplete;
    })
  }
}