文章目录前言先看这个案例解决什么状态为什么这样设计关键代码拆开看完整代码落地时我会怎么改前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕动态菜单项渲染展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这里更适合从数据驱动角度看。数组变化之后ForEach负责把选项渲染出来。先看这个案例解决什么如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题动态菜单项渲染核心 APIForEach使用场景动态操作文章侧重点数据驱动状态为什么这样设计代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码拆开看先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。interfaceMenuItemConf{title:stringaction:string}EntryComponentstruct DynamicMenuBuilder{StateisShow:booleantrueStateisMenuOpen:booleanfalseStatemenuMode:number0StatelastAction:stringprivatefileMenu:MenuItemConf[][{title:新建,action:新建文件},{title:打开,action:打开文件},{title:保存,action:保存文件}]privateeditMenu:MenuItemConf[][{title:复制,action:复制内容},{title:粘贴,action:粘贴内容},{title:剪切,action:剪切内容}]privateviewMenu:MenuItemConf[][{title:放大,action:放大视图},{title:缩小,action:缩小视图},{title:还原,action:还原大小}]getCurrentMenu():MenuItemConf[]{if(this.menuMode0)returnthis.fileMenu这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。ForEach是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成DynamicMenuBuilder共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AinterfaceMenuItemConf{title:stringaction:string}EntryComponentstruct DynamicMenuBuilder{StateisShow:booleantrueStateisMenuOpen:booleanfalseStatemenuMode:number0StatelastAction:stringprivatefileMenu:MenuItemConf[][{title:新建,action:新建文件},{title:打开,action:打开文件},{title:保存,action:保存文件}]privateeditMenu:MenuItemConf[][{title:复制,action:复制内容},{title:粘贴,action:粘贴内容},{title:剪切,action:剪切内容}]privateviewMenu:MenuItemConf[][{title:放大,action:放大视图},{title:缩小,action:缩小视图},{title:还原,action:还原大小}]getCurrentMenu():MenuItemConf[]{if(this.menuMode0)returnthis.fileMenuif(this.menuMode1)returnthis.editMenureturnthis.viewMenu}getModeLabel():string{if(this.menuMode0)return文件菜单if(this.menuMode1)return编辑菜单return视图菜单}BuilderDynamicMenu(){Menu(){ForEach(this.getCurrentMenu(),(item:MenuItemConf){MenuItem({content:item.title}).onClick((){this.lastActionitem.action})})}}build(){Column(){if(this.isShow){Column({space:14}){Text(动态切换菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Row({space:8}){Button(文件).fontSize(13).fontColor(this.menuMode0?#FFFFFF:#666666).backgroundColor(this.menuMode0?THEME_COLOR:#F0F0F0).borderRadius(6).height(34).padding({left:14,right:14}).onClick((){this.menuMode0})Button(编辑).fontSize(13).fontColor(this.menuMode1?#FFFFFF:#666666).backgroundColor(this.menuMode1?#FF6B6B:#F0F0F0).borderRadius(6).height(34).padding({left:14,right:14}).onClick((){this.menuMode1})Button(视图).fontSize(13).fontColor(this.menuMode2?#FFFFFF:#666666).backgroundColor(this.menuMode2?#6BCB77:#F0F0F0).borderRadius(6).height(34).padding({left:14,right:14}).onClick((){this.menuMode2})}Button(打开${this.getModeLabel()}).fontSize(15).fontColor(#FFFFFF).backgroundColor(#4D96FF).borderRadius(8).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,this.DynamicMenu,{onDisappear:(){this.isMenuOpenfalse}})Text(this.lastAction||切换上方标签菜单会动态变化).fontSize(13).fontColor(this.lastAction?#333333:SUBTEXT_COLOR)}.width(100%).alignItems(HorizontalAlign.Center).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(动态菜单构建器Menu 动态菜单State 驱动菜单项变化).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}落地时我会怎么改继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。
