《农物购》app开发技术分享《二》-- HarmonyOS 鸿蒙Next导航栏功能实现

《农物购》app开发技术分享《二》-- HarmonyOS 鸿蒙Next导航栏功能实现 在上一节我们实现了一个简单的商城框架，接下来来到了第二个小阶段，因为我们用的是tabs默认的样式，我们知道大部分商城的底部导航栏样式都是上图片下文字的，这一节我们实现这种样式和部分的首页ui。

开发准备

我们要先对单个选项进行分析，我们都需要什么组件逻辑实现

实现的效果如图所示：

通过图片我们可以看到，我们需要进行一个上下结构组合起来的按钮，并且有图片和文字，当我们选中某一条底部的图片和字体也要发生相应的变化。

知道了我们要实现的功能接下来我们就开始实现代码，tabs的tabBar支持传入@Builder ，那我们就自定义一个导航栏传入进去

首先我们定义一个参数来接收选中的下标

@State currentIndex: number = 0

然后实现一个自定义导航栏，同时定义好参数，分别是显示的文字、下标、选中图片样式、未选中图片样式,间距，以及字体选中未选中的样式和颜色

[@Builder](/user/Builder) tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 30, height: 30 })
    Text(title)
      .fontSize(this.currentIndex === targetIndex ? 16:14)
      .margin({top:5})
      .fontWeight(this.currentIndex === targetIndex ? FontWeight.Bold:FontWeight.Normal)
      .fontColor(this.currentIndex === targetIndex ? '#ffe5960b' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
}

实现完成之后，我们把他传入tabs中，保存代码查看预览器中的效果

可以看到我们首页已经变成了上下结构，但是我们选中的是第二条分类，为什么首页的未选中状态没有修改呢？其实我们在tabs中还需要一个onchange方法，来接收当前的下标。

.onChange((index: number) => {
  this.currentIndex = index
})

这样把下标传递给我们定义好的参数，现在运行代码再试一次。

现在我们填加完方法再次选中分类，可以看到首页选项的样式已经发生了变化，接下来我们如法炮制，把其他选项的内容也替换一下。

@Entry
@Component
struct Index {
  @State currentIndex: number = 0

  [@Builder](/user/Builder) tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 30, height: 30 })
      Text(title)
        .fontSize(this.currentIndex === targetIndex ? 16:14)
        .margin({top:5})
        .fontWeight(this.currentIndex === targetIndex ? FontWeight.Bold:FontWeight.Normal)
        .fontColor(this.currentIndex === targetIndex ? '#ffe5960b' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({barPosition:BarPosition.End}) {
        TabContent() {
          Text('首页').fontSize(30)
        }
        .tabBar(this.tabBuilder("首页",0,$r('app.media.index1_check'),$r('app.media.index1_not_check')))

        TabContent() {
          Text('分类').fontSize(30)
        }
        .tabBar(this.tabBuilder("分类",1,$r('app.media.index2_check'),$r('app.media.index2_not_check')))
        TabContent() {
          Text('购物车').fontSize(30)
        }
        .tabBar(this.tabBuilder("购物车",2,$r('app.media.index3_check'),$r('app.media.index3_not_check')))
        TabContent() {
          Text('我的').fontSize(30)
        }
        .tabBar(this.tabBuilder("我的",3,$r('app.media.index4_check'),$r('app.media.index4_not_check')))

      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .height('100%')
    .width('100%')
  }
}

现在我们完善好了逻辑执行代码展示如下

可以看到底部的导航栏已经实现了。