鸿蒙软件开发实战案例（二）

本系列为黑马程序员HarmonyOS4+NEXT实战案例跟做记录，目录：

1. 鸿蒙软件开发实战案例（一）
2. 鸿蒙软件开发实战案例（二）
3. 鸿蒙软件开发实战案例（三）
4. 鸿蒙软件开发实战案例（四）
5. 鸿蒙软件开发实战案例（五）

---

首页实现效果（.gif）:

相关实现代码：

首页布局框架：

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/recordindex'
@Entry
@Component
struct Index {
  @State currentindex:number=0

  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
    Column({ space: CommonConstants.SPACE_8 }) {
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }
  selectColor(index: number) {
    return this.currentindex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  build() {
    Tabs({barPosition:BarPosition.End}){//tabs容器,barPosition:BarPosition.End用于设定bar的位置在底部
      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)
  }

}

记录页布局框架： 

import Recordlist from './recordlist'
import SearchHeader from './SearchHeader'
import StatsCard from './statscard'
@Component
export default  struct RecordIndex {
  build(){
      Column(){
        //头部搜索栏
        SearchHeader()
        //统计卡片
        StatsCard()
        //记录列表
        Recordlist()
          .layoutWeight(1)
      }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}