Codelabs

Codelabs 是华为开发者学堂提供的教程资源，可以通过案例学习鸿蒙开发

本篇是本人 Codelabs 学习记录

待办列表

代码结构

├──entry/src/main/ets                   // ArkTS代码区
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets         // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口类
│  ├──pages
│  │  └──ToDoListPage.ets               // 主页面
│  ├──view
│  │  └──ToDoItem.ets                   // 自定义单项待办组件
│  └──viewmodel
│     └──DataModel.ets                  // 列表数据获取文件
└──entry/src/main/resources         // 资源文件目录

实现过程

教程源码中将公共样式常量（如外边距、边框圆角、行高）统一放在了 common\constants\CommonConstants.ets 中进行调用，在这里我们省略这一步。

自定义单项待办组件 | ToDoItem.ets

view\ToDoItem.ets

@Component
export default struct ToDoItem { // export default 默认导出
  private content?: string;

  // 使用 @State 修饰参数 isComplete 来管理当前事项的完成状态
  @State isComplete: boolean = false;

  // 可复用的勾选图标元素, 使用 @Builder 所装饰的函数, 即自定义构建函数
  @Builder labelIcon(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain) // 设置图片填充效果为 Contain, 即图片完全显示在显示边界内
      .width('28vp')
      .height('28vp')
      .margin('20vp')
  }

  build() {
    // 沿水平方向布局容器 Row
    Row() {
      // if/else 渲染 labelIcon
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok')) // app.media 指向 \resources\base\media
      } else {
        this.labelIcon($r('app.media.ic_default'))
      }
      // 文本
      Text(this.content)
        .fontSize('20fp')
        .fontWeight(500)
        // 设置透明度
        .opacity(this.isComplete ? 0.4 :1)
        // 设置文本装饰线样式, 当 isComplete 为 true 时设置为穿过文本的修饰线
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None})
    }
    // 设置边框圆角
    .borderRadius(24)
    // 背景颜色
    .backgroundColor('#FFFFFF')
    .width('93.3%')
    .height('64vp')
    // 设置点击事件, 更改 isComplete 真值
    .onClick(() => {
      this.isComplete = !this.isComplete;
    })
  }
}

主页面 | ToDoListPage.ets

pages\ToDoListPage.ets ，将原有的 index.ets 改名，

然后将 entryability\EntryAbility.ets 中 windowStage.loadContent 方法的第一个参数修改为pages/ToDoListPage，即：

onWindowStageCreate(windowStage: window.WindowStage): void {
    // ...
    windowStage.loadContent('pages/ToDoListPage', (err) => {
      // ...
    });
  }

该参数指定启动页面。

其中 ToDoListPage.ets:

// 导入 ToDoItem 子组件
import ToDoItem from '../view/ToDoItem'

@Entry
@Component
@Preview
struct ToDoListPage {
  // 待办任务数组
  private totalTasks: Array<string> = [];

  // 在 aboutToAppear 函数中改变状态变量, 更改将在后续执行 build() 函数中生效。
  // 在这我们跳过请求数据的步骤, 直接写入值
  aboutToAppear(): void {
    this.totalTasks = [
      "早起晨练",
      "准备早餐",
      "阅读名著",
      "学习ArkTS",
      "看剧放松"
    ];
  }

  build() {
    // 沿垂直方向布局的容器 Column
    // 其中 space 参数为纵向布局元素的垂直方向间距。
    Column({ space: 16 }) {
      // 标题
      Text('待办')
        .fontSize('28fp')
        .fontWeight(FontWeight.Bold)
        .lineHeight('33vp') // 行高
        .width('80%')
        // 外边距
        .margin({
          top: '24vp',
          bottom: '12vp'
        })
        // 文本左对齐
        .textAlign(TextAlign.Start)

      // 循环渲染 ToDoItem 组件, 其中参数分别为数据源, 组件生成函数, 键值生成函数(可选)
      ForEach(this.totalTasks, (item: string) => {
        ToDoItem({ content: item })
      }, (item: string) => JSON.stringify(item))
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}

运行效果

来自鸿蒙模拟器（HarmonyOS Emulator）Beta，HarmonyOS NEXT Developer Beta2