及时做APP开发实战(四)-待办列表UI实现

及时做APP开发实战(四)-待办列表UI实现本文将详细介绍如何在HarmonyOS NEXT中实现待办列表UI以及时做应用为例展示ArkUI声明式开发的最佳实践。一、UI设计理念1.1 设计原则及时做应用遵循HarmonyOS设计语言注重简洁、高效、易用┌─────────────────────────────────────┐ │ 设计原则体系 │ ├─────────────────────────────────────┤ │ 简洁性 │ 减少视觉干扰专注核心功能 │ │ 一致性 │ 统一的交互模式和视觉风格 │ │ 反馈性 │ 及时响应用户操作 │ │ 效率性 │ 最少步骤完成任务 │ └─────────────────────────────────────┘1.2 页面结构规划待办列表页面采用垂直布局从上到下依次为┌────────────────────────────┐ │ 标题栏及时做 │ ├────────────────────────────┤ │ 统计栏进行中/已完成/全部│ ├────────────────────────────┤ │ 输入区输入框 添加按钮│ ├────────────────────────────┤ │ Tab切换全部/进行中/已完成│ ├────────────────────────────┤ │ 待办列表 │ ├────────────────────────────┤ │ 底部导航待办/专注 │ └────────────────────────────┘二、页面结构实现2.1 整体布局使用Column容器实现垂直布局通过Builder装饰器拆分各个组件EntryComponentstruct Index{StatetodoList:TodoItem[][];StateinputText:string;StateactiveTab:number0;StateisLoading:booleantrue;privatetodoViewModel:TodoViewModelnewTodoViewModel();build(){Column(){this.TitleBar()// 标题栏this.StatisticsBar()// 统计信息this.InputArea()// 输入区域this.TabBar()// Tab切换this.TodoList()// 待办列表this.BottomNav()// 底部导航}.width(100%).height(100%).backgroundColor(#F5F5F5)}}2.2 标题栏与统计栏标题栏采用品牌色#FF6B6B统计栏使用三栏布局// 标题栏BuilderTitleBar(){Row(){Text(及时做).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)Blank()Text().fontSize(28)}.width(100%).height(56).padding({left:20,right:20}).backgroundColor(#FF6B6B)}// 统计栏BuilderStatisticsBar(){Row(){Column(){Text(this.todoViewModel.getActiveTodoCount().toString()).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#FF6B6B)Text(进行中).fontSize(12).fontColor(#666666)}.layoutWeight(1)// 已完成和全部列类似...}.width(100%).height(80).backgroundColor(#FFFFFF).margin({top:10}).borderRadius(8)}设计要点品牌色#FF6B6B温暖有活力高度规范56vp符合HarmonyOS导航栏规范数据驱动统计数字从ViewModel实时获取三、核心交互实现3.1 输入与添加输入区域支持两种提交方式点击按钮或回车提交BuilderInputArea(){Row(){TextInput({placeholder:添加新待办...,text:this.inputText}).layoutWeight(1).height(40).backgroundColor(#FFFFFF).borderRadius(20).onChange((value:string){this.inputTextvalue;}).onSubmit((){this.addTodo();// 回车提交})Button(添加).width(70).height(40).backgroundColor(#FF6B6B).fontColor(#FFFFFF).borderRadius(20).margin({left:10}).onClick((){this.addTodo();// 点击提交})}.width(100%).padding({left:15,right:15,top:15,bottom:15}).backgroundColor(#FFFFFF).margin({top:10}).borderRadius(8)}3.2 Tab筛选使用ForEach渲染Tab项通过activeTab状态控制选中样式BuilderTabBar(){Row(){ForEach([全部,进行中,已完成],(tab:string,index:number){Text(tab).fontSize(14).fontColor(this.activeTabindex?#FF6B6B:#666666).fontWeight(this.activeTabindex?FontWeight.Bold:FontWeight.Normal).padding({left:15,right:15,top:8,bottom:8}).backgroundColor(this.activeTabindex?#FFE5E5:#FFFFFF).borderRadius(15).onClick((){this.activeTabindex;})})}.width(100%).justifyContent(FlexAlign.Center).padding({top:10,bottom:10}).backgroundColor(#FFFFFF).margin({top:10}).borderRadius(8)}四、待办列表渲染4.1 列表组件使用List组件渲染待办项支持空状态显示BuilderTodoList(){if(this.getFilteredList().length0){// 空状态Column(){Text().fontSize(60)Text(暂无待办任务).fontSize(16).fontColor(#999999).margin({top:10})}.width(100%).layoutWeight(1).justifyContent(FlexAlign.Center)}else{List(){ForEach(this.getFilteredList(),(todo:TodoItem){ListItem(){this.TodoItem(todo)}.margin({top:10})})}.width(100%).layoutWeight(1).padding({left:15,right:15,bottom:15})}}4.2 待办项组件每个待办项包含复选框、内容、时间和删除按钮BuilderTodoItem(todo:TodoItem){Row(){// 复选框Checkbox().select(todo.completed).selectedColor(#4CAF50).onChange((isChecked:boolean){this.toggleTodo(todo.id);})// 内容区Column(){Text(todo.text).fontSize(16).fontColor(todo.completed?#999999:#333333).decoration({type:todo.completed?TextDecorationType.LineThrough:TextDecorationType.None})Row(){Text(DateTimeUtil.formatDate(todo.createdAt)).fontSize(12).fontColor(#999999)if(todo.pomodoroCount0){Text( ×${todo.pomodoroCount}).fontSize(12).fontColor(#FF6B6B).margin({left:10})}}}.layoutWeight(1)// 删除按钮Button(删除).fontSize(12).height(28).backgroundColor(#FF4444).fontColor(#FFFFFF).borderRadius(14).onClick((){this.deleteTodo(todo.id);})}.width(100%).padding(15).backgroundColor(#FFFFFF).borderRadius(8).shadow({radius:2,color:#E0E0E0,offsetX:0,offsetY:2})}五、底部导航底部导航栏实现页面切换BuilderBottomNav(){Row(){Column(){Text().fontSize(24)Text(待办).fontSize(12).fontColor(this.currentNavIndex0?#FF6B6B:#999999).margin({top:4})}.layoutWeight(1).onClick((){this.currentNavIndex0;})Column(){Text().fontSize(24)Text(专注).fontSize(12).fontColor(this.currentNavIndex1?#FF6B6B:#999999).margin({top:4})}.layoutWeight(1).onClick((){this.goToPomodoro();})}.width(100%).height(60).backgroundColor(#FFFFFF).shadow({radius:4,color:#E0E0E0,offsetX:0,offsetY:-2})}六、小结本文实现了待办列表页面的完整UI包括✅ 标题栏与统计栏✅ 输入与添加功能✅ Tab筛选切换✅ 待办列表渲染✅ 完成状态切换✅ 删除功能✅ 底部导航下一篇将介绍番茄钟计时器UI的实现包括倒计时界面、控制按钮和休息提醒等功能。