【HarmonyOS NEXT】自定义Tabs使其中间项突出显示2

【问题描述】

• 要求中间的tabBar突出到内容处

【上一版本】

• 【HarmonyOS NEXT】自定义Tabs使其中间项突出显示，这个版本是我根据自己的当时的想法实现的，使用了Stack、Canvas实组件，
• 虽然功能实现了，但是代码并不优雅。

【当前版本】

• 这个版本我参考了社区的方案AddressExchangeView.ets，我重写的一个版本。
• 这个版本还顺带修复了特定条件下，未显示TabContent内容也会被渲染的问题。

【代码】

• 这里把所有代码都写在一个文件中，方便大家快速CV看效果，实际开发自己拆分模块。
• 图标改为自己项目的图标

import {
    promptAction } from '@kit.ArkUI';

@Entry
@Component
export struct C02TabView {
   
  @Provide selectedIndex: number = 0; // 初始化被选定的tabBar下标
  private controller: TabsController = new TabsController(); // 初始化Tab控制器

  build() {
   
    Column() {
   
      Tabs({
    index: this.selectedIndex, barPosition: BarPosition.End, controller: this.controller }) {
   
        HomeCom()

        NewCom()

        OneKeyCom()

        ShopCom()

        MyCom()

        TabContent()
      }
      .tabsStyle()
      .onChange((index: number) => {
   
        this.selectedIndex = index;
      })

      // 自定义TabBar组件
      CustomTabBar({
    selectedIndex: $selectedIndex })
    }.width('100%')
    .height('100%')
  }
}

@Component
struct HomeCom {
   
  aboutToAppear(): void {
   
    console.log('x_log', '首页')
  }

  build() {
   
    TabContent() {
   
      List() {
   
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => {
   
          ListItem() {
   
            Text('首页' + item)
              .fontSize(40)
              .padding(30)