前言在“海风日记“的 Bottom Sheet 操作菜单中actionItem构建器封装了操作项的 UI 逻辑包括图标、标签、危险色标识和点击回调。本文将从源码出发深入讲解 Builder 构建器的设计模式以及如何通过参数控制不同状态下的样式。一、actionItem 构建器1.1 源码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()) }1.2 参数说明参数类型说明示例iconstringemoji 图标✏️iconBgstring图标背景色#FFF3E0labelstring操作名称编辑日记isDangerboolean是否危险操作falseonTap() void点击回调() router.back()二、危险色标识2.1 颜色控制// 危险操作红色文字 .fontColor(isDanger ? #FF3B30 : #222222) // 危险操作红色图标 SymbolGlyph(item.icon) .fontColor([item.danger ? #D06060 : COLOR_AMBER])2.2 操作项对比操作isDanger图标背景文字颜色编辑日记false#FFF3E0#222222分享日记false#E8F4FF#222222设为私密false#F0F0F5#222222复制文本false#F5FFF0#222222删除日记true#FFF0F0#FF3B30三、构建器的复用3.1 在 Bottom Sheet 中复用Column() { this.actionItem(✏️, #FFF3E0, 编辑日记, false, () { this.showActionSheet false router.pushUrl({ url: pages/diary/EditDiaryPage }) }) Divider().color(#F5F5F5).margin({ left: 54 }) this.actionItem(️, #FFF0F0, 删除日记, true, () { this.showActionSheet false router.back() }) }3.2 危险操作的特殊处理删除操作使用红色文字标注提示用户这是不可逆操作this.actionItem(️, #FFF0F0, 删除日记, true, () { // 先关闭菜单再返回 this.showActionSheet false router.back() })四、常见问题4.1 图标与背景不匹配问题图标背景色与图标不协调。解决方案为每个操作项指定独立的背景色。总结本文通过“海风日记“的 actionItem 构建器深入讲解了可复用构建器的设计Builder 封装UI 逻辑复用危险色标识isDanger 参数控制样式参数化设计图标、背景、标签、颜色、回调复用场景Bottom Sheet 操作菜单下一篇文章将深入讲解日记本横线纸张效果敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Builder 装饰器文档Row 组件文档Text 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
