实战案例 健康饮食纪录列表

一、实验目的

1. 纪录列表开发；

2. 业务逻辑开发；

二、应用介绍

本阶段项目实现了一个美食页面纪录列表页面，运行界面如图所示。

三、代码结构解读

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function grayText(){
     .fontSize(14)
    .fontColor($r('app.color.light_gray'))
}

@Component
export default struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item) =>{
        ListItem(){
          Column(){
            //分组标题
            Row({space:CommonConstants.SPACE_4}){
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423~592千卡').grayText()
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_delete_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')

            //组内记录
            List(){
              ForEach([1,2],(item)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('一片').grayText()
                    }
                    Blank()
                    Text('91千卡').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .margin({top:10})
  }
  @Builder deleteButton(){
    Image($r('app.media.ic_public_add_norm_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

四、实验逻辑

纪录列表相比于前半部分的统计列表而言相对来说比较简单，它完全可以用一个lest组件来实现，在lest中我们可以用ForEach循环来渲染这里的一部分内容，而且每一个列表里只有一些图片文字等等没有什么我们不认识的组件。

五、遇到的问题及解决方案

1.大小写区分错误

解决方法：

将Function改为function即可

六、你最想分享的亮点

.borderRadius()负责一个边框弧度，.padding()是内边距的大小，@Extend继承文本，在list内部实现for循环。

小结

在完成了健康饮食纪录列表的开发后，我总结出以下几点：

1. 数据管理：在开发过程中，我学会了如何有效地管理和展示大量的数据。通过使用鸿蒙提供的数据模型和数据绑定技术，我能够更加高效地处理和展示数据。
2. 列表展示：通过使用鸿蒙的列表控件，我学会了如何动态展示数据并实现列表的滚动、下拉刷新等功能。良好的列表展示能够提升用户体验。
3. 点击事件处理：在实现纪录列表中的每一项可以点击查看详情时，我学会了如何处理列表项的点击事件，并实现跳转到详情页面或其他操作。
4. 数据更新与同步：在实验中，我学会了如何实现数据的更新和同步，确保用户能够及时获取最新的数据。
5. UI设计与优化：通过完成纪录列表的开发，我强化了UI设计的重要性，并学会了如何设计简洁、直观的用户界面，提高用户体验。

通过这个项目的开发，我不仅提高了鸿蒙移动开发的技能，还加深了对数据管理和UI设计的理解。希望在未来的项目中能够继续实践和提升自己的开发能力，为用户提供更好的移动应用体验。