有没有HarmonyOS鸿蒙Next中间突出的TabBar案例

有没有HarmonyOS鸿蒙Next中间突出的TabBar案例 有没有中间突出的TabBar 案例

4 回复 
@Entry
@Component
struct TabsDemo03 {
  @State selectedIndex: number = 0

  build() {
    Column() {
      Text(this.selectedIndex + '')
      Tabs() {
        TabContent() {
          Text('首页')
        }
        .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '首页', 0, $r('app.media.startIcon')))


        TabContent() {
          Text('分类')
        }
        .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '分类', 1, $r('app.media.startIcon')))

        TabContent() {
          Text('活动')
        }
        .tabBar(this.centerTabBarBuilder($r('app.media.startIcon')))

        TabContent() {
          Text('购物车')
        }
        .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '购物车', 3, $r('app.media.startIcon')))

        TabContent() {
          Text('我的')
        }
        .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '我的', 4, $r('app.media.startIcon')))
      }
      .barPosition(BarPosition.End)
      .scrollable(true)
      .layoutWeight(1)
      .onChange((index: number) => {
        this.selectedIndex = index
      })
      .onTabBarClick((index: number) => {
        this.selectedIndex = index
      })

    }
  }

  @Builder
  tabBarBuilder(img: ResourceStr, text: string, index: number, selectedImg: ResourceStr) {

    Column() {
      Image(this.selectedIndex == index ? selectedImg : img)
        .width(30)
      Text(text)
        .fontColor(this.selectedIndex == index ? '#eebf7e' : Color.Black)
    }
  }

  @Builder
  centerTabBarBuilder(img: ResourceStr) {

    Image(img)
      .width(50)

  }
}

cke_452.png

更多关于有没有HarmonyOS鸿蒙Next中间突出的TabBar案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的；感谢，

HarmonyOS Next中实现突出式TabBar

在HarmonyOS Next中实现突出式TabBar，可通过自定义TabBar组件实现。使用@Builder装饰器构建自定义布局，结合Stack组件将中间按钮置于顶层并设置zIndex。

关键步骤包括：

  • 使用TabContent与自定义TabBar绑定。
  • 通过position属性调整中间按钮位置。
  • 利用offset实现突出效果。

示例代码中，中间按钮通常使用固定定位并添加阴影或放大动画增强视觉突出。

在HarmonyOS Next中，实现中间突出的TabBar（通常称为“凸起式TabBar”或“悬浮按钮式导航”）是一个常见的UI需求。目前，HarmonyOS Next的官方ArkUI组件库（如Tabs、TabContent）并未直接提供这种预设样式，但可以通过自定义布局和组件组合来实现。

核心实现思路：

  1. 使用Flex或Row布局：作为底部TabBar的整体容器。
  2. 中间项特殊处理：
    • 将中间的Tab项设计为一个独立的组件（如Button或Column）。
    • 通过样式（如margin负值、position定位）使其在垂直方向上“突出”于其他Tab项。
    • 通常需要为其设置更大的尺寸、不同的形状（如圆形）和阴影效果以增强视觉突出感。
  3. 两侧Tab项均等分布：使用Flex布局的justifyContent: FlexAlign.SpaceAround或SpaceBetween来让两侧的Tab项平均占据剩余空间。
  4. 状态管理：通过@State装饰器管理当前选中的索引，并据此更新所有Tab项（包括中间突出项）的选中状态（如颜色、图标变化）。

一个简化的代码结构示例：

@Entry
@Component
struct FancyTabBar {
  @State currentIndex: number = 0
  private tabItems: string[] = ['首页', '发现', '', '消息', '我的'] // 中间项占位

  build() {
    Column() {
      // 主页内容区，根据currentIndex切换
      this.buildContent()

      // 底部凸起式TabBar
      Row() {
        ForEach(this.tabItems, (item: string, index: number) => {
          if (index === 2) { // 中间突出项
            Column() {
              Button('+') // 或使用自定义图标
                .size({ width: 60, height: 60 })
                .backgroundColor('#007DFF')
                .borderRadius(30)
                .shadow({ radius: 5, color: '#888', offsetX: 0, offsetY: 2 })
                .onClick(() => {
                  this.currentIndex = index
                  // 这里可以触发中间按钮的特殊动作，如发布页面
                })
            }
            .layoutWeight(1)
            .margin({ top: -20 }) // 关键：向上偏移实现突出
          } else { // 普通Tab项
            Column() {
              Image(this.currentIndex === index ? 'selected_icon' : 'normal_icon')
                .width(24)
                .height(24)
              Text(item)
                .fontSize(12)
                .fontColor(this.currentIndex === index ? '#007DFF' : '#666')
            }
            .layoutWeight(1)
            .onClick(() => {
              this.currentIndex = index
            })
          }
        })
      }
      .width('100%')
      .height(60)
      .backgroundColor('#FFFFFF')
      .shadow({ radius: 10, color: '#EEE', offsetX: 0, offsetY: -2 })
      .justifyContent(FlexAlign.SpaceAround)
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildContent() {
    // 根据currentIndex构建对应的页面内容
  }
}

关键点说明：

  • 布局：使用Row容纳所有Tab项，并通过justifyContent: FlexAlign.SpaceAround使它们水平均匀分布。
  • 中间项突出：中间项的容器（Column）通过margin({ top: -20 })向上偏移，使其部分超出TabBar的背景范围。同时，该按钮本身被设置为更大的圆形并添加阴影。
  • 交互：所有Tab项（包括中间按钮）的点击事件都会更新currentIndex，以同步更新选中状态。中间按钮通常还关联一个独立功能（如发布）。

资源获取：

  • 官方示例：在HarmonyOS Next的官方示例应用“Samples”中，搜索或查看与“Tab”或“Navigation”相关的案例，虽然可能没有直接对应的凸起式TabBar，但其中关于Tabs、自定义导航栏的示例提供了重要的基础参考。
  • 社区资源：在HarmonyOS开发者社区、GitHub或Gitee上，已有开发者分享过类似的自定义TabBar实现，可以搜索“HarmonyOS 凸起TabBar”、“悬浮底部导航”等关键词查找相关开源项目或代码片段。

这种实现方式灵活度高，可以完全控制TabBar的视觉样式和交互逻辑，是当前在HarmonyOS Next中实现此类效果的主流方法。

回到顶部