HarmonyOS应用开发实战萌宠日记 - 提醒事项列表与 ForEach 渲染前言提醒事项列表是展示所有健康提醒的核心组件。在萌宠日记的ReminderPage中我们使用List ListItem组件渲染提醒列表通过ForEach动态遍历数据每个列表项包含图标、标题、日期、倒计时等要素清晰展示每项健康提醒的完整信息。本文将从萌宠日记中提醒事项列表的实现出发深入解析 List 列表渲染、ForEach 数据遍历、列表项布局设计以及动态数据驱动的列表更新。一、提醒事项列表实现1.1 数据模型interface ReminderItem { icon: string // 图标 Emoji title: string // 提醒标题 date: string // 提醒日期 daysLeft: string // 倒计时文字 iconBg: string // 图标背景色 }1.2 列表渲染// ReminderPage.ets — 提醒列表 List({ space: 8 }) { ForEach(this.reminders, (item: ReminderItem) { ListItem() { Row({ space: 12 }) { // 图标 Column() { Text(item.icon).fontSize(24) } .width(44).height(44) .backgroundColor(item.iconBg) .borderRadius(12) .justifyContent(FlexAlign.Center) // 标题和日期 Column({ space: 4 }) { Text(item.title) .fontSize(15).fontWeight(FontWeight.Medium) .fontColor(#333333) Text(${item.date} (${item.daysLeft})) .fontSize(12).fontColor(#999999) } .alignItems(HorizontalAlign.Start) Blank() Text(›) .fontSize(18).fontColor(#CCCCCC) } .width(100%).padding(16) .backgroundColor(#FFFFFF).borderRadius(12) } }) } .width(100%) .layoutWeight(1) .padding({ left: 16, right: 16 })二、列表项布局2.1 四列布局┌─────────────────────────────────┐ │ ️ 驱虫 › │ │ 2024.05.20 (还有15天) │ └─────────────────────────────────┘位置组件内容说明左侧Column图标44×44 圆角容器中间Column标题 日期垂直排列右中Blank弹性占位将内容推到两端右侧Text›右箭头指示三、List 组件配置属性值说明space8列表项间距 8vplayoutWeight1撑满剩余空间padding左右 16vp与屏幕边缘距离四、动态数据更新// 添加提醒后自动更新列表 addReminder(item: ReminderItem): void { this.reminders [...this.reminders, item] } // 删除提醒 removeReminder(index: number): void { this.reminders.splice(index, 1) }五、总结本文从萌宠日记的提醒事项列表与 ForEach 渲染实现出发深入解析了列表渲染的完整方案数据模型ReminderItem 接口定义提醒数据List 组件列表容器space: 8列表项布局图标 标题 日期 箭头动态更新添加/删除自动更新如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源List 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreach7.1 属性对比属性类型必填默认值说明widthLength否100%组件宽度heightLength否自适应组件高度paddingPadding否0内边距marginMargin否0外边距backgroundColorColor否透明背景颜色borderRadiusLength否0圆角半径shadowShadow否无阴影效果6、常见问题与解决方案6.1 布局问题在实际开发中开发者经常会遇到布局相关的常见问题组件不显示检查是否设置了正确的宽高或父容器是否限制了子组件大小布局错乱检查alignItems和justifyContent设置是否正确滚动失效确认 Scroll 组件的高度是否被正确限制提示布局问题通常可以通过borderWidth: 1临时添加边框来定位问题区域。6.2 性能问题列表卡顿使用 LazyForEach 替代 ForEach 实现懒加载频繁刷新合理使用状态管理装饰器避免不必要的组件重绘内存泄漏在页面销毁时及时释放资源和取消订阅// 懒加载示例 LazyForEach(this.dataSource, (item: DataItem) { ListItem() { Text(item.name).fontSize(16) } }, (item: DataItem) item.id.toString())7、最佳实践建议7.1 代码组织良好的代码组织可以显著提升项目的可维护性组件化设计将可复用的 UI 部分抽取为独立组件样式分离将常量和样式定义集中管理类型安全使用 interface 定义数据模型避免 any 类型7.2 性能优化减少不必要的重绘使用State时只声明需要响应式更新的变量合理使用布局避免过深的嵌套层级图片优化使用适当的图片格式和尺寸提示HarmonyOS 提供了一系列性能分析工具建议在开发过程中持续关注应用性能。8、与其他方案的对比8.1 方案对比对比维度本方案传统方案优势实现复杂度低中等更简洁维护成本低高更易维护扩展性好一般更灵活性能优秀良好更高效8.2 适用场景适合需要快速实现相关功能的场景不适合对性能有极致要求的场景需考虑其他方案总结本文从萌宠日记的实际开发案例出发深入解析了提醒事项列表与ForEach渲染的实现方案。通过本文的学习读者可以掌握以下核心知识点组件用法理解相关 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-textarea