Index.ets

// 首页：导航栏+子页面
import CommonConstants from '../common/CommonConstant';
import {LocalPage} from '../pages/LocalPage'
import {Login} from '../pages/LoginPage'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0; //导航栏下标
  private tabsController: TabsController = new TabsController();

  @Builder //导航栏
  tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
        .width(24)
        .height(24)
      Text(title)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(10)
        .fontColor(this.currentIndex === targetIndex ? CommonConstants.base_blue : 'rgba(0,0,0,0.60)')
        .textAlign(TextAlign.Center)
        .lineHeight(14)
        .fontWeight(500)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(targetIndex);
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
        TabContent() {
          LocalPage()
          // Login()
        }
        .tabBar(this.tabBarBuilder('TodoList', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

        TabContent() {
          Login()
        }
        .tabBar(this.tabBarBuilder('我的', 1, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))
      }
      .vertical(false)
      .divider({
        strokeWidth: 0.5,
        color: $r('app.color.grey2')
      })
      .scrollable(false)
      .backgroundColor($r('app.color.grey'))
      .height('102%')
    }
  }
}