黑马健康应用开发(三)

一、首页界面UI实现思路:

使用Tabs组件来创建选项卡界面，并设置barPosition为BarPosition.End，使底部导航栏显示在界面底部。
在Tabs组件内部，定义了三个TabContent组件，每个TabContent代表一个选项卡的内容。
第一个选项卡的内容是RecordIndex组件，用于显示记录信息。
第二个和第三个选项卡的内容是简单的Text组件。
每个TabContent都使用tabBar属性来指定对应的底部导航栏内容，通过调用TabBarBuilder函数并传入相应的参数来实现。

二、首页界面设计:

使用Tabs组件来创建一个可显示页面的快速切换，使用barPosition: BarPosition.End将标签栏方在底部。

定义了三个TabContent组件，分别对应记录发现和我的页面。

每个TabContent都调用方法来构建对应的标签栏按钮，并设置相应的文本、图标和索引。

第一个TabContent中使用了RecordIndex组件来展示记录列表。

其余两个TabContent使用Text组件展示页面标题。

最后，通过.onChange(index=>this.currentIndex=index)标签页切换事件，更新currentIndex状态变量的值。

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
@Preview
struct Index {
  @State currentIndex: number=0
  @Builder TabBarBuilder(title: ResourceStr,image: ResourceStr,index:number){
    Column({space: CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
      Text(title)
        .fontSize(14)
    }
  }
  build() {
    Tabs({barPosition: BarPosition.End}) {
      TabContent(){
        RecordIndex()
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

      TabContent(){
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
    }
    .width('100%')
    .height('100%')
    .onChange(index=>this.currentIndex=index)
  }
}

三、首页界面搜索栏设计:

在record文件夹下新建SearchHeader.ets文件

利用row()进行横向布局，搜索栏用Search()给定显示默认值为搜索饮食或运动信息，并对文字字体进行修改，添加站内信息图片，进行布局，设置好宽高比例占屏幕的94%。使用badge()容器在图片角标数字进行添加。

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader {
  build() {
    Row({space: CommonConstants.SPACE_6}){
      Search({placeholder: '搜索饮食或运动信息'})
        .textFont({size: 18})
        .layoutWeight(1)
      Badge({count: 1, position: BadgePosition.RightTop, style: {fontSize: 12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}