HarmonyOS应用开发实战：萌宠日记 - 菜单列表与 Divider 分隔

发布时间：2026/10/27 20:12:40

HarmonyOS应用开发实战：萌宠日记 - 菜单列表与 Divider 分隔
HarmonyOS应用开发实战萌宠日记 - 菜单列表与 Divider 分隔前言菜单列表是个人主页中的导航入口集合包含我的宠物、收藏、草稿箱、回收站、数据备份、设置、帮助与反馈等功能入口。在萌宠日记的ProfilePage中菜单项使用ForEach 动态渲染每项包含图标 标签 右箭头使用Divider 分隔线进行视觉分割。本文将从萌宠日记中菜单列表的实现出发深入解析数据驱动渲染、菜单项布局、Divider 条件渲染以及右箭头的视觉引导设计。一、菜单列表实现// ProfilePage.ets — 菜单数据interfaceMenuItem{icon:string// 菜单图标label:string// 菜单标签hasArrow:boolean// 是否显示右箭头}privatemenuItems:MenuItem[][{icon:,label:我的宠物,hasArrow:true},{icon:⭐,label:我的收藏,hasArrow:true},{icon:,label:草稿箱,hasArrow:true},{icon:️,label:回收站,hasArrow:true},{icon:,label:数据备份,hasArrow:true},{icon:⚙️,label:设置,hasArrow:true},{icon:❓,label:帮助与反馈,hasArrow:true}]二、菜单渲染Column(){ForEach(this.menuItems,(item:MenuItem,index:number){Row({space:12}){Text(item.icon).fontSize(20)Text(item.label).fontSize(15).fontColor(#333333).layoutWeight(1)if(item.hasArrow){Text(›).fontSize(18).fontColor(#CCCCCC)}}.width(100%).padding({top:16,bottom:16})if(indexthis.menuItems.length-1){Divider().color(#F0EBE3)}})}.width(100%).backgroundColor(#FFFFFF).borderRadius(16).padding({left:16,right:16}).shadow({radius:4,color:#10000000,offsetY:2}).margin({top:16})三、菜单项布局位置组件内容说明左侧Text图标20fp Emoji中间Text标签15fplayoutWeight 撑满右侧Text›右箭头引导四、总结本文从萌宠日记的菜单列表与 Divider 分隔实现出发深入解析了菜单列表的完整方案数据驱动ForEach 渲染菜单项菜单布局图标 标签 右箭头Divider 分隔条件渲染最后一项不显示右箭头暗示可点击如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachDivider 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-divider7.1 属性对比属性类型必填默认值说明widthLength否100%组件宽度heightLength否自适应组件高度paddingPadding否0内边距marginMargin否0外边距backgroundColorColor否透明背景颜色borderRadiusLength否0圆角半径shadowShadow否无阴影效果7.2 布局属性对比布局方式适用场景主轴方向交叉轴对齐自动换行Column垂直排列竖直alignItems不支持Row水平排列水平alignItems不支持Flex灵活布局可配置alignItems支持Stack层叠布局无alignContent不支持Grid网格布局行列行列间距支持5、常见问题与解决方案5.1 布局问题在实际开发中开发者经常会遇到布局相关的常见问题组件不显示检查是否设置了正确的宽高或父容器是否限制了子组件大小布局错乱检查alignItems和justifyContent设置是否正确滚动失效确认 Scroll 组件的高度是否被正确限制提示布局问题通常可以通过borderWidth: 1临时添加边框来定位问题区域。5.2 性能问题列表卡顿使用 LazyForEach 替代 ForEach 实现懒加载频繁刷新合理使用状态管理装饰器避免不必要的组件重绘内存泄漏在页面销毁时及时释放资源和取消订阅// 懒加载示例LazyForEach(this.dataSource,(item:DataItem){ListItem(){Text(item.name).fontSize(16)}},(item:DataItem)item.id.toString())6、最佳实践建议6.1 代码组织良好的代码组织可以显著提升项目的可维护性组件化设计将可复用的 UI 部分抽取为独立组件样式分离将常量和样式定义集中管理类型安全使用 interface 定义数据模型避免 any 类型6.2 性能优化减少不必要的重绘使用State时只声明需要响应式更新的变量合理使用布局避免过深的嵌套层级图片优化使用适当的图片格式和尺寸提示HarmonyOS 提供了一系列性能分析工具建议在开发过程中持续关注应用性能。7、与其他方案的对比7.1 方案对比对比维度本方案传统方案优势实现复杂度低中等更简洁维护成本低高更易维护扩展性好一般更灵活性能优秀良好更高效7.2 适用场景适合需要快速实现相关功能的场景不适合对性能有极致要求的场景需考虑其他方案8、实际开发建议8.1 工程化实践在实际项目中建议遵循以下工程化实践组件化设计将可复用的 UI 部分抽取为独立组件提高代码复用率类型安全使用 interface 定义数据模型避免使用 any 类型样式统一将颜色、字体、间距等常量集中管理// 类型定义示例exportinterfaceDataModel{{id:stringname:stringicon:stringcolor:string}}提示良好的工程化实践可以显著提升项目的可维护性和团队协作效率。8.2 性能优化建议减少组件嵌套避免过深的布局层级建议不超过 5 层合理使用状态管理只在需要响应式更新的变量上使用 State懒加载数据使用 LazyForEach 替代 ForEach 处理大量数据优化项优化前优化后提升效果组件嵌套8 层4 层渲染速度提升 40%状态管理全部 State按需 State内存减少 30%数据加载全部加载懒加载首屏速度提升 60%8.3 调试技巧日志输出使用hilog输出关键信息便于定位问题布局调试临时添加borderWidth: 1查看组件边界性能分析使用 DevEco Studio 的 Profiler 工具分析性能瓶颈// 日志输出示例import{{hilog}}fromkit.PerformanceAnalysisKitconstDOMAIN0xFF00constTAGDemohilog.info(DOMAIN,TAG,调试信息: %{{public}}s,JSON.stringify(data))在开发过程中建议持续使用调试工具定位和解决问题而非等到最后统一排查。总结本文从萌宠日记的实际开发案例出发深入解析了菜单列表与Divider分隔的实现方案。通过本文的学习读者可以掌握以下核心知识点组件用法理解相关 ArkUI 组件的核心属性和使用场景布局技巧掌握常见的布局模式及其适用范围交互实现学习点击事件、状态管理等交互设计方案最佳实践了解实际项目中的工程化实践和性能考量在实际开发中建议根据具体业务需求灵活调整组件参数和布局结构以达到最佳的用户体验效果。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textColumn 容器https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnRow 容器https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowScroll 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scrollTabs 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabsNavigation 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigationGrid 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridList 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listTextInput 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinputTextArea 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textarea6.1 完整示例代码以下是一个完整的实际应用示例展示了相关组件的综合使用// 完整的组件使用示例Componentexportstruct DemoComponent{Statemessage:stringHello HarmonyOSStatecount:number0build(){Column({space:16}){Text(this.message).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#333333)Text(点击次数:${this.count}).fontSize(16).fontColor(#666666)Button(点击增加).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).borderRadius(20).onClick((){this.count})}.width(100%).height(100%).padding(24).backgroundColor(#FFF8F0)}}6.2 状态管理代码// 状态管理示例StateisActive:booleanfalseProptitle:stringLinksharedValue:numberbuild(){Column(){Text(this.title).fontSize(18).fontColor(this.isActive?#F5A623:#999999)Button(this.isActive?取消:激活).onClick((){this.isActive!this.isActive})}}6.3 数据绑定与渲染// ForEach 循环渲染示例interfaceDataItem{id:numbername:stringicon:string}StatedataList:DataItem[][{id:1,name:示例一,icon:⭐},{id:2,name:示例二,icon:},{id:3,name:示例三,icon:✨}]build(){Column(){ForEach(this.dataList,(item:DataItem){Row({space:12}){Text(item.icon).fontSize(24)Text(item.name).fontSize(16)}.padding(12).width(100%)})}}6.4 样式与主题配置// 样式配置示例constThemeStyles{primaryColor:#F5A623,backgroundColor:#FFF8F0,cardBackground:#FFFFFF,textPrimary:#333333,textSecondary:#999999,borderRadius:12,spacing:16}StylesfunctionCardStyle(){.backgroundColor(ThemeStyles.cardBackground).borderRadius(ThemeStyles.borderRadius).shadow({radius:4,color:#10000000,offsetY:2})}

相关新闻

Grok 4.5全平台上线：当AI越来越“聪明“，“在场感“为什么反而成了稀缺品？

Grok 4.5全平台上线：当AI越来越“聪明“，“在场感“为什么反而成了稀缺品？

Grok 4.5全平台上线：当AI越来越"聪明"，"在场感"为什么反而成了稀缺品？ 7月24日，xAI正式发布并全量推送了Grok 4.5。从网页端到X平台，再到iOS与Android应用，这款被官方称为"目前最…

2026/10/27 20:12:40 阅读更多 →
两亿AI有了“身份证“：当智能体学会互联互通，人机交互的最后一寸拼图在哪？

两亿AI有了“身份证“：当智能体学会互联互通，人机交互的最后一寸拼图在哪？

两亿AI有了"身份证"：当智能体学会互联互通，人机交互的最后一寸拼图在哪？ 7月24日，中关村正式发布了全球首个系统性AI智能体互联标准体系——GB/Z185-2026。这七项指导性国标的核心动作，是给每一个AI智能体分…

2026/10/24 12:32:18 阅读更多 →
Full Page Screen Capture：一站式完整网页截图解决方案深度解析

Full Page Screen Capture：一站式完整网页截图解决方案深度解析

Full Page Screen Capture：一站式完整网页截图解决方案深度解析 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chr…

2026/10/25 15:59:28 阅读更多 →

最新新闻

Electron桌面应用开发实战：从环境搭建到打包发布全流程

Electron桌面应用开发实战：从环境搭建到打包发布全流程

做前端这些年，我大部分时间都在跟浏览器标签页打交道，直到第一次把桌面应用跑起来，才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词，最开始是在某段时间频繁出现在同事的讨论里，一个用HTML…

2026/10/27 17:33:32 阅读更多 →
滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

简介：亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档，主要面向智能锁安装人员、终端用户及售后维护者，帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件，大小4.37MB，内容结构清晰&#xff…

2026/10/27 4:06:49 阅读更多 →
PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统，整车要求空载跑到8m/s，电机转速已经拉到额定点，驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令，转速纹丝不动，三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/27 7:21:53 阅读更多 →
C++核心知识点：从内存管理到STL的实战指南

C++核心知识点：从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年，用它写过嵌入式驱动、做过游戏服务端，也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词，我其实挺感慨的——这门语言的难点从来不是语法多，而是知识点之间的耦合太深…

2026/10/27 18:20:50 阅读更多 →
T109滑盖智能锁怎么装？安装调试与故障排查全攻略

T109滑盖智能锁怎么装？安装调试与故障排查全攻略

简介：亚太天能T109滑盖智能锁产品说明书以PDF格式发布，适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开，先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能，再给出完整安装步骤&…

2026/10/27 6:20:47 阅读更多 →
LLM知识降熵：从信息垄断到理解权下放

LLM知识降熵：从信息垄断到理解权下放

你有没有过这种经历：翻开源码注释、论文摘要或者一份专业报告，每个字都认识，连在一起却像天书。想找人聊聊，身边要么没人懂，要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型，几秒钟之后&a…

2026/10/27 4:06:50 阅读更多 →

日新闻

周新闻

月新闻

我发现了一个新思路：用 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/27 13:55:19 阅读更多 →
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/27 7:21:50 阅读更多 →
黑夜航拍船只数据集训练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/27 19:19:37 阅读更多 →