HarmonyOS NEXT实战：自定义封装多种样式导航栏组件

涉及知识点和装饰器

@ComponentV2，@Local， @Builder，@BuilderParam，@Extend， @Require ，@Param，@Event等
第三方库：ZRouter ，如项目中本来就用了ZRouter路由库，案例中点返回按钮直接使用了 ZRouter.pop()，没有用到的话也支持自定义返回事件。

背景：

在项目开发进程中，导航栏的应用场景颇为繁多。以我的页面为例，其导航栏呈现为图标、文字与箭头相组合的样式；而设置页面的导航栏则是图标、文字、右侧文字以及小红点的搭配形式；至于公用顶部导航栏，又表现为左侧返回图标、中间文字、右侧图标与文字的布局。倘若针对每一处用到导航栏的地方均单独编写代码，那么代码的重复编写现象将极为严重。基于此，我们可采用自定义封装的方式构建公用组件。如此一来，不仅为项目后期的维护与拓展提供了极大的便利，同时也能够显著提升开发效率，让开发者有更多精力投入到更具价值的工作思考中，减少不必要的重复劳作时间消耗。

先上效果图

图一
图二
图三

实现图一效果图

1、首先需要定义好类型，比如图片+文字+小红点+返回右键等。

@ObservedV2
export class TabHorizontalModel {
  title: string;
  index: number; //下标
  icon: string | Resource;
  hasIcon: boolean; //是否显示图
  @Trace rightTitle: string;
  hasRightTitle: boolean;
  @Trace hasNew: boolean; //是否显示红点
  hasRightIcon: boolean; //是否显示图

  constructor(title: string, index: number = -1, icon: string | Resource = '', hasIcon: boolean = false, rightTitle: string = '', hasRightTitle: boolean = false, hasNew: boolean = false,
    hasRightIcon: boolean = true) {

    this.icon = icon;
    this.hasIcon = hasIcon;
    this.title = title;
    this.rightTitle = rightTitle;
    this.hasRightTitle = hasRightTitle;
    this.hasNew = hasNew && rightTitle !== '';
    this.index = index;
    this.hasRightIcon = hasRightIcon;
  }
}

2、封装一个通用的横向Tab 图片、文字、右边文字、小红点组件

import { CommonConst } from "utils"
import { TabHorizontalModel } from "../model/TabHorizontalModel"

/**
 * Author:J
 * Describe: 横向Tab 图片、文字、右边文字、小红点
 */
@ComponentV2
export struct HorizontalTabItemComp {
  @Param @Require tabItem: TabHorizontalModel= new TabHorizontalModel('')
  @Param onItemClick?: () => void = undefined

  build() {
    Row() {
      Image(this.tabItem.icon)
        .width(24)
        .margin({ right: 12 })
        .visibility(this.tabItem.hasIcon ? Visibility.Visible : Visibility.None)

      Text(this.tabItem.title)
        .fontSize(16)
        .fontColor($r('app.color.color_222222'))
        .layoutWeight(1)
      if (this.tabItem.hasNew) {
        Badge({
          value: '',
          position: BadgePosition.Right,
          style: { badgeSize: 7, badgeColor: $r('app.color.color_FA2A2D') }
        }) {
          Text(this.tabItem.rightTitle)
            .fontSize(16)
            .fontColor($r('app.color.color_222222'))
            .visibility(this.tabItem.hasRightTitle ? Visibility.Visible : Visibility.None)
            .margin({ right: 20 })
        }
      } else {
        Text(this.tabItem.rightTitle)
          .fontSize(16)
          .fontColor($r('app.color.color_222222'))
          .visibility(this.tabItem.hasRightTitle ? Visibility.Visible : Visibility.None)
      }
      Image($r('app.media.ic_arrow_right_gray_small'))
        .width(24)
        .margin({ left: 12 })
        .visibility(this.tabItem.hasRightIcon ? Visibility.Visible : Visibility.None)
    }
    .width(CommonConst.FULL_PARENT)
    .height(44)
    .backgroundColor($r('app.color.white'))
    .onClick(() => {
      this.onItemClick?.()
    })
  }
}

3、使用案例 3.1 针对于一个，可以用下面的代码，但是对于一个页面有多个的话，要是一行行的写，虽然可以，但是不建议，而且也不优雅，所以需要用到ForEach来实现。

  HorizontalTabItemComp({
        tabItem: new TabHorizontalModel("我的积分", 0, $r('app.media.ic_coin'), true),
        onItemClick: () => {
          ToastUtil.showToast('我的积分')
        }
      }).margin({ left: 12, right: 12 })

3.2 定义一组数据，塞到数组里

/** 横向Tab */
export const horizontalTabItemData: Array<TabHorizontalModel> = [
  new TabHorizontalModel("我的积分", 0, $r('app.media.ic_coin'), true, '666', true),
  new TabHorizontalModel("我的分享", 1, $r('app.media.ic_share_article'), true),
  new TabHorizontalModel("我的收藏", 2, $r('app.media.ic_collect'), true),
  new TabHorizontalModel("我的书签", 3, $r('app.media.ic_read_later'), true),
  new TabHorizontalModel("阅读历史", 4, $r('app.media.ic_read_record'), true),
  new TabHorizontalModel("开源项目", 5, $r('app.media.ic_github'), true),
  new TabHorizontalModel("关于作者", 6, $r('app.media.ic_about'), true, '请他喝杯咖啡~', true),
]

3.3 使用ForEach来实现

 ForEach(horizontalTabItemData, (item: TabHorizontalModel, index: number) => {
        HorizontalTabItemComp({
          tabItem: item,
          onItemClick: () => {
            this.onItemClick(item)
          }
        }).margin({ left: 12, right: 12 })
      })

  /** 点击事件 */
  private onItemClick(item: TabHorizontalModel) {
    ToastUtil.showToast(item.title)
    if (item.index == 0) {

    } else if (item.index == 1) {

    } else if (item.index == 2) {

    } else if (item.index == 3) {

    } else if (item.index == 4) {

    } else if (item.index == 5) {

    } else if (item.index == 6) {

    }
  }

实现图二效果图

1、首先需要定义好需要的参数

  /** 标题 */
  @Param title: ResourceStr = '';
  /** 返回按钮的点击事件 */
  @Param backClick?: (event?: ClickEvent) => void = undefined;
  /** 是否显示右侧按钮 */
  @Param isShowRight: boolean = false;
  /** 右侧标题 */
  @Param rightTitle: ResourceStr = '';
  /** 右侧图片 */
  @Param rightImage: ResourceStr = '';
  /** 右侧点击事件 */
  @Param rightClick?: (event?: ClickEvent) => void = undefined;

2、封装一个公用的自定义导航栏组件，内置了导航栏的返回按钮、标题、右侧按钮等，完整代码如下：

import { ZRouter } from '@hzw/zrouter';
import { CommonConst } from 'utils';

/**
 * Author:J
 * Describe:自定义导航栏组件
 * 内置了导航栏的返回按钮、标题、右侧按钮等
 */
@ComponentV2
export struct TitleBarComp {
  /** 标题 */
  @Param title: ResourceStr = '';
  /** 返回按钮的点击事件 */
  @Param backClick?: (event?: ClickEvent) => void = undefined;
  /** 是否显示右侧按钮 */
  @Param isShowRight: boolean = false;
  /** 右侧标题 */
  @Param rightTitle: ResourceStr = '';
  /** 右侧图片 */
  @Param rightImage: ResourceStr = '';
  /** 右侧点击事件 */
  @Param rightClick?: (event?: ClickEvent) => void = undefined;

  build() {
    Column() {
      Row() {
        Image($r('app.media.ic_arrow_left')).width(44).padding(8).onClick(() => {
          if (this.backClick) {
            this.backClick()
          } else {
            ZRouter.pop()
          }
        })
        Text(this.title)
          .fontColor($r('app.color.color_222222'))
          .fontSize(16)
          .maxLines(1)
          .fontWeight(FontWeight.Bold)

        Row() {
          if (this.rightTitle) {
            Text(this.rightTitle)
              .fontColor($r('app.color.color_222222'))
              .fontSize(16)
              .margin({ right: 10 })
          } else {
            Image(this.rightImage ? this.rightImage : $r('app.media.ic_local_search'))
              .width(44)
              .padding(10)
          }
        }
        .onClick(this.rightClick)
        .visibility(this.isShowRight ? Visibility.Visible : Visibility.Hidden)

      }
      .width(CommonConst.FULL_PARENT)
      .height(44)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor($r('app.color.white'))

      Divider()
        .width(CommonConst.FULL_PARENT)
        .color($r('app.color.color_F0F0F0'))


    }
    .width(CommonConst.FULL_PARENT)
    .height(45)

  }
}

3、使用案例，包含了多种样式使用

 NavDestination() {
      Column({space:8}) {
        Text('第一种样式').fontColor(Color.Red)
        TitleBarComp({ title: '设置' })
        Text('第二种样式，自定义返回事件').fontColor(Color.Red)
        TitleBarComp({
          title: '设置二', backClick: () => {
            ToastUtil.showToast('自定义返回事件')
          }
        })
        Text('第三种样式，右边有文字').fontColor(Color.Red)
        TitleBarComp({
          title: '设置三',
          isShowRight: true,
          rightTitle: '右边',
          rightClick: () => {
            ToastUtil.showToast('右边')
          }
        })
        Text('第四种，右边有图片').fontColor(Color.Red)
        TitleBarComp({
          title: '设置四',
          isShowRight: true,
          rightImage: $r('app.media.ic_share_article'),
          rightClick: () => {
            ToastUtil.showToast('右边')
          }
        })
      }
      .width(CommonConst.FULL_PARENT)
      .height(CommonConst.FULL_PARENT)
      .backgroundColor($r('app.color.white'))
    }
    .hideTitleBar(true)

实现图三效果图

背景：这个逻辑比较复杂，一步步优化实现，为啥还需要自定义，直接用官方自带的Tabs+TabContent就可以实现啊；如果只是针对于一行都是简单文字切换那还好，但是对于那种，左边、右边是图片+中间是文字用自带的就不行了，因为下面的内容的宽度是铺满屏幕的宽度的，所以需要自定义。
1、定义需要的参数，自定义左边视图，右边视图，内容，下划线，是否滑动等，具体可以看完整代码。

@Param currentTabIndex: number = 0;
  @Param tabContentArr: boolean[] = []; //存储页面状态
  private tabsController: TabsController = new TabsController();
  @Param tabs: Array<TabBarModel> = [];
  //左边视图
  @BuilderParam tabBarLeft: () => void = this.barLeft;
  //右边视图
  @BuilderParam tabBarRight: () => void = this.barRight;
  //内容
  @BuilderParam tabContentBuilder: ($$: TabBarModel) => void = this._TabContentBuilder;
  //是否显示下划线
  @Param isShowDivider: boolean = false;
  //是否滑动
  @Param scrollable: boolean = false;
  //顶部中间视图是否居中 true居中 false 默认 居左
  @Param isTabBarCenter: boolean = false;
  //选中字体颜色
  @Param selectFontColor: ResourceColor = $r('app.color.color_222222');
  //滑动条是否显示
  @Param isDividerVisible: boolean = true;
  //更新
  @Event changeFactory: (currentTabIndex: number, isShowDivider: boolean) => void = (currentTabIndex: number, isShowDivider: boolean) => {
  }

2、自定义顶部视图，List替换tabBar 配合Tabs 左视图–tabBar–右视图

Column() {
      //切换
      this.customTabBar()
      //下划线
      Divider()
        .color($r('app.color.color_F0F0F0'))
        .visibility(this.isShowDivider ? Visibility.Visible : Visibility.None)
      //TabContent中的tabBar居中显示，所以暂时不用tabBar
      Tabs({ controller: this.tabsController, barPosition: BarPosition.Start }) {
        ForEach(this.tabs, (item: TabBarModel, index: number) => {
          TabContent() {
            //滑到哪个页面再加载,防止一块加载
            if (this.currentTabIndex === index || this.tabContentArr[index]) {
              this.tabContentBuilder(item)
            }
          }

          // .tabBar()
        }, (item: string) => item)
      }
      .layoutWeight(1)
      .barHeight(0) //隐藏tabBar
      .scrollable(this.scrollable)
      .onChange(index => {
        this.tabContentArr[index] = true
        this.changeFactory(index,this.tabs[index].isShowDivider)
      })
    }.width(CommonConst.FULL_PARENT)
    .backgroundColor($r('app.color.white'))

3、 List实现【标题+横线】选中效果

  @Builder
  customTabBar() {
    Row() {
      //左边自定义
      this.tabBarLeft()
      //中间
      CustomTabBarComp({
        currentTabIndex: this.currentTabIndex,
        tabs: this.tabs,
        selectFontColor: this.selectFontColor,
        isTabBarCenter: this.isTabBarCenter,
        onTabClick: (index: number) => {
          this.tabsController.changeIndex(index)
        },
        isDividerVisible: this.isDividerVisible
      })
      //右边自定义
      this.tabBarRight()

    }
    .width(CommonConst.FULL_PARENT)
    .height(44)
  }

4、标题+横线 List和TabContent.tabBar都可以用


@ComponentV2
export struct TabBarViewComp {
  @Param private index: number = 0
  @Param currentTabIndex: number = 0
  @Param tabs: Array<TabBarModel> = new Array<TabBarModel>()
  //选中字体颜色
  @Param selectFontColor: ResourceColor = $r('app.color.color_222222');
  @Param onTabClick: (index: number) => void = () => {
  };
  @Param isDividerVisible: boolean = true;

  build() {
    Column() {
      //右上角图片
      Image(this.tabs[this.index].rightSrc)
        .height(11)
        .margin({ left: 46 }).visibility(this.tabs[this.index].isShowRightSrc ? Visibility.Visible : Visibility.None)
      Text(this.tabs[this.index].name)
        .fontSize(this.currentTabIndex == this.index ? 16 : 14)
        .fontColor(this.currentTabIndex == this.index ? this.selectFontColor : $r('app.color.color_505050'))
        .fontWeight(this.currentTabIndex == this.index ? FontWeight.Bold : FontWeight.Normal)
        .margin({ top: this.tabs[this.index].isShowRightSrc ? 0 : 11 })

      Divider()
        .width(16)
        .height(4)
        .backgroundColor($r('app.color.colorPrimary'))
        .margin({ top: 4, bottom: 4 })
        .borderRadius(12)
        .visibility(this.isDividerVisible && this.currentTabIndex == this.index ? Visibility.Visible : Visibility.Hidden)
    }
    .margin({ right: 15 })
    .onClick(() => {
      this.onTabClick(this.index)
    })
  }
}

5、完整代码如下


import { CommonConst } from "utils";
import { TabBarModel } from "../model/TabBarModel";


/**
 * Author:J
 * Describe:自定义tabBar 左视图--tabBar--右视图
 *
 * ListWithTabBarView({}) List替换tabBar 配合Tabs  左视图--tabBar--右视图
 * CustomTabBarComp({}) List实现【标题+横线】选中效果
 * TabBarViewComp({})  标题+横线   List和TabContent.tabBar都可以用
 */
@Preview
@ComponentV2
export struct ListWithTabBarView {
  @Param currentTabIndex: number = 0;
  @Param tabContentArr: boolean[] = []; //存储页面状态
  private tabsController: TabsController = new TabsController();
  @Param tabs: Array<TabBarModel> = [];
  //左边视图
  @BuilderParam tabBarLeft: () => void = this.barLeft;
  //右边视图
  @BuilderParam tabBarRight: () => void = this.barRight;
  //内容
  @BuilderParam tabContentBuilder: ($$: TabBarModel) => void = this._TabContentBuilder;
  //是否显示下划线
  @Param isShowDivider: boolean = false;
  //是否滑动
  @Param scrollable: boolean = false;
  //顶部中间视图是否居中 true居中 false 默认 居左
  @Param isTabBarCenter: boolean = false;
  //选中字体颜色
  @Param selectFontColor: ResourceColor = $r('app.color.color_222222');
  //滑动条是否显示
  @Param isDividerVisible: boolean = true;
  //更新
  @Event changeFactory: (currentTabIndex: number, isShowDivider: boolean) => void = (currentTabIndex: number, isShowDivider: boolean) => {
  }

  aboutToAppear() {
    for (let index = 0; index < this.tabs.length; index++) {
      this.tabContentArr.push(index == 0 ? true : false)

    }
  }

  build() {
    Column() {
      //切换
      this.customTabBar()
      //下划线
      Divider()
        .color($r('app.color.color_F0F0F0'))
        .visibility(this.isShowDivider ? Visibility.Visible : Visibility.None)
      //TabContent中的tabBar居中显示，所以暂时不用tabBar
      Tabs({ controller: this.tabsController, barPosition: BarPosition.Start }) {
        ForEach(this.tabs, (item: TabBarModel, index: number) => {
          TabContent() {
            //滑到哪个页面再加载,防止一块加载
            if (this.currentTabIndex === index || this.tabContentArr[index]) {
              this.tabContentBuilder(item)
            }
          }

          // .tabBar()
        }, (item: string) => item)
      }
      .layoutWeight(1)
      .barHeight(0) //隐藏tabBar
      .scrollable(this.scrollable)
      .onChange(index => {
        this.tabContentArr[index] = true
        this.changeFactory(index,this.tabs[index].isShowDivider)
      })
    }.width(CommonConst.FULL_PARENT)
    .backgroundColor($r('app.color.white'))

    // .padding({ left: 12, right: 12 })

  }

  @Builder
  _TabContentBuilder($$: TabBarModel) {
    Text("tabContentBuilder:()=>{your @Builder View}")
  }

  @Builder
  customTabBar() {
    Row() {
      //左边自定义
      this.tabBarLeft()
      //中间
      CustomTabBarComp({
        currentTabIndex: this.currentTabIndex,
        tabs: this.tabs,
        selectFontColor: this.selectFontColor,
        isTabBarCenter: this.isTabBarCenter,
        onTabClick: (index: number) => {
          this.tabsController.changeIndex(index)
        },
        isDividerVisible: this.isDividerVisible
      })
      //右边自定义
      this.tabBarRight()

    }
    .width(CommonConst.FULL_PARENT)
    .height(44)
  }

  @Builder
  barLeft() {

  }

  @Builder
  barRight() {

  }
}

@ComponentV2
export struct CustomTabBarComp {
  @Param currentTabIndex: number = 0;
  @Param tabs: Array<TabBarModel> = new Array<TabBarModel>()
  //选中字体颜色
  @Param selectFontColor: ResourceColor = $r('app.color.color_222222');
  @Param onTabClick: (index: number) => void = () => {
  };
  @Param isTabBarCenter: boolean = false;
  @Param isDividerVisible: boolean = true;

  build() {

    Row() {
      List() {
        ForEach(this.tabs, (item: TabBarModel, index: number) => {
          ListItem() {
            TabBarViewComp({
              index: index,
              currentTabIndex: this.currentTabIndex,
              tabs: this.tabs,
              selectFontColor: this.selectFontColor,
              onTabClick: (index: number) => {
                this.onTabClick(index)
              },
              isDividerVisible: this.isDividerVisible
            })

          }
        })
      }
      // .width(Constants.FULL_PARENT)
      .height(44)
      .listDirection(Axis.Horizontal)
      .alignListItem(ListItemAlign.Center)
      .scrollBar(BarState.Off)

      // .margin({ right: 8 })
    }
    .layoutWeight(1)
    .justifyContent(this.isTabBarCenter ? FlexAlign.Center : FlexAlign.Start)

  }
}

@ComponentV2
export struct TabBarViewComp {
  @Param private index: number = 0
  @Param currentTabIndex: number = 0
  @Param tabs: Array<TabBarModel> = new Array<TabBarModel>()
  //选中字体颜色
  @Param selectFontColor: ResourceColor = $r('app.color.color_222222');
  @Param onTabClick: (index: number) => void = () => {
  };
  @Param isDividerVisible: boolean = true;

  build() {
    Column() {
      //右上角图片
      Image(this.tabs[this.index].rightSrc)
        .height(11)
        .margin({ left: 46 }).visibility(this.tabs[this.index].isShowRightSrc ? Visibility.Visible : Visibility.None)
      Text(this.tabs[this.index].name)
        .fontSize(this.currentTabIndex == this.index ? 16 : 14)
        .fontColor(this.currentTabIndex == this.index ? this.selectFontColor : $r('app.color.color_505050'))
        .fontWeight(this.currentTabIndex == this.index ? FontWeight.Bold : FontWeight.Normal)
        .margin({ top: this.tabs[this.index].isShowRightSrc ? 0 : 11 })

      Divider()
        .width(16)
        .height(4)
        .backgroundColor($r('app.color.colorPrimary'))
        .margin({ top: 4, bottom: 4 })
        .borderRadius(12)
        .visibility(this.isDividerVisible && this.currentTabIndex == this.index ? Visibility.Visible : Visibility.Hidden)
    }
    .margin({ right: 15 })
    .onClick(() => {
      this.onTabClick(this.index)
    })
  }
}

6、使用案例如下，多种样式的使用：

import { ToastUtil } from '@pura/harmony-utils'
import { ListWithTabBarView, TabBarModel } from 'uicomponents'
import { CommonConst } from 'utils'
import { GetFourStyleTabData, GetOneStyleTabData, GetThreeStyleTabData, GetTwoStyleTabData } from './TestModel'

@Preview
@ComponentV2
export struct TestTabBarView {
  @Local currentTabIndex: number = 0
  @Local isShowDivider: boolean = GetOneStyleTabData[0].isShowDivider
  @Local currentTabIndex2: number = 0
  @Local currentTabIndex3: number = 0
  @Local currentTabIndex4: number = 0

  build() {
    NavDestination() {
      Column() {
        Text('第一种样式').text(Color.Red)
        ListWithTabBarView({
          currentTabIndex: this.currentTabIndex,
          tabs: GetOneStyleTabData,
          tabBarLeft: this.tabBarLeft,
          tabBarRight: this.tabBarRight,
          tabContentBuilder: this.tabContentBuilder,
          isShowDivider: this.isShowDivider,
          changeFactory: (currentTabIndex, isShowDivider) => {
            this.currentTabIndex = currentTabIndex
            this.isShowDivider = isShowDivider
          }
        }).height(80)

        Text('第二种样式').text(Color.Pink)
        ListWithTabBarView({
          currentTabIndex: this.currentTabIndex2,
          tabs: GetTwoStyleTabData,
          tabBarLeft: this.tabBarLeft2,
          tabBarRight: this.tabBarRight2,
          tabContentBuilder: this.tabContentBuilder,
          changeFactory: (currentTabIndex) => {
            this.currentTabIndex2 = currentTabIndex
          },
          isTabBarCenter: true
        }).height(80)
        Text('第三种样式').text(Color.Blue)
        ListWithTabBarView({
          currentTabIndex: this.currentTabIndex,
          tabs: GetThreeStyleTabData,
          tabBarLeft: this.tabBarLeft3,
          tabBarRight: this.tabBarRight3,
          tabContentBuilder: this.tabContentBuilder,
          isTabBarCenter: true,
          changeFactory: (currentTabIndex) => {
            this.currentTabIndex = currentTabIndex
          }
        }).height(80)

        Text('第四种样式').text(Color.Grey)
        ListWithTabBarView({
          currentTabIndex: this.currentTabIndex4,
          tabs: GetFourStyleTabData,
          tabBarLeft: this.tabBarLeft4,
          tabContentBuilder: (tab): void => this.tabContentBuilder(tab),
          isShowDivider: true,
          changeFactory: (currentTabIndex) => {
            this.currentTabIndex4 = currentTabIndex
          }
        }).layoutWeight(1)
          .height(80)
      }
      .width(CommonConst.FULL_PARENT)
      .height(CommonConst.FULL_PARENT)

    }

  }

  @Builder
  tabBarLeft() {
    Text().width(12)
  }

  @Builder
  tabBarRight() {
    Row({ space: 12 }) {
      Image($r('app.media.app_icon'))
        .width(24)
        .visibility(this.currentTabIndex == 0 || this.currentTabIndex == 1 ? Visibility.Visible : Visibility.Hidden)
        .onClick(() => {
          ToastUtil.showToast('点了1')
        })
      Image($r('app.media.app_icon')).width(24).onClick(() => {
        ToastUtil.showToast('点了')
      })
    }.padding({ right: 12 })
  }

  @Builder
  tabContentBuilder($$: TabBarModel) {
    Text($$.id)
  }

  @Builder
  tabBarLeft2() {
    Image($r('app.media.ic_arrow_left')).width(24)
      .margin({ left: 12, right: 6 })
      .onClick(() => {
        ToastUtil.showToast('返回键')
        // ZRouter.pop()
      })
  }

  @Builder
  tabBarRight2() {
    Image($r('app.media.app_icon'))
      .width(24)
      .margin({ right: 12 })
      .onClick(() => {
        ToastUtil.showToast('点了')
      })
  }

  @Builder
  tabBarLeft3() {
    Image($r('app.media.app_icon')).width(24).fillColor(Color.Black)
      .margin({ left: 12, right: 20 })
      .onClick(() => {
        ToastUtil.showToast('设置')
      })
  }

  @Builder
  tabBarRight3() {
    Image(this.currentTabIndex == 1 ? $r('app.media.ic_next') : $r('app.media.ic_local_search'))
      .width(24)
      .margin({ right: 12 })
      .visibility(this.currentTabIndex != 2 ? Visibility.Visible : Visibility.Hidden)
      .onClick(() => {
        ToastUtil.showToast(this.currentTabIndex == 1 ? '点了1' : '搜索')
      })
  }

  @Builder
  tabBarLeft4() {
    Text().width(12)
  }
}

@Extend(Text)
function text(color: ResourceColor) {
  .height(44).width(CommonConst.FULL_PARENT).fontColor(Color.White).backgroundColor(color)
}

以往系列文章

若本文对您稍有帮助，诚望您不吝点赞，多谢。

有兴趣的同学可以点击查看源码

欢迎加我微信一起交流：+V：yinshiyuba

本文使用文章同步助手同步

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,657评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,662评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,143评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,732评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,837评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,036评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,126评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,868评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,315评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,641评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,773评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,859评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,584评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,676评论 2赞 351

HarmonyOS NEXT实战：自定义封装多种样式导航栏组件

涉及知识点和装饰器

背景：

先上效果图

实现 图一 效果图

实现 图二 效果图

实现 图三 效果图