HarmonyOS7 同级分组菜单：用 MenuItemGroup 把菜单分层做得更顺手

发布时间：2026/10/13 14:03:34

HarmonyOS7 同级分组菜单：用 MenuItemGroup 把菜单分层做得更顺手
文章目录前言学习目标一步步理解实现过程关键代码为什么这样写完整代码真实业务里的取舍可以怎么改前言这篇继续聊 HarmonyOS7 里的Menu 同级分组。如果你刚开始学 ArkUI不建议一上来就背属性名那样很容易看完就忘。更好的方式是先搞清楚这个页面想解决什么问题用户做了什么操作代码又是怎么把这个操作反映到界面上的。这个案例的核心是MenuItemGroup它对应的使用场景是菜单分层。我会把它当成一个真实业务里的小模块来拆而不是只贴一段代码结束。读完之后你至少应该能知道这几件事问题答案学什么MenuItemGroup在菜单分层场景里的用法看哪里状态字段、核心组件、事件回调重点信息组织适合谁刚接触 HarmonyOS7 声明式 UI 的同学学习目标先把页面目标说清楚。这个案例不是为了炫技而是展示一个常见交互片段页面上有内容展示有样式区分也有用户操作后的反馈。小白读这类代码时最容易犯的错误是从第一行样式属性开始抠细节结果看了半天不知道页面到底在干什么。我更建议按这个顺序看找到State确认页面有哪些会变化的数据。找到核心组件比如MenuItemGroup看看它接收了哪些参数。找到onChange、onClick或类似回调理解用户操作之后状态怎么变。最后再看颜色、圆角、间距这些样式属性。这样读下来哪怕代码比较长也不会迷路。一步步理解实现过程ArkUI 的声明式 UI 有个特点界面是状态的结果。你不用手动去找某个控件再改它的文本而是改状态框架会根据状态重新刷新相关 UI。在这个案例里布局一般由Column、Row、Scroll、Grid这些容器搭起来。它们负责“东西放在哪里”MenuItemGroup负责“这个功能怎么表现”事件回调负责“用户操作后发生什么”。三者配合起来页面才是完整的。下面这段关键代码可以先看一遍它保留了入口组件和核心逻辑EntryComponentstruct PeerGroupedMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseBuilderbuildMultiMenu(){Menu(){MenuItem({content:一级菜单项A})MenuItem({content:一级菜单项B})MenuItem({content:一级菜单项C})MenuItemGroup({header:更多选项}){MenuItem({content:二级菜单项A})MenuItem({content:二级菜单项B})MenuItem({content:二级菜单项C})}MenuItemGroup({header:其他操作}){关键代码为什么这样写把上面的代码拆开看会更容易理解State是页面的记忆点输入、点击、选择这类变化都会先落到这里。onClick是按钮类交互的入口适合触发切换、清空、提交这类动作。按钮不只是样式组件文案、可用状态和点击反馈都要一起设计。菜单适合收纳低频操作打开状态和关闭回调要保持同步。这里有一个很实用的判断方法如果你删掉某个状态字段页面还是否能表达当前交互如果不能说明这个状态就是业务状态如果删掉只是少了颜色或间距那它更多是视觉层面的东西。对新手来说先区分“业务状态”和“样式配置”很重要。很多页面写乱都是因为把这两类东西混在一起了。完整代码下面是完整代码。文章里的组件名已经换成更贴近业务的英文命名可以直接复制到独立页面里阅读。建议你先跑原样再尝试改一个状态字段或一个样式属性看界面怎么变化。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct PeerGroupedMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseBuilderbuildMultiMenu(){Menu(){MenuItem({content:一级菜单项A})MenuItem({content:一级菜单项B})MenuItem({content:一级菜单项C})MenuItemGroup({header:更多选项}){MenuItem({content:二级菜单项A})MenuItem({content:二级菜单项B})MenuItem({content:二级菜单项C})}MenuItemGroup({header:其他操作}){MenuItem({content:设置})MenuItem({content:关于})MenuItem({content:退出})}MenuItem({content:取消})}}build(){Column(){if(this.isShow){Column({space:14}){Text(同级分组菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(分组菜单).fontSize(15).fontColor(#FFFFFF).backgroundColor(#4ECDC4).borderRadius(8).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,this.buildMultiMenu,{onDisappear:(){this.isMenuOpenfalse}})Text(使用多个 MenuItemGroup 独立分组).fontSize(12).fontColor(SUBTEXT_COLOR)}.width(100%).alignItems(HorizontalAlign.Center).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(同级分组菜单Menu 分组菜单MenuItemGroup 同级分组).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}真实业务里的取舍如果把这个案例放进真实项目我会额外注意这些点命名要清楚状态字段最好能直接看出用途不要都叫value或flag。边界要处理空内容、超长内容、禁用状态、加载状态都要提前考虑。样式要克制颜色和阴影不是越多越好能表达层级就够了。交互要有反馈用户点了、输入了、选择了页面要给出明确变化。这些不是语法问题但会直接影响页面质量。可以怎么改这个案例可以继续往两个方向练。一个方向是改数据把静态内容换成数组或接口返回另一个方向是改交互比如增加清空、重置、禁用、加载中等状态。学 HarmonyOS7 组件时不要只满足于“代码能跑”。能说清楚为什么这么写才算真正理解了这个案例。

相关新闻

HarmonyOS7 分组分割线菜单：用 MenuItemGroup 做好菜单分组

HarmonyOS7 分组分割线菜单：用 MenuItemGroup 做好菜单分组

文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言 这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕 Menu 分组与分割线 展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间…

2026/10/12 13:01:10 阅读更多 →
HarmonyOS7 动态菜单构建器：用 ForEach 做好动态操作

HarmonyOS7 动态菜单构建器：用 ForEach 做好动态操作

文章目录前言先看这个案例解决什么状态为什么这样设计关键代码拆开看完整代码落地时我会怎么改前言 这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕 动态菜单项渲染 展开，重点不是把属性背下来，而是弄清楚状态、…

2026/10/12 13:01:09 阅读更多 →
HarmonyOS7基础字母索引页实战：AlphabetIndexer 基础结构与字母定位逻辑

HarmonyOS7基础字母索引页实战：AlphabetIndexer 基础结构与字母定位逻辑

文章目录前言页面骨架其实比参数更重要看懂状态，比看懂样式更重要真正决定页面行为的是这些函数第一段关键代码：页面是怎么被带起来的第二段关键代码：真正决定交互手感的地方这一页我建议这样上手从示例到项目，中间这几步别省这类…

2026/10/12 14:04:20 阅读更多 →

最新新闻

Java面试如何从“背八股”到“技术深度”？一线模拟面试复盘与追问链解析

Java面试如何从“背八股”到“技术深度”？一线模拟面试复盘与追问链解析

1. 面试官视角的一次模拟：为什么背题高分选手反而被刷有位程序员朋友备考了两个月，把网上能搜到的Java面试题背得滚瓜烂熟，结果在一场模拟面试里连前面十分钟都没撑过。他描述某个项目的技术方案时，堆了一串名词，却说不…

2026/10/13 14:02:53 阅读更多 →
智能体权限安全实战：AI拥有操作能力后，如何守住权限边界？

智能体权限安全实战：AI拥有操作能力后，如何守住权限边界？

最近在做一个Agent项目时，权限配置把我折腾得不轻。模型的对话能力早就不是瓶颈了，真正让人夜里睡不着的是：当AI拿着工具去操作真实系统时，你怎么保证它只做该做的事？这周把一个跨平台的智能体接进内部工单系统试跑&am…

2026/10/13 14:02:53 阅读更多 →
AI落地场景验证的五大基础设施：算力、数据、模型、平台与场景

AI落地场景验证的五大基础设施：算力、数据、模型、平台与场景

最近一年我接触了不少AI落地项目，一个特别明显的感受是：大家终于不再纠结“大模型能不能做这件事”，而是开始纠结“在我们这个场景里，它能不能稳定、可控、划算地用起来”。这两句话之间隔着的那段路，就是场景验证。标…

2026/10/13 14:02:53 阅读更多 →
从HTML网页到可查询知识图谱：规则抽取与可视化实战

从HTML网页到可查询知识图谱：规则抽取与可视化实战

简介：这是一套从非结构化文本自动构造知识图的端到端管道，名为 KnowledgeGraph_Builder，面向 NLP 爱好者、算法工程师及知识图谱研究者。项目借助 spaCy、Stanford CoreNLP、Huggingface Neural Coref 和句子转换器等工具，实现了命…

2026/10/13 14:02:53 阅读更多 →
从大厂面经切入Agent开发：用真实场景重构AI工程能力

从大厂面经切入Agent开发：用真实场景重构AI工程能力

1. 项目概述：这不是刷题，而是一场面向真实工程的Agent能力重构“从面经开始的agent开发学习”——这个标题乍看像程序员求职路上的临时抱佛脚，实则藏着一条被多数人忽略的隐性路径：面经不是终点，而是Agent开发最密集、…

2026/10/13 14:02:53 阅读更多 →
Logstash离线插件安装实战：依赖解析、打包与验证全流程

Logstash离线插件安装实战：依赖解析、打包与验证全流程

1. 为什么Logstash插件必须离线安装——一个被低估的生产环境现实Logstash作为ELK栈中承上启下的数据管道核心，其价值从来不在“能跑起来”，而在于“能在哪跑、怎么稳跑、出问题时能否快速恢复”。我见过太多团队在测试环境用bin/logstash-plugin instal…

2026/10/13 14:01:51 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目，我最大的感受是，大部分坑不是出在技术前沿，而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节，最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了，很难不碰到舵机控制这道坎。做智能小车要转方向，做机械臂要抬关节，做云台要偏航俯仰，背后都是同一个东西在干活：舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”？——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台？或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜？又或者，在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 14:48:49 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →