企业官网建设流程全解析

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

本文将详细介绍如何在HarmonyOS NEXT中实现待办列表UI，以"及时做"应用为例，展示ArkUI声明式开发的最佳实践。

一、UI设计理念

1.1 设计原则

"及时做"应用遵循HarmonyOS设计语言，注重简洁、高效、易用：

┌─────────────────────────────────────┐ │ 设计原则体系 │ ├─────────────────────────────────────┤ │ 简洁性 │ 减少视觉干扰，专注核心功能 │ │ 一致性 │ 统一的交互模式和视觉风格 │ │ 反馈性 │ 及时响应用户操作 │ │ 效率性 │ 最少步骤完成任务 │ └─────────────────────────────────────┘

1.2 页面结构规划

待办列表页面采用垂直布局，从上到下依次为：

┌────────────────────────────┐ │ 标题栏（及时做 + 🍅） │ ├────────────────────────────┤ │ 统计栏（进行中/已完成/全部）│ ├────────────────────────────┤ │ 输入区（输入框 + 添加按钮）│ ├────────────────────────────┤ │ Tab切换（全部/进行中/已完成）│ ├────────────────────────────┤ │ 待办列表 │ ├────────────────────────────┤ │ 底部导航（待办/专注） │ └────────────────────────────┘

二、页面结构实现

2.1 整体布局

使用Column容器实现垂直布局，通过@Builder装饰器拆分各个组件：

@Entry@Componentstruct Index{@StatetodoList:TodoItem[]=[];@StateinputText:string='';@StateactiveTab:number=0;@StateisLoading:boolean=true;privatetodoViewModel:TodoViewModel=newTodoViewModel();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.inputText=value;}).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.activeTab===index?'#FF6B6B':'#666666').fontWeight(this.activeTab===index?FontWeight.Bold:FontWeight.Normal).padding({left:15,right:15,top:8,bottom:8}).backgroundColor(this.activeTab===index?'#FFE5E5':'#FFFFFF').borderRadius(15).onClick(()=>{this.activeTab=index;})})}.width('100%').justifyContent(FlexAlign.Center).padding({top:10,bottom:10}).backgroundColor('#FFFFFF').margin({top:10}).borderRadius(8)}

四、待办列表渲染

4.1 列表组件

使用List组件渲染待办项，支持空状态显示：

@BuilderTodoList(){if(this.getFilteredList().length===0){// 空状态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.pomodoroCount>0){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.currentNavIndex===0?'#FF6B6B':'#999999').margin({top:4})}.layoutWeight(1).onClick(()=>{this.currentNavIndex=0;})Column(){Text('🍅').fontSize(24)Text('专注').fontSize(12).fontColor(this.currentNavIndex===1?'#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的实现，包括倒计时界面、控制按钮和休息提醒等功能。