HarmonyOS7 多位置触发菜单:用 bindMenu 做好触发位置
文章目录前言适合放在哪些页面里页面结构拆一下核心逻辑说明完整代码最后提醒一句前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕不同位置触发菜单展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在布局对比上尽量说清楚它在真实页面里有什么用。适合放在哪些页面里如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题不同位置触发菜单核心 APIbindMenu使用场景触发位置文章侧重点布局对比页面结构拆一下代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。核心逻辑说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct PositionedMenuTriggers{StateisShow:booleantrueStateisMenuL:booleanfalseStateisMenuR:booleanfalseStateisMenuB:booleanfalsebuild(){Column(){if(this.isShow){Column({space:14}){Text(不同位置触发菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Row(){Button(左侧菜单).fontSize(13).fontColor(#FFFFFF).backgroundColor(#FF6B6B).borderRadius(8).height(36).padding({left:12,right:12}).onClick((){this.isMenuLtrue}).bindMenu(this.isMenuL,[这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。bindMenu是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成PositionedMenuTriggers共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct PositionedMenuTriggers{StateisShow:booleantrueStateisMenuL:booleanfalseStateisMenuR:booleanfalseStateisMenuB:booleanfalsebuild(){Column(){if(this.isShow){Column({space:14}){Text(不同位置触发菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Row(){Button(左侧菜单).fontSize(13).fontColor(#FFFFFF).backgroundColor(#FF6B6B).borderRadius(8).height(36).padding({left:12,right:12}).onClick((){this.isMenuLtrue}).bindMenu(this.isMenuL,[{value:左选项1,action:(){}},{value:左选项2,action:(){}},{value:左选项3,action:(){}},],{onDisappear:(){this.isMenuLfalse}})Blank()Button(右侧菜单).fontSize(13).fontColor(#FFFFFF).backgroundColor(THEME_COLOR).borderRadius(8).height(36).padding({left:12,right:12}).onClick((){this.isMenuRtrue}).bindMenu(this.isMenuR,[{value:右选项1,action:(){}},{value:右选项2,action:(){}},{value:右选项3,action:(){}},],{onDisappear:(){this.isMenuRfalse}})}.width(100%)Divider().strokeWidth(1).color(#EEEEEE)Row(){Text(底部菜单).fontSize(14).fontColor(THEME_COLOR)}.width(100%).height(80).backgroundColor(#F8F8F8).borderRadius(10).justifyContent(FlexAlign.Center).onClick((){this.isMenuBtrue}).bindMenu(this.isMenuB,[{value:底部选项A,action:(){}},{value:底部选项B,action:(){}},{value:底部选项C,action:(){}},],{onDisappear:(){this.isMenuBfalse}})Text(菜单弹出位置跟随触发元素).fontSize(12).fontColor(SUBTEXT_COLOR)}.width(100%).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)}}最后提醒一句继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

相关新闻

Single主题社区贡献指南:如何参与开源项目开发

Single主题社区贡献指南:如何参与开源项目开发

Single主题社区贡献指南:如何参与开源项目开发 【免费下载链接】Single 🎈 一个简洁大气,含夜间模式的 Typecho 博客主题 项目地址: https://gitcode.com/gh_mirrors/si/Single Single是一个简洁大气且含夜间模式的Typecho博客主题&am…

2026/7/25 22:58:59 阅读更多 →
从点云到网格:AtlasNet中Poisson重建与O-CNN算法原理解析

从点云到网格:AtlasNet中Poisson重建与O-CNN算法原理解析

从点云到网格:AtlasNet中Poisson重建与O-CNN算法原理解析 【免费下载链接】AtlasNet This repository contains the source codes for the paper "AtlasNet: A Papier-Mch Approach to Learning 3D Surface Generation ". The network is able to synthes…

2026/7/26 2:36:22 阅读更多 →
多模态搜索指令全解析,从关键词到自然语言提问的7种进阶写法,Kimi官方未公开的Prompt语法手册

多模态搜索指令全解析,从关键词到自然语言提问的7种进阶写法,Kimi官方未公开的Prompt语法手册

更多请点击: https://intelliparadigm.com 第一章:多模态搜索指令的核心原理与Kimi引擎架构 多模态搜索指令的本质在于将自然语言查询、图像特征、音频语义及结构化元数据统一映射至共享语义空间,实现跨模态对齐与联合检索。Kimi引擎采用分…

2026/7/26 1:48:02 阅读更多 →

最新新闻

终极性能对比:DistriFusion vs 传统推理方案,高分辨率生成速度提升3倍的秘密

终极性能对比:DistriFusion vs 传统推理方案,高分辨率生成速度提升3倍的秘密

终极性能对比:DistriFusion vs 传统推理方案,高分辨率生成速度提升3倍的秘密 【免费下载链接】distrifuser [CVPR 2024 Highlight] DistriFusion: Distributed Parallel Inference for High-Resolution Diffusion Models 项目地址: https://gitcode.co…

2026/7/26 17:28:15 阅读更多 →
AI辅助技术写作:消除机械感与提升真实性的实践

AI辅助技术写作:消除机械感与提升真实性的实践

1. 项目背景与核心挑战 去年帮某科技媒体做内容升级时,我们团队发现个有趣现象:读者对AI生成内容的接受度呈现两极分化。技术文档类内容,AI生成接受度高达78%;但深度观点类内容,哪怕只有30%AI参与度,读者信…

2026/7/26 17:28:15 阅读更多 →
AI系统设计中的伦理考量与关键技术实践

AI系统设计中的伦理考量与关键技术实践

1. 项目概述 作为一名长期从事AI系统设计的从业者,我越来越深刻地感受到伦理考量在技术架构中的重要性。这不再是一个可以事后补票的附加题,而是必须从设计之初就融入系统DNA的核心要素。最近在参与几个大型AI项目评审时,我发现许多技术团队对…

2026/7/26 17:28:15 阅读更多 →
BG3ModManager:从模组混乱到游戏秩序,你的博德之门3模组管理革命

BG3ModManager:从模组混乱到游戏秩序,你的博德之门3模组管理革命

BG3ModManager:从模组混乱到游戏秩序,你的博德之门3模组管理革命 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 模组管理、…

2026/7/26 17:28:15 阅读更多 →
C55x IMGLIB图像处理库核心算子深度解析与工程实践

C55x IMGLIB图像处理库核心算子深度解析与工程实践

1. 项目概述:C55x IMGLIB图像处理库的核心价值在嵌入式视觉和数字信号处理领域,性能与资源往往是一对尖锐的矛盾。开发者需要在有限的算力、内存和功耗预算下,实现实时的图像分析与处理。这正是德州仪器(TI)C55x系列DS…

2026/7/26 17:28:14 阅读更多 →
F3D:极速轻量的三维查看器完整指南

F3D:极速轻量的三维查看器完整指南

F3D:极速轻量的三维查看器完整指南 【免费下载链接】f3d Fast and minimalist 3D viewer. 项目地址: https://gitcode.com/GitHub_Trending/f3/f3d 您是否曾经因为打开一个3D模型而等待数分钟?或者因为复杂的3D软件界面而感到困惑?F3D…

2026/7/26 17:27:14 阅读更多 →

日新闻

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 数据集6000张 完整源码已标注数据集训练好的模型环境配置教程程序运行说明文档,可以直接使用!系统支持图片、视频、摄像头等多种方式检测裂缝,功能强大实用。 1数据集6000张 8各类别

2026/7/26 0:00:31 阅读更多 →
深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

pubg数据集 精选原图1.42万数据 1.49万标签 无任何重复、算法增强或冗余图像! pubg绝地求生目标检测数据集 1分类:e_body,14905个标签,txt格式 共计14244张图,99%为640*640尺寸图像 适合yolo目标检测、AI训练关键词&am…

2026/7/26 0:00:31 阅读更多 →
Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别: allies enemy tag图片总量:7247张训练集:5139张验证集:1425张测试集:683张标注状态:全部已标注,即拿即用数据格式:支持YOLO格式及其他格式&#…

2026/7/26 0:00:31 阅读更多 →

周新闻

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 数据集6000张 完整源码已标注数据集训练好的模型环境配置教程程序运行说明文档,可以直接使用!系统支持图片、视频、摄像头等多种方式检测裂缝,功能强大实用。 1数据集6000张 8各类别

2026/7/26 0:00:31 阅读更多 →
深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

pubg数据集 精选原图1.42万数据 1.49万标签 无任何重复、算法增强或冗余图像! pubg绝地求生目标检测数据集 1分类:e_body,14905个标签,txt格式 共计14244张图,99%为640*640尺寸图像 适合yolo目标检测、AI训练关键词&am…

2026/7/26 0:00:31 阅读更多 →
Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别: allies enemy tag图片总量:7247张训练集:5139张验证集:1425张测试集:683张标注状态:全部已标注,即拿即用数据格式:支持YOLO格式及其他格式&#…

2026/7/26 0:00:31 阅读更多 →

月新闻