Bottom Sheet 操作菜单：@Builder + 遮罩 + 动画实现

前言Bottom Sheet底部操作菜单是移动应用中常见的交互模式用于显示一组操作选项。“海风日记“的日记详情页通过 Bottom Sheet 提供了编辑、分享、设为私密、复制文本和删除等操作。本文将从DiaryDetailPage.ets源码出发深入讲解 Bottom Sheet 的实现包括遮罩层、操作列表、取消按钮和动画效果。一、Bottom Sheet 的完整实现1.1 状态控制Entry Component struct DiaryDetailPage { State showActionSheet: boolean false // 控制显示/隐藏 }1.2 遮罩层Builder actionSheetOverlay() { Stack() { // 遮罩层 Column() .width(100%).height(100%) .backgroundColor(rgba(0,0,0,0.45)) // 半透明黑色 .onClick(() { this.showActionSheet false }) // Bottom Sheet 内容 Column({ space: 8 }) { // 操作列表 Column() { this.actionItem(✏️, #FFF3E0, 编辑日记, false, () { this.showActionSheet false router.pushUrl({ url: pages/diary/EditDiaryPage }) }) Divider().color(#F5F5F5).margin({ left: 54 }) this.actionItem(, #E8F4FF, 分享日记, false, () { this.showActionSheet false }) Divider().color(#F5F5F5).margin({ left: 54 }) this.actionItem(, #F0F0F5, 设为私密, false, () { this.showActionSheet false }) Divider().color(#F5F5F5).margin({ left: 54 }) this.actionItem(, #F5FFF0, 复制文本, false, () { this.showActionSheet false }) this.actionItem(️, #FFF0F0, 删除日记, true, () { this.showActionSheet false router.back() }) } .backgroundColor(#FFFFFF).borderRadius(14) // 取消按钮 Text(取消) .width(100%).fontSize(17).fontColor(COLOR_PRIMARY) .fontWeight(FontWeight.Bold).textAlign(TextAlign.Center) .padding(16).backgroundColor(#FFFFFF).borderRadius(14) .onClick(() { this.showActionSheet false }) } .width(100%).padding({ left: 12, right: 12, bottom: 34 }) } .width(100%).height(100%) }二、操作项构建器Builder actionItem(icon: string, iconBg: string, label: string, isDanger: boolean, onTap: () void) { Row({ space: 14 }) { Text(icon).fontSize(18) .width(36).height(36).textAlign(TextAlign.Center) .backgroundColor(iconBg).borderRadius(9) Text(label) .fontSize(16) .fontColor(isDanger ? #FF3B30 : #222222) .layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)) .fontSize(14).fontColor([#CCCCCC]) } .width(100%).padding({ left: 18, right: 18, top: 16, bottom: 16 }) .onClick(() onTap()) }三、交互逻辑3.1 三种关闭方式// 1. 点击遮罩关闭 Column() .onClick(() { this.showActionSheet false }) // 2. 操作项关闭 this.actionItem(✏️, #FFF3E0, 编辑日记, false, () { this.showActionSheet false // 执行操作 }) // 3. 取消按钮关闭 Text(取消) .onClick(() { this.showActionSheet false })3.2 条件渲染build() { Stack() { // 主内容 Column() { ... } // Bottom Sheet if (this.showActionSheet) { this.actionSheetOverlay() } } }四、常见问题4.1 Bottom Sheet 位置不对问题Bottom Sheet 没有在底部显示。原因缺少padding({ bottom: 34 })适配安全区域。解决方案添加底部安全区域 padding。总结本文通过“海风日记“的 Bottom Sheet深入讲解了操作菜单的实现State 控制显示/隐藏状态遮罩层半透明黑色操作项构建器复用操作项三种关闭方式遮罩、操作、取消下一篇文章将深入讲解actionItem 可复用构建器敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Builder 装饰器文档Stack 容器文档Router 路由文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区