及时做APP开发实战(十四)-专注页面待办选择优化

本文将介绍如何修复专注页面待办任务只显示5条的BUG，并优化弹窗交互体验。

一、问题分析

1.1 问题现象

┌─────────────────────────────────────┐ │ 选择待办任务 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ ☐ 学习ArkTS基础 │ │ │ │ ☐ 开发及时做APP │ │ │ │ ☐ 写博客文档 │ │ │ │ ☐ 代码优化 │ │ │ │ ☐ 测试功能 │ │ │ └─────────────────────────────┘ │ ← 只显示5条 │ │ │ （实际有10条待办，但看不到） │ └─────────────────────────────────────┘

1.2 问题原因

问题分析： ┌─────────────────────────────────────┐ │ bindSheet height: 400 │ │ ↓ │ │ 弹窗高度固定为400vp │ │ ↓ │ │ List组件可滚动，但弹窗高度不够 │ │ ↓ │ │ ❌ 用户无法看到更多待办 │ └─────────────────────────────────────┘

二、bindSheet弹窗详解

2.1 bindSheet基本用法

@Componentstruct MyComponent{@StateshowSheet:boolean=false;build(){Column(){Button('打开弹窗').onClick(()=>{this.showSheet=true;})}.bindSheet($$this.showSheet,this.MySheet(),{height:400,// 弹窗高度backgroundColor:Color.White,// 背景色dragBar:true,// 拖拽栏onWillDismiss:()=>{// 关闭回调this.showSheet=false;}})}@BuilderMySheet(){Column(){Text('弹窗内容')}}}

2.2 弹窗高度设置

2.3 弹窗高度计算

┌─────────────────────────────────────┐ │ 弹窗高度计算 │ ├─────────────────────────────────────┤ │ 标题栏高度：约50vp │ │ 列表项高度：约60vp │ │ 内边距：约30vp │ │ ───────────────────── │ │ 显示5条：50 + 60×5 + 30 = 380vp │ │ 显示8条：50 + 60×8 + 30 = 560vp │ │ 显示10条：50 + 60×10 + 30 = 680vp │ └─────────────────────────────────────┘

三、解决方案

3.1 修改前代码

.bindSheet($$this.showTodoPicker,this.TodoPickerSheet(),{height:400,// ❌ 高度不够backgroundColor:this.isDarkMode?'#2D2D2D':Color.White,dragBar:true,onWillDismiss:()=>{this.showTodoPicker=false;}})

3.2 修改后代码

.bindSheet($$this.showTodoPicker,this.TodoPickerSheet(),{height:500,// ✅ 增加高度backgroundColor:this.isDarkMode?'#2D2D2D':Color.White,dragBar:true,onWillDismiss:()=>{this.showTodoPicker=false;}})

3.3 弹窗内容优化

@BuilderTodoPickerSheet(){Column(){// 标题栏Row(){Text('选择待办任务').fontSize(20).fontWeight(FontWeight.Bold)Blank()Button('取消').onClick(()=>{this.showTodoPicker=false;})}.width('100%').padding(15)Divider()// 待办列表 - 可滚动List({space:10}){ForEach(this.todoList,(todo:TodoItem)=>{ListItem(){this.TodoItemCard(todo)}},(todo:TodoItem)=>todo.id.toString())}.width('100%').layoutWeight(1)// 占满剩余空间.padding(15)}.width('100%').height('100%')}

四、交互体验优化

4.1 拖拽栏功能

┌─────────────────────────────────────┐ │ 拖拽栏交互 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ ═══════ │ │ ← 拖拽栏（可拖动） │ │ │ │ │ │ 选择待办任务 │ │ │ │ ───────────── │ │ │ │ ☐ 待办1 │ │ │ │ ☐ 待办2 │ │ │ │ ... │ │ │ └─────────────────────────────┘ │ │ │ │ 用户可以： │ │ - 向上拖动：展开弹窗 │ │ - 向下拖动：收起弹窗 │ │ - 拖到底部：关闭弹窗 │ └─────────────────────────────────────┘

4.2 列表滚动优化

List({space:10}){ForEach(this.todoList,(todo:TodoItem)=>{ListItem(){this.TodoItemCard(todo)}})}.width('100%').layoutWeight(1).edgeEffect(EdgeEffect.Spring)// ✅ 添加弹性滚动效果.nestedScroll({// ✅ 嵌套滚动支持scrollForward:NestedScrollMode.PARENT_FIRST,scrollBackward:NestedScrollMode.SELF_FIRST})

4.3 空状态处理

if(this.todoList.length===0){// 空状态提示Column(){Text('暂无可选待办').fontSize(16).fontColor('#999999')Text('请先添加待办任务').fontSize(14).fontColor('#CCCCCC').margin({top:10})Button('去添加').margin({top:20}).onClick(()=>{// 跳转到待办页面})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}else{// 待办列表List(){...}}

五、完整代码示例

5.1 待办选择弹窗

@BuilderTodoPickerSheet(){Column(){// 标题栏Row(){Text('选择待办任务').fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.isDarkMode?'#FFFFFF':'#333333')Blank()Button('取消').fontSize(14).fontColor(this.themeColors.primary).backgroundColor(Color.Transparent).onClick(()=>{this.showTodoPicker=false;})}.width('100%').padding({left:20,right:20,top:15,bottom:15})Divider().color(this.themeColors.border)// 待办列表if(this.todoList.length===0){this.EmptyState()}else{List({space:10}){ForEach(this.todoList,(todo:TodoItem)=>{ListItem(){this.TodoItemCard(todo)}},(todo:TodoItem)=>todo.id.toString())}.width('100%').layoutWeight(1).padding({left:15,right:15,top:10,bottom:10})}}.width('100%').height('100%').backgroundColor(this.isDarkMode?'#2D2D2D':'#F5F5F5')}

5.2 待办卡片

@BuilderTodoItemCard(todo:TodoItem){Row(){// 番茄钟图标Text('🍅').fontSize(24)// 待办信息Column(){Text(todo.text).fontSize(16).fontColor(this.isDarkMode?'#FFFFFF':'#333333').maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})if(todo.pomodoroCount>0){Text(`已完成${todo.pomodoroCount}个番茄钟`).fontSize(12).fontColor(this.isDarkMode?'#AAAAAA':'#999999').margin({top:4})}}.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({left:12})// 选择图标if(this.currentTodo?.id===todo.id){Text('✓').fontSize(20).fontColor(this.themeColors.primary)}}.width('100%').padding(15).backgroundColor(this.isDarkMode?'#3D3D3D':'#FFFFFF').borderRadius(12).onClick(()=>{this.currentTodo=todo;this.showTodoPicker=false;})}

六、总结

本文修复了专注页面待办选择只显示5条的问题，核心要点：

1. 问题原因：弹窗高度固定为400vp，不够显示更多内容
2. 解决方案：增加弹窗高度到500vp
3. 优化建议：添加拖拽栏、滚动效果、空状态处理