文章目录前言交互链路先理清数据和 UI 的对应关系关键实现细节完整代码可以继续扩展的方向前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕ActionSheet 风格操作菜单展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在操作分组上尽量说清楚它在真实页面里有什么用。交互链路先理清如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题ActionSheet 风格操作菜单核心 APIbindMenu使用场景底部操作文章侧重点操作分组数据和 UI 的对应关系代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键实现细节先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct ActionSheetLikeMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseStatesheetResult:stringbuild(){Column(){if(this.isShow){Column({space:14}){Text(底部操作菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(显示操作面板).fontSize(15).fontColor(#FFFFFF).backgroundColor(#FF6B6B).borderRadius(8).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,[{value:编辑资料,action:(){this.sheetResult已选择: 编辑资料}},这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。bindMenu是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成ActionSheetLikeMenu共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct ActionSheetLikeMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseStatesheetResult:stringbuild(){Column(){if(this.isShow){Column({space:14}){Text(底部操作菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(显示操作面板).fontSize(15).fontColor(#FFFFFF).backgroundColor(#FF6B6B).borderRadius(8).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,[{value:编辑资料,action:(){this.sheetResult已选择: 编辑资料}},{value:更改头像,action:(){this.sheetResult已选择: 更改头像}},{value:隐私设置,action:(){this.sheetResult已选择: 隐私设置}},{value:账号管理,action:(){this.sheetResult已选择: 账号管理}},{value:退出登录,action:(){this.sheetResult已选择: 退出登录}},{value:取消,action:(){this.sheetResult已取消}}],{onDisappear:(){this.isMenuOpenfalse}})Text(this.sheetResult||点击按钮弹出操作面板菜单).fontSize(13).fontColor(this.sheetResult?#333333:SUBTEXT_COLOR)Divider().strokeWidth(1).color(#EEEEEE)Text(操作菜单说明).fontSize(12).fontColor(SUBTEXT_COLOR)Text(类似于 iOS ActionSheet 风格从底部弹出操作选项列表适合需要用户选择的场景。常见的操作包括编辑、分享、删除、取消等。).fontSize(13).fontColor(#666666).lineHeight(20)}.width(100%).alignItems(HorizontalAlign.Center).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(操作面板菜单Menu 操作菜单底部弹出操作面板).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}可以继续扩展的方向继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。
