HarmonyOS-记账本-首页布局

今天设计记账本首页的基本布局

import { CommonConstants } from '../common/constants/CommonConstants'
import AccountIndex from '../view/account/accountIndex'
@Entry
@Component
struct Index {
  @State currentIndex:number = 0
  @State message: string = 'Hello World'

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

  build() {
    Tabs({barPosition:BarPosition.End}){
    TabContent(){
      AccountIndex()
    }
      .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)
  }
}