鸿蒙开发—黑马云音乐之首页导航栏

目录

1.底部导航

2.点击导航栏的时候点亮

3.新建tabbar对应的页面并加载

1.底部导航

@Entry
@Component
struct Index {
  @State message: string = '首页'

  @Builder
  tabBuilder(text:string,img:Resource) {


    //   未选中状态样式处理
    Column({ space: 5 }) {
      Image(img)
        .width(25)
        .borderRadius(25)
        .padding(2)
        .fillColor('#4bb0c4')

      Text(text)
        .fontColor('#4bb0c4')
    }

  }

  build() {
    Column() {
      //  播放歌曲信息后面完成
      //  底部导航栏
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('推荐')
        }
        .tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend')))
        .backgroundColor(Color.Black)

        TabContent() {
          Text('发现')
        }
        .tabBar(this.tabBuilder('发现',$r('app.media.ic_find')))
        .backgroundColor(Color.Black)
      }
      .backgroundColor('#ff3b3b3b')
    }
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

自定义tabBuilder，使用Tabs组件实现，属性自行调整。

2.点击导航栏的时候点亮

@Entry
@Component
struct Index {
  @State currentIndex:number = 0 //页面加载的时候就应该把第一个tab点亮

  @Builder
  tabBuilder(text:string,img:Resource,index:number) {

    // 三元表达式
    // 条件成立?取值1:取值2
    Column({ space: 5 }) {
      Image(img)
        .width(25)
        .borderRadius(25)
        .backgroundColor(this.currentIndex == index?'#d2577c':'')
        .padding(2)
        .fillColor(this.currentIndex == index?Color.White:'#4bb0c4')

      Text(text)
        .fontColor(this.currentIndex == index?'#d2577c':'#4bb0c4')
    }
  }

  build() {
    Column() {
      //  播放歌曲信息后面完成
      //  底部导航栏
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('推荐')
        }
        .tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend'),0))
        .backgroundColor(Color.Black)

        TabContent() {
          Text('发现')
        }
        .tabBar(this.tabBuilder('发现',$r('app.media.ic_find'),1))
        .backgroundColor(Color.Black)
      }
      .onChange((index:number)=>{
        console.log('当前索引',index)
        this.currentIndex = index
      })
      .backgroundColor('#ff3b3b3b')
    }
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

3.新建tabbar对应的页面并加载

新建4个页面。之后才能在TabContent内调用页面。

import { FindPage } from './FindPage'
import { MimePage } from './mimePage'
import { MomentPage } from './momentPage'
import { MuiscPage } from './muiscPage'
import { RecommendPage } from './recommendPage'
@Entry
@Component
struct Index {
  @State currentIndex:number = 0 //页面加载的时候就应该把第一个tab点亮

  @Builder
  tabBuilder(text:string,img:Resource,index:number) {

    // 三元表达式
    // 条件成立?取值1:取值2
    Column({ space: 5 }) {
      Image(img)
        .width(25)
        .borderRadius(25)
        .backgroundColor(this.currentIndex == index?'#d2577c':'')
        .padding(2)
        .fillColor(this.currentIndex == index?Color.White:'#4bb0c4')

      Text(text)
        .fontColor(this.currentIndex == index?'#d2577c':'#4bb0c4')
    }
  }

  build() {
    Column() {
      //  播放歌曲信息后面完成
      //  底部导航栏
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          RecommendPage()
        }
        .tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend'),0))
        .backgroundColor(Color.Black)

        TabContent() {
          FindPage()
        }
        .tabBar(this.tabBuilder('发现',$r('app.media.ic_find'),1))
        .backgroundColor(Color.Black)

        TabContent() {
          MuiscPage()
        }
        .tabBar(this.tabBuilder('muisc',$r('app.media.ic_logo'),2))
        .backgroundColor(Color.Black)

        TabContent() {
          MomentPage()
        }
        .tabBar(this.tabBuilder('动态',$r('app.media.ic_moment'),3))
        .backgroundColor(Color.Black)

        TabContent() {
          MinePage()
        }
        .tabBar(this.tabBuilder('我的',$r('app.media.ic_mine'),4))
        .backgroundColor(Color.Black)
      }
      .onChange((index:number)=>{
        console.log('当前索引',index)
        this.currentIndex = index
      })
      .backgroundColor('#ff3b3b3b')
    }
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

与List内只能使用ListItem类似，Tabs内只能使用TabContent。

设置参数currentIndex类型为number，初始为0，设置属性.onChange((index:number)=>{
this.currentIndex = index })，当点击某一TabContent时，将index赋值currentIndex，image设置三元判断表达式，判断背景颜色是否该变色。

.backgroundColor(this.currentIndex == index?'#d2577c':'')
.fillColor(this.currentIndex == index?Color.White:'#4bb0c4')