鸿蒙开发中，在Tabs中的tabBar如何添加其他组件？

Question

鸿蒙开发中，在Tabs中的tabBar如何添加其他组件？

Answer 1

Tabs组件用于创建带有多个页签的界面，而tabBar则用于定义这些页签的样式和行为。如果你想在tabBar中添加其他组件，例如图标或按钮，你可以通过自定义TabContent组件的方式来实现。

import { Tabs, TabContent, Component, Resource, Element } from '@ohos.ets.component';
 
@Component 
struct MyTabBar {
  @State currentIndex: number = 0;
 
  build() {
    Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
      TabContent() {
        // 第一个页签的内容 
        Text('Tab 1 Content').fontSize(20).margin({ top: 50 }).align(Alignment.Center) 
      }.tabBar(($r('app.media.icon1') as Resource).objectFit(ImageFit.Contain), 'Tab 1') 
 
      TabContent() {
        // 第二个页签的内容 
        Text('Tab 2 Content').fontSize(20).margin({ top: 50 }).align(Alignment.Center) 
      }.tabBar(($r('app.media.icon2') as Resource).objectFit(ImageFit.Contain), 'Tab 2')
    }
    .onChange((index: number) => {
      this.currentIndex = index; 
    }); 
  }
}