HarmonyOS ArkUI容器类组件-Tabs组件（Tabs、TabContent）

最新推荐文章于 2025-03-18 14:54:13 发布

愿天堂没有996

最新推荐文章于 2025-03-18 14:54:13 发布

阅读量1.6k

点赞数 25

分类专栏：鸿蒙开发 HarmonyOS OpenHarmony 文章标签： harmonyos 移动开发 UI布局 OpenHarmony ArkUI 鸿蒙开发鸿蒙

本文链接：https://blog.csdn.net/m0_70748458/article/details/139330332

版权

ArkUI开发框架提供了一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图的容器组件 Tabs ，它允许包含子组件且子组件只能是 TabContent ，本节笔者介绍一下 Tabs 的简单使用。

Tabs定义介绍

interface TabsInterface {
  (value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}

declare enum BarPosition {
  Start,
  End,
}

barPosition：指定页签位置来创建 Tabs 容器组件， BarPosition 定义了以下两种类型：
- Start（默认值）：当 vertical 属性方法设置为 true 时，页签位于容器左侧； vertical 属性方法设置为 false 时，页签位于容器顶部。
- End： vertical 属性方法设置为 true 时，页签位于容器右侧； vertical 属性方法设置为 false 时，页签位于容器底部。
index：指定初次初始页签索引，默认值为 0 。
controller：设置 Tabs 控制器。

简单样例如下所示：

@Entry @Component struct SideBarContainerTest {

  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({// Tabs不设置vertical属性时，默认上下排版
        barPosition: BarPosition.Start,
        controller: this.controller
      }) {
        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#aabbcc")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("消息")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#bbccaa")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("联系人")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#ccaabb")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("动态")
      }
      .size({width: "100%", height: "100%"})
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

样例运行结果如下图所示：

Tabs属性介绍

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  vertical(value: boolean): TabsAttribute;
  scrollable(value: boolean): TabsAttribute;
  barMode(value: BarMode): TabsAttribute;
  barWidth(value: Length): TabsAttribute;
  barHeight(value: Length): TabsAttribute;
  animationDuration(value: number): TabsAttribute;
}