第五部分-食物列表和我的主页的设计与实现

一、前言：

本文演示用HarmonyOS的ArkUI来开发首页界面内的记录列表。

通过List()以及Column()来进行布局，使其更加美观。

二、记录列表部分

初步我们设计了一个效果图，如图所示

看着内容很多，但是每一块都一样，只是出来内容不一样。这样我们就先做一个版块，其他进行修改就可以了。

首先定义头部，它有一个返回按钮和所对应的吃饭的时间点，对其我们进行一个封装，还是用Row容器括起来，添加一个返回图片，为其添加一个点击事件-.onClick(() => router.back()让其返回就可以了。用Blank组件将其隔开，使用一个Text文本组件输出相应内容就可以了。

参考代码如下：

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

对下方的导航，这里还是运用到了Tabs ：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。TabContent

仅在Tabs中使用，对应一个切换页签的内容视图。用该组件就能实现各个视图了。

在其内部添加相应内容就可以了：我们将视图内部的内容封装起来，这样方便使用，也更加美观。还是通过列表来进行显示，通过Foreach组件循环显示不同的食物介绍。这样在每个视图中调用就可以了，后期修改也更加快捷。

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


@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('坚果')
    }
    .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('1').fontSize(14).fontColor($r('app.color.light_gray'))

            }
            Blank()
            Column() {
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
              Text('91千卡').fontSize(14).fontColor($r('app.color.light_gray'))
            }
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)

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

食物列表首页参考代码：

import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/item/ItemList'

@Entry
@Component
struct FoodIndex {
  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList()
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }

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

这样我们就完成了食品列表部分的功能开发。

三、我的主页部分

通过简单的UI组件Text：文本组件， TextInput：文本框组件， Image：图片组件设计了一个我的主页；效果如下：

参考代码如下：

@Component
export default  struct MyZhu {
  @State times: string=`记住我`
  build() {
    Column({space:15}){
      Row() {
        Image(`https://c-ssl.dtstatic.com/uploads/blog/202104/02/20210402200403_1e37e.thumb.1000_0.jpeg`)
          .width(50)
          .height(50)
          .margin({ top: 50, bottom: 20 ,right:10})
        Text('张三')
          .fontWeight(FontWeight.Bold)
          .fontSize(25)
      }
      .margin({left:-150})
      Text('职业：学生')
        .margin({left:-150})
      TextInput({placeholder:'个人简介'})
        .maxLength(200)
        .width('94%')
        .height(200)
    }
    .width('100%')
    .height('100%')
  }


}

这样基本就完成了该小程序的开发。