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

发布时间：2026/10/12 13:01:10

HarmonyOS7 分组分割线菜单：用 MenuItemGroup 做好菜单分组
文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Menu 分组与分割线展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在信息层级上尽量说清楚它在真实页面里有什么用。这个写法的价值如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Menu 分组与分割线核心 APIMenuItemGroup使用场景菜单分组文章侧重点信息层级组件 API 对照代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct GroupedDividerMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseBuilderMenuContent(){Menu(){MenuItemGroup(){MenuItem({content:新建项目})MenuItem({content:打开最近})}MenuItemGroup(){MenuItem({content:保存})MenuItem({content:另存为...})}MenuItemGroup(){这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。MenuItemGroup是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成GroupedDividerMenu共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct GroupedDividerMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalseBuilderMenuContent(){Menu(){MenuItemGroup(){MenuItem({content:新建项目})MenuItem({content:打开最近})}MenuItemGroup(){MenuItem({content:保存})MenuItem({content:另存为...})}MenuItemGroup(){MenuItem({content:页面设置})MenuItem({content:打印})}MenuItemGroup(){MenuItem({content:退出})}}}build(){Column(){if(this.isShow){Column({space:14}){Text(带分割线的菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(打开菜单).fontSize(15).fontColor(#FFFFFF).backgroundColor(#FF6B9D).borderRadius(8).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,this.MenuContent,{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)}}写在最后继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

相关新闻

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

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

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

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

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

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

2026/10/5 4:21:10 阅读更多 →
HarmonyOS7字母索引自定义位置页实战：索引条布局位置与容器适配

HarmonyOS7字母索引自定义位置页实战：索引条布局位置与容器适配

文章目录前言真正值得先看的不是细节代码状态设计这里有点东西代码别平均看，先抓关键方法第一段关键代码：页面是怎么被带起来的第二段关键代码：真正决定交互手感的地方不是只看，最好按这个顺序动手拿去项目里之前，我通…

2026/10/10 19:57:34 阅读更多 →

最新新闻

6.4k Stars！用Claude Code写论文的全套流水线，有人打包开源了：TaoToken统一Key接入实操

6.4k Stars！用Claude Code写论文的全套流水线，有人打包开源了：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 13:01:10 阅读更多 →
Python 读取数据库 BLOB 字段并落地文件：从连接配置到本地存储的完整实践

Python 读取数据库 BLOB 字段并落地文件：从连接配置到本地存储的完整实践

/* 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 13:01:10 阅读更多 →
Composer 算法方法卡片（Algo Card）写作规范与模板指南：从骨架模板到源码级落地

Composer 算法方法卡片（Algo Card）写作规范与模板指南：从骨架模板到源码级落地

深度学习分布式训练模型优化 【免费下载链接】composer Supercharge Your Model Training 项目地址： https://gitcode.com/gh_mirrors/com/composer 点击查看 免费下载 导读 本文以 Composer 仓库中的「算法方法卡片（Algorithm Card）」写作…

2026/10/12 13:01:10 阅读更多 →
Pylint 检查详解：using-generic-type-syntax-in-unsupported-version（W2604）与 PEP 695 泛型语法兼容性

Pylint 检查详解：using-generic-type-syntax-in-unsupported-version（W2604）与 PEP 695 泛型语法兼容性

静态分析代码质量Lint开发工具 【免费下载链接】pylint Its not just a linter that annoys you! 项目地址： https://gitcode.com/gh_mirrors/pyl/pylint 点击查看 免费下载 导读 using-generic-type-syntax-in-unsupported-version（消息码 W2604&…

2026/10/12 13:01:09 阅读更多 →
Dapp-Learning Merkle Distributor Airdrop 实战：NFT/ERC20 空投与链上红包合约全解析

Dapp-Learning Merkle Distributor Airdrop 实战：NFT/ERC20 空投与链上红包合约全解析

示例工程区块链 【免费下载链接】Dapp-Learning Dapp learning project for developers at all stages. Becoming and cultivating sovereign individuals. Nonprofit organization. 项目地址： https://gitcode.com/gh_mirrors/da/Dapp-Learning 点击查看 免费下载 …

2026/10/12 13:01:09 阅读更多 →
机器学习最小可行知识链：从公式到可调试代码的完整实践

机器学习最小可行知识链：从公式到可调试代码的完整实践

简介：本资源是邹博主讲的《机器学习全方位解析：从基础到实践》配套教学包，面向零基础入门者与希望系统夯实理论与工程能力的学习者，解决机器学习概念抽象、代码实践脱节、算法调优无从下手等核心痛点。压缩包共613个文件&#xff…

2026/10/12 13:00:09 阅读更多 →

日新闻

复古胶片颗粒感噪点合成器：Canvas ImageData 像素高斯杂色注入算法

复古胶片颗粒感噪点合成器：Canvas ImageData 像素高斯杂色注入算法

在数码相机、高清显示屏与现代矢量图形技术高度发达的今天，画面可以做到绝对的锐利、平滑与无瑕。然而，当一张秋日手账插画或拍立得照片过于“平整无瑕”时，往往会散发出一种冰冷生硬的“数码塑料感（Digital Plasticity&#xff0…

2026/10/12 0:00:59 阅读更多 →
活字印刷古籍线装排版：Canvas 竖排文字与栏线自适应算法

活字印刷古籍线装排版：Canvas 竖排文字与栏线自适应算法

在现代网页与移动端设计中，横排（Horizontal Layout）早已经成为了绝对的主流。然而，当我们翻开泛黄的线装古籍、宋版木刻诗集，或是欣赏一张茶道雅集的手写便签时，那种**自上而下纵向书写、自右向左逐列铺展&…

2026/10/12 0:00:59 阅读更多 →
周日晚间的“精神松绑减震器”：无压力情绪倾倒箱与温和轻声陪伴

周日晚间的“精神松绑减震器”：无压力情绪倾倒箱与温和轻声陪伴

每到周日的晚上八点到十点，很多人心里都会悄悄亮起一盏警示灯。 在心理学上，这种现象有一个专门的称谓——“周日夜晚焦虑症（Sunday Scaries）”。明天又是周一，闹钟又要重新在七点响彻卧房；脑海里仿佛有一个…

2026/10/12 0:00:59 阅读更多 →

周新闻

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

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

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

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

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

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

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

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

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

2026/10/12 0:16:43 阅读更多 →

月新闻

我发现了一个新思路：用 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/11 10:45:37 阅读更多 →
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/11 14:36:53 阅读更多 →
黑夜航拍船只数据集训练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/11 14:36:54 阅读更多 →