从零开始开发HarmonyOS 6.0 TodoList应用（ArkTS版）
你想要基于HarmonyOS 6.0和ArkTS语言开发一个TodoList（待办清单）应用，这篇文章会从项目搭建、核心功能实现到界面美化，一步步带你完成一个可运行、功能完整的TodoList应用，适合HarmonyOS开发新手学习和实践。 在开始编码前，确保你已完成以下准备： 配置项目信息： 首先定义待办事项的数据结构，创建 修改 核心方法： UI组件： 交互优化： 点击“运行”按钮，应用启动后： 你可以基于此基础版本扩展更多实用功能： 这个TodoList应用覆盖了ArkTS开发的核心知识点（状态管理、组件使用、事件处理），是HarmonyOS新手入门的经典练手项目，你可以直接复制代码运行，也可以根据自己的需求调整界面和功能。从零开始开发HarmonyOS 6.0 TodoList应用（ArkTS版）
一、开发环境准备
二、项目创建
三、核心功能实现
3.1 数据模型定义
model/TodoItem.ets文件：/**
* 待办事项数据模型
*/
export interface TodoItem {
// 唯一标识
id: string;
// 待办内容
content: string;
// 是否完成
isCompleted: boolean;
// 创建时间
createTime: string;
}
/**
* 生成唯一ID
*/
export function generateId(): string {
return Date.now().toString() + Math.random().toString(36).substr(2, 9);
}
/**
* 格式化时间
*/
export function formatTime(time: number): string {
const date = new Date(time);
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}3.2 主页面实现（核心功能）
pages/Index.ets，实现待办事项的添加、删除、状态切换、清空功能：@Entry
@Component
struct TodoListPage {
// 待办事项列表（状态管理）
@State private todoList: TodoItem[] = [];
// 输入框内容
@State private inputContent: string = '';
// 页面标题
private title: string = '我的待办清单';
build() {
Column() {
// 标题区域
Text(this.title)
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ top: 20, bottom: 15 })
.alignSelf(ItemAlign.Center);
// 输入和添加区域
Row({ space: 10 }) {
TextField(this.inputContent, (value: string) => {
this.inputContent = value;
})
.placeholder('请输入待办事项...')
.width('70%')
.height(40)
.border({ width: 1, radius: 8, color: '#E5E5E5' })
.padding({ left: 10 });
Button('添加')
.width('20%')
.height(40)
.backgroundColor('#007DFF')
.fontColor(Color.White)
.borderRadius(8)
.onClick(() => this.addTodoItem());
}
.margin({ bottom: 20 })
.padding({ left: 15, right: 15 });
// 待办事项列表区域
List({ space: 10 }) {
ForEach(this.todoList, (item: TodoItem) => {
ListItem() {
Row({ space: 10 }) {
// 完成状态切换复选框
Checkbox()
.select(item.isCompleted)
.onChange((isChecked: boolean) => {
this.toggleTodoStatus(item.id);
})
.width(20)
.height(20);
// 待办内容（完成时加删除线）
Text(item.content)
.fontSize(16)
.decoration({ type: item.isCompleted ? TextDecorationType.LineThrough : TextDecorationType.None })
.fontColor(item.isCompleted ? '#999999' : '#333333')
.flexGrow(1);
// 创建时间
Text(item.createTime)
.fontSize(12)
.fontColor('#999999')
.width(100);
// 删除按钮
Button('删除')
.width(60)
.height(30)
.backgroundColor('#FF4D4F')
.fontColor(Color.White)
.borderRadius(6)
.fontSize(12)
.onClick(() => this.deleteTodoItem(item.id));
}
.padding(10)
.backgroundColor(Color.White)
.borderRadius(8)
.shadow({ radius: 2, color: '#00000010', offsetX: 0, offsetY: 2 });
}
})
}
.width('100%')
.flexGrow(1)
.padding({ left: 15, right: 15 });
// 清空按钮（有数据时显示）
if (this.todoList.length > 0) {
Button('清空所有待办')
.width('90%')
.height(40)
.backgroundColor('#F5F5F5')
.fontColor('#666666')
.borderRadius(8)
.margin({ top: 10, bottom: 20 })
.onClick(() => this.clearAllTodos());
}
}
.width('100%')
.height('100%')
.backgroundColor('#F8F8F8');
}
/**
* 添加待办事项
*/
private addTodoItem(): void {
// 空内容校验
if (this.inputContent.trim() === '') {
prompt.showToast({ message: '待办内容不能为空！' });
return;
}
// 创建新待办项
const newTodo: TodoItem = {
id: generateId(),
content: this.inputContent.trim(),
isCompleted: false,
createTime: formatTime(Date.now())
};
// 添加到列表
this.todoList.push(newTodo);
// 清空输入框
this.inputContent = '';
}
/**
* 切换待办事项完成状态
* @param id 待办项ID
*/
private toggleTodoStatus(id: string): void {
const index = this.todoList.findIndex(item => item.id === id);
if (index !== -1) {
this.todoList[index].isCompleted = !this.todoList[index].isCompleted;
}
}
/**
* 删除待办事项
* @param id 待办项ID
*/
private deleteTodoItem(id: string): void {
this.todoList = this.todoList.filter(item => item.id !== id);
}
/**
* 清空所有待办事项
*/
private clearAllTodos(): void {
this.todoList = [];
}
}
// 导入数据模型
import { TodoItem, generateId, formatTime } from '../model/TodoItem';
// 导入提示框
import prompt from '@ohos.promptAction';3.3 代码核心解释
@State装饰器管理待办列表（todoList）和输入框内容（inputContent），状态变化会自动触发UI刷新。addTodoItem()：校验输入内容，创建新待办项并添加到列表，清空输入框；toggleTodoStatus()：根据ID切换待办项的完成状态；deleteTodoItem()：根据ID过滤删除指定待办项；clearAllTodos()：清空整个待办列表。TextField：用于输入待办内容；Checkbox：标记待办项是否完成；List + ForEach：循环渲染待办列表；Button：实现添加、删除、清空操作。四、运行效果
五、功能扩展建议（可选）
@ohos.data.preferences将待办数据保存到本地，重启应用不丢失；总结
@State状态管理实现UI与数据的双向绑定，通过List+ForEach渲染动态列表；