基于鸿蒙操作———制作健康App(实现记录列表，食物列表)_日常健康app活动记录界面怎么实现-CSDN博客

import { CommonConstants } from '../../common/constants/CommonConstants'
// 属于text的修饰符，进行抽取text样式
@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-592千卡').grayText()
              // 空白创建
              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_6}){

                   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)
  }

}

实验小结

代码部分使用@Extend，@Builder分别是对文字统一的效果进行简化，然后对相同的内容进行结构部分的提取，上面@Builder主要介绍的是完成对删除部分的统一调用，设置颜色是红色，然后外边距统一设置为5虚拟像素，宽度设置为20的虚拟像素，然后进行函数的调用。

食物记录效果展示

实验实体类代码

import { CommonConstants } from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemList from '../view/item/ItemList'
@Entry
@Component
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)
  }


}

代码解释

本段代码主要完成的是对食物列表的实体类的创建，通过@Builder来进行编写他的表头，然后通过引用下面工具类来完成对列表之间的调用和搭配。

实验工具类代码

import { CommonConstants } from '../../common/constants/CommonConstants'
@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}

@Component
export default struct ItemList {
  build() {
    Tabs(){
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('全部')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('主食')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('果蔬')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('坚果')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('其他')
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }

  @Builder TabContentBuilder(){
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5,6],(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('91千卡/片').grayText()
            }
            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.lightest_primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
      })
    }
    .width('100%')
    .height('100%')

  }


}

代码解释

创建自定义字体样式，创建@Builder代码块，进行提取相同的架构样式，利用Tabs组件实现上面列表文字的体现。

实验小结

1..layoutWeight(1)属性实现对界面进行分配（用在index首页主界面之中）；

2.如果出现两个或者是两个以上的相似结构类型，直接通过创建@Bulider对相似的部分进行提取和打包，然后进行调用；

3.在代码块中设置需要进行设置的属性，来进行替换值，通过?:来判断是不是值必须要进行插入，不需要的可以直接利用上面的符号进行省略；