HarmonyOS 鸿蒙Next中tabs选项卡开发

HarmonyOS 鸿蒙Next中tabs选项卡开发

如何实现图中的tabs选项卡点击或滑动页面只会使‘听书’和‘评论·100’两个标签的样式发生变化，不会影响最左边单独的返回按钮


更多关于HarmonyOS 鸿蒙Next中tabs选项卡开发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你可以使用层叠布局 (Stack)来实现你说的效果。

@Entry
@Component
struct Index {
  @State currentIndex:number = 0;
  tabsController = new TabsController();

  @Builder
  tabBuilder(title: ResourceStr, index: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === index ? '#0a59f7' : '#66000000')
    }
    .onClick(() => {
      this.currentIndex = index;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Image($r('sys.media.ohos_ic_public_arrow_left'))
        .margin({top: 12})
        .width(32)
        .height(32)
      Tabs({ controller: this.tabsController }) {
        TabContent() {
          Text('111')
        }.tabBar(this.tabBuilder('听书', 0))
        TabContent() {
          Text('222')
        }.tabBar(this.tabBuilder('评论', 1))
      }
      .onChange((index: number) => {
        this.currentIndex = index;
      })
    }.width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中tabs选项卡开发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中开发Tabs选项卡，需使用ArkUI的Tabs组件。主要步骤如下：

  1. 在ets文件中导入Tabs及相关组件：
import { Tabs, TabContent } from '@ohos.arkui.advanced'
  1. 基本结构示例：
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    // 第一个选项卡内容
  }.tabBar('标签1')

  TabContent() {
    // 第二个选项卡内容
  }.tabBar('标签2')
}
  1. 常用属性：
  • barPosition：控制选项卡位置（Start/End）
  • index：当前激活的选项卡索引
  • controller：选项卡控制器

支持通过swipeGesture属性控制是否允许手势滑动切换。

在HarmonyOS Next中实现这种Tabs选项卡效果，可以通过以下方式：

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

  build() {
    Row() {
      // 左侧返回按钮
      Image($r('app.media.back'))
        .width(40)
        .height(40)
        .margin({left: 10})
        .onClick(() => {
          // 返回逻辑
        })

      // Tabs选项卡部分
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          Text('听书内容')
        }.tabBar('听书')

        TabContent() {
          Text('评论内容')
        }.tabBar('评论·100')
      }
      .barWidth(200)  // 控制宽度
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }
}
  1. 关键点说明：
  • 使用Row布局将返回按钮和Tabs组件水平排列
  • Tabs组件的barPosition设置为Start使其左对齐
  • 通过barWidth控制Tabs的宽度，避免影响返回按钮
  • 使用onChange事件监听选项卡切换
  1. 样式控制： 可以通过currentIndex状态变量来控制不同选项卡的样式：
.tabBar(text: string) {
  Text(text)
    .fontColor(this.currentIndex === index ? '#FF0000' : '#999999')
    .fontSize(16)
    .padding(10)
}

这种实现方式确保了返回按钮独立于Tabs组件的切换逻辑，点击或滑动只会影响"听书"和"评论"两个标签的样式变化。

回到顶部