鸿蒙案例-黑马饮食健康软件（五）

前言

    饮食健康软件可以帮助用户管理自己的饮食习惯，提供营养信息，制定健康饮食计划，甚至跟踪用户的体重和身体状况。本次首先实现的是该软件的饮食记录的记录列表和食物列表页。

    饮食记录的记录列表可以建议用户每餐吃些什么，他们的能量是多少。食物列表页可以根据用户选择的食物进行热量计算。

---

页面实现-饮食记录-记录列表，食物列表页

---

遇到的问题及解决方法：

问题：代码拼写正常却显示错误

解决方法：在tips后加个？

---

代码实现：

记录列表页面UI：

//页面UI
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(){
            //1.分组的标题
            Row(){
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423-600千卡')
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')
            //2.组内记录列表
            List(){
              ForEach([1,2],(item)=>{
                ListItem(){

                  Row({space:CommonConstants.SPACE_4}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').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_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

食物列表页：

//食物列表页
import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/Item/ItemList'
@Component

@Entry
 struct ItemIndex {

  @State message:string='Hello World'
  build() {
    Column(){
      //1.头部导航
this.Header()
      //2.列表
      ItemList()

    }
    .width('100%')
    .height('100%')
  }

  @Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(30)
        .onClick(()=>router.back())
      Blank()
      Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }
}

---

页面效果：

---

总结：

1.ellipsisTextOverFlow方法的作用是用于多行文本的情况下通过省略号隐藏超出范围的文本。

2.用户首选项为应用提供key-value键值型的数据处理能力，支持应用持久化轻量级数据。
3.关系型数据库是基于SQLite组件提供的本地数据库，用于管理应用中的结构化数据。