HarmonyOS ArkTS 的新手练手样例：用 List 和 ForEach 做一个待办列表

开头很多应用都绕不开列表消息列表、商品列表、设置项、文章列表、任务列表。ArkTS 里可以用List和ListItem展示列表用ForEach根据数组生成重复界面。这一篇我们做一个待办列表输入任务点击添加下面列表自动多一条。本篇目标会用数组保存列表数据。会用ForEach渲染多条内容。会用List和ListItem组织列表。会删除列表中的某一项。示例代码interfaceTodoItem{id:number;title:string;done:boolean;}EntryComponentstruct TodoPage{StateinputText:string;Statetodos:TodoItem[][{id:1,title:学习 Text 和 Button,done:true},{id:2,title:练习 TextInput,done:false}];privatenextId:number3;privateaddTodo(){consttitlethis.inputText.trim();if(title.length0){return;}this.todos[...this.todos,{id:this.nextId,title,done:false}];this.nextId1;this.inputText;}privateremoveTodo(id:number){this.todosthis.todos.filter((item:TodoItem)item.id!id);}build(){Column({space:16}){Text(我的待办).fontSize(28).fontWeight(FontWeight.Bold).width(100%)Row({space:8}){TextInput({placeholder:输入一个新任务,text:this.inputText}).layoutWeight(1).height(44).onChange((value:string){this.inputTextvalue;})Button(添加).height(44).onClick((){this.addTodo();})}List({space:10}){ForEach(this.todos,(item:TodoItem){ListItem(){Row({space:12}){Text(item.done?已完成:未完成).fontSize(12).fontColor(item.done?#008A45:#666666)Text(item.title).fontSize(16).layoutWeight(1).decoration({type:item.done?TextDecorationType.LineThrough:TextDecorationType.None})Button(删除).height(32).onClick((){this.removeTodo(item.id);})}.width(100%).padding(12).borderRadius(8).backgroundColor(#F5F5F5)}},(item:TodoItem)item.id.toString())}.layoutWeight(1).width(100%)}.width(100%).height(100%).padding(20)}}小白看懂代码todos是待办数组。列表页面一般都离不开数组。ForEach(this.todos, ...)表示根据todos数组生成多条列表项。ListItem()是列表中的一行。每一行里又放了一个Row左边是状态中间是任务标题右边是删除按钮。添加任务时没有直接pushthis.todos[...this.todos,{id:this.nextId,title,done:false}];这样写更符合声明式 UI 的思路生成一个新的数组再赋值给状态。删除任务时用filterthis.todosthis.todos.filter((item:TodoItem)item.id!id);意思是保留所有id不等于目标值的任务。为什么 ForEach 需要 key代码最后有一段(item:TodoItem)item.id.toString()这就是列表项的唯一标识。列表新增、删除、刷新时框架需要知道“哪一条是哪一条”。实际项目中不要用重复值当 key。可以怎么改可以给每条任务加一个完成按钮Button(item.done?恢复:完成).height(32).onClick((){this.todosthis.todos.map((todo:TodoItem){if(todo.iditem.id){return{id:todo.id,title:todo.title,done:!todo.done};}returntodo;});})也可以把待办列表改成文章列表、课程列表、商品列表。只要是“数组数据变成多行界面”都可以先从这个例子改。本篇小结列表的核心不是List本身而是“数据数组 ForEach 渲染 唯一 key”。新手先把新增、删除跑通再去学复杂的列表刷新、分页、懒加载会轻松很多。附录项目设置与构建问题记录一、项目设置本篇配套一个独立 ArkTS 示例 App用于运行页面和截图建议用 DevEco Studio 打开项目后运行entry模块。项目定位是截图练习 Demo不依赖后端服务也不需要额外权限。建议新建或检查工程时保持以下设置Project typeApplication。TemplateEmpty Ability。LanguageArkTS。ModelStage。DevicePhone可按需要兼容 Tablet、2in1。Runtime OSHarmonyOS。二、SDK 版本本文主题面向 HarmonyOS ArkTS API 24。本次示例工程根目录build-profile.json5使用如下配置{ compatibleSdkVersion: 6.1.1(24), targetSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS }如果本机 DevEco Studio SDK Manager 中安装的版本不同请按本机实际 API 24 SDK 调整compatibleSdkVersion和targetSdkVersion。三、项目目录说明核心目录如下HarmonyOS_ArkTS_API24_ControlsScreenshotApp/ ├── AppScope/ │ ├── app.json5 │ └── resources/ ├── entry/ │ ├── src/main/ets/entryability/EntryAbility.ets │ ├── src/main/ets/pages/ │ ├── src/main/resources/base/profile/main_pages.json │ ├── build-profile.json5 │ └── oh-package.json5 ├── build-profile.json5 ├── hvigorfile.ts └── oh-package.json5页面文件都在entry/src/main/ets/pages/路由注册文件在entry/src/main/resources/base/profile/main_pages.json五、创建项目过程打开 DevEco Studio。点击 Create Project。选择 Application。模板选择 Empty Ability。开发语言选择 ArkTS。模型选择 Stage。设置项目名称例如ArkTSControlsDemo。选择保存路径建议路径只包含英文、数字、下划线或连字符。选择 API 24 对应 SDK。点击 Finish等待工程创建完成。打开entry/src/main/ets/pages/Index.ets。运行默认工程确认模拟器或真机能打开。再逐个添加本文中的页面代码并截图。六、本次编译安装遇到的问题与解决办法1. 中文路径导致 Hvigor 拒绝构建问题现象Invalid project path. Current path does not match: D:\私人资料\CSDN\HarmonyOS_ArkTS_API24_ControlsScreenshotApp原因Hvigor 对工程路径有限制路径只能包含英文字母、数字、连字符、下划线、英文句点、英文括号、空格或。处理办法把项目复制到 ASCII 路径后构建D:\\HarmonyOS_ArkTS_API24_ControlsScreenshotApp2.DEVECO_SDK_HOME环境变量无效问题现象Invalid value of DEVECO_SDK_HOME in the system environment path.处理办法在当前命令会话中临时指定 DevEco SDK 根目录$env:DEVECO_SDK_HOMED:\Program Files\Huawei\DevEco Studio Beta\sdk3.hvigor-config.json5缺少dependencies问题现象Schema validate failed ... missingProperty: dependencies处理办法补齐hvigor/hvigor-config.json5{ modelVersion: 5.0.0, dependencies: { } }4. 打包阶段找不到 Java问题现象spawn java ENOENT处理办法使用 DevEco Studio 自带 JBR并停止旧的 Hvigor daemon 后重新构建$env:JAVA_HOMED:\Program Files\Huawei\DevEco Studio Beta\jbr$env:PathD:\Program Files\Huawei\DevEco Studio Beta\jbr\bin;$env:Pathhvigorw--stop-daemon5. 构建成功但有弃用警告构建时出现过router.pushUrl、router.back、AlertDialog.show的弃用警告但不影响本次截图 Demo 编译和安装。正式项目建议后续按当前 API 推荐方式替换。七、本次安装启动记录构建命令hvigorw--mode module-p moduleentrydefault-p productdefault assembleHap安装命令hdc install entry-default-unsigned.hap启动命令hdc shell aastart-a EntryAbility-b com.csdn.arkts.controls.screenshot验证结果HAP 构建成功。模拟器目标127.0.0.1:5555。安装结果install bundle successfully。启动结果start ability successfully。