本案例演示了如何使用 ArkTS 语言构建一个简单的待办事项应用，包含添加、展示和删除功能。

1. 核心代码解析

这段代码定义了一个自定义组件 HelloWorld，使用了状态管理 @State 来实现数据的响应式更新。

// @Entry 设置页面入口组件
// @Component 定义自定义组件
@Component
struct HelloWorld {
  // @State 定义状态变量，用于存储待办事项列表
  // 初始化包含三条数据：'买水果', '写作业', '学鸿蒙'
  @State todoList: string[] = ['买水果', '写作业', '学鸿蒙']
  
  // @State 定义状态变量，用于双向绑定输入框内容
  @State inputText: string = ''

  build() {
    // 根组件设置为 Column（垂直布局）
    Column() {
      // 使用 Row（水平布局）构建输入与添加区域
      Row() {
        // 输入框组件，提示文字为“请输入待办事项”
        TextInput({ placeholder: '请输入待办事项' })
          .width('70%')
          // 监听输入变化，实时更新 inputText 状态
          .onChange((value: string) => {
            this.inputText = value
          })

        // 添加按钮
        Button('添加')
          .margin({ left: 10 })
          // 点击事件处理
          .onClick(() => {
            // 将输入框内容添加到列表数组末尾
            this.todoList.push(this.inputText)
            // 清空输入框
            this.inputText = ''
          })
      }
      // 设置底部外边距，与下方列表保持距离
      .margin({ bottom: 20 })

      // 列表区域：使用 ForEach 遍历 todoList 数组
      ForEach(this.todoList, (item: string, index: number) => {
        Row() {
          // 显示待办事项文本，设置字体大小
          Text(item)
            .fontSize(20)

          // 占位组件，用于填充空间，将按钮推至右侧
          Blank()

          // 删除按钮
          Button('删除')
            .fontSize(14)
            // 点击事件处理
            .onClick(() => {
              // 根据索引删除数组中的对应项
              this.todoList.splice(index, 1)
            })
        }
        // 设置行宽和顶部外边距
        .width('100%')
        .margin({ top: 10 })
      })

    }
    // 设置根容器的宽高和内边距
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

2. 代码逻辑说明表

为了更清晰地理解代码结构，以下是关键部分的逻辑对照表：

3. 运行结果展示

根据代码逻辑，应用运行后的界面效果如下：

1. 顶部区域：显示一个占位 70% 宽度的输入框和一个“添加”按钮。
2. 列表区域：显示三条初始化数据（买水果、写作业、学鸿蒙），每条数据右侧都有一个“删除”按钮。
3. 交互效果：
   • 在输入框输入内容并点击“添加”，新内容会出现在列表底部。
   • 点击任意列表项的“删除”按钮，该行内容会立即消失。

界面示意图