-专注页面待办选择优化)
及时做APP开发实战(十四)-专注页面待办选择优化本文将介绍如何修复专注页面待办任务只显示5条的BUG并优化弹窗交互体验。一、问题分析1.1 问题现象┌─────────────────────────────────────┐ │ 选择待办任务 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ ☐ 学习ArkTS基础 │ │ │ │ ☐ 开发及时做APP │ │ │ │ ☐ 写博客文档 │ │ │ │ ☐ 代码优化 │ │ │ │ ☐ 测试功能 │ │ │ └─────────────────────────────┘ │ ← 只显示5条 │ │ │ 实际有10条待办但看不到 │ └─────────────────────────────────────┘1.2 问题原因问题分析 ┌─────────────────────────────────────┐ │ bindSheet height: 400 │ │ ↓ │ │ 弹窗高度固定为400vp │ │ ↓ │ │ List组件可滚动但弹窗高度不够 │ │ ↓ │ │ ❌ 用户无法看到更多待办 │ └─────────────────────────────────────┘二、bindSheet弹窗详解2.1 bindSheet基本用法Componentstruct MyComponent{StateshowSheet:booleanfalse;build(){Column(){Button(打开弹窗).onClick((){this.showSheettrue;})}.bindSheet($$this.showSheet,this.MySheet(),{height:400,// 弹窗高度backgroundColor:Color.White,// 背景色dragBar:true,// 拖拽栏onWillDismiss:(){// 关闭回调this.showSheetfalse;}})}BuilderMySheet(){Column(){Text(弹窗内容)}}}2.2 弹窗高度设置属性说明推荐值height弹窗高度300-600vpdragBar是否显示拖拽栏truebackgroundColor背景颜色根据主题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.showTodoPickerfalse;}})3.2 修改后代码.bindSheet($$this.showTodoPicker,this.TodoPickerSheet(),{height:500,// ✅ 增加高度backgroundColor:this.isDarkMode?#2D2D2D:Color.White,dragBar:true,onWillDismiss:(){this.showTodoPickerfalse;}})3.3 弹窗内容优化BuilderTodoPickerSheet(){Column(){// 标题栏Row(){Text(选择待办任务).fontSize(20).fontWeight(FontWeight.Bold)Blank()Button(取消).onClick((){this.showTodoPickerfalse;})}.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.length0){// 空状态提示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.showTodoPickerfalse;})}.width(100%).padding({left:20,right:20,top:15,bottom:15})Divider().color(this.themeColors.border)// 待办列表if(this.todoList.length0){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.pomodoroCount0){Text(已完成${todo.pomodoroCount}个番茄钟).fontSize(12).fontColor(this.isDarkMode?#AAAAAA:#999999).margin({top:4})}}.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({left:12})// 选择图标if(this.currentTodo?.idtodo.id){Text(✓).fontSize(20).fontColor(this.themeColors.primary)}}.width(100%).padding(15).backgroundColor(this.isDarkMode?#3D3D3D:#FFFFFF).borderRadius(12).onClick((){this.currentTodotodo;this.showTodoPickerfalse;})}六、总结本文修复了专注页面待办选择只显示5条的问题核心要点问题原因弹窗高度固定为400vp不够显示更多内容解决方案增加弹窗高度到500vp优化建议添加拖拽栏、滚动效果、空状态处理
及时做APP开发实战(十四)-专注页面待办选择优化本文将介绍如何修复专注页面待办任务只显示5条的BUG并优化弹窗交互体验。一、问题分析1.1 问题现象┌─────────────────────────────────────┐ │ 选择待办任务 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ ☐ 学习ArkTS基础 │ │ │ │ ☐ 开发及时做APP │ │ │ │ ☐ 写博客文档 │ │ │ │ ☐ 代码优化 │ │ │ │ ☐ 测试功能 │ │ │ └─────────────────────────────┘ │ ← 只显示5条 │ │ │ 实际有10条待办但看不到 │ └─────────────────────────────────────┘1.2 问题原因问题分析 ┌─────────────────────────────────────┐ │ bindSheet height: 400 │ │ ↓ │ │ 弹窗高度固定为400vp │ │ ↓ │ │ List组件可滚动但弹窗高度不够 │ │ ↓ │ │ ❌ 用户无法看到更多待办 │ └─────────────────────────────────────┘二、bindSheet弹窗详解2.1 bindSheet基本用法Componentstruct MyComponent{StateshowSheet:booleanfalse;build(){Column(){Button(打开弹窗).onClick((){this.showSheettrue;})}.bindSheet($$this.showSheet,this.MySheet(),{height:400,// 弹窗高度backgroundColor:Color.White,// 背景色dragBar:true,// 拖拽栏onWillDismiss:(){// 关闭回调this.showSheetfalse;}})}BuilderMySheet(){Column(){Text(弹窗内容)}}}2.2 弹窗高度设置属性说明推荐值height弹窗高度300-600vpdragBar是否显示拖拽栏truebackgroundColor背景颜色根据主题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.showTodoPickerfalse;}})3.2 修改后代码.bindSheet($$this.showTodoPicker,this.TodoPickerSheet(),{height:500,// ✅ 增加高度backgroundColor:this.isDarkMode?#2D2D2D:Color.White,dragBar:true,onWillDismiss:(){this.showTodoPickerfalse;}})3.3 弹窗内容优化BuilderTodoPickerSheet(){Column(){// 标题栏Row(){Text(选择待办任务).fontSize(20).fontWeight(FontWeight.Bold)Blank()Button(取消).onClick((){this.showTodoPickerfalse;})}.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.length0){// 空状态提示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.showTodoPickerfalse;})}.width(100%).padding({left:20,right:20,top:15,bottom:15})Divider().color(this.themeColors.border)// 待办列表if(this.todoList.length0){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.pomodoroCount0){Text(已完成${todo.pomodoroCount}个番茄钟).fontSize(12).fontColor(this.isDarkMode?#AAAAAA:#999999).margin({top:4})}}.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({left:12})// 选择图标if(this.currentTodo?.idtodo.id){Text(✓).fontSize(20).fontColor(this.themeColors.primary)}}.width(100%).padding(15).backgroundColor(this.isDarkMode?#3D3D3D:#FFFFFF).borderRadius(12).onClick((){this.currentTodotodo;this.showTodoPickerfalse;})}六、总结本文修复了专注页面待办选择只显示5条的问题核心要点问题原因弹窗高度固定为400vp不够显示更多内容解决方案增加弹窗高度到500vp优化建议添加拖拽栏、滚动效果、空状态处理
