当前位置：首页 > news >正文

HarmonyOS组件之Tabs

news 来源：原创 2025/5/10 20:39:15

Tabs

1.1概念

Tabs 视图切换容器，通过相适应的页签进行视图页面的切换的容器组件
每一个页签对应一个内容视图
Tabs拥有一种唯一的子集元素TabContent

1.2子组件

不支持自定义组件为子组件，仅可包含子组件TabContent，以及渲染控制类型 if/else 和 ForEach 并且 if/else 和ForEach下页仅支持TabContent，不支持自定义组件

1.2.1TabContent

有几个页签就写入几个TabContent
和build一样，只能有唯一一个子组件

1.3参数（接口）

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

   Tabs({
       //默认的页面索引
      index: 0, 
       // 页签的位置
      barPosition: BarPosition.End,
       // controller: 控制器，控制页签样式
      controller: this.TabController
      
    }) {
      //有几个页签就写几个TabContent
      //和build一样只能有一个唯一的子组件
      TabContent() {
          
      }
     }

参数名	参数类型
barPosition	BarPosition
index	Number
controller	TabsController

barPosition：设置页签位置，（配合vertical属性一并使用）
index：起始索引，设置当前视图页签的索引，默认是0
controller：Tabs控制器

1.3.1 BarPosition枚举

名称	描述
Start	vertical属性方法设置为true时，页签位于容器左侧； vertical属性方法设置为false时，页签为容器顶部
End	vertical属性方法设置为true时，页签位于容器右侧； vertical属性方法设置为false时，页签为容器底部

注意：属性vertical（value：boolean）：vertical默认值为false，表示内容页和导航栏垂直方向排列

1.3.2 Controller 页面控制器

自定义：

private TabController: TabsController = new TabsController()

1.4属性

vertical ( boolean )

默认值：false，设置页签位置

scrollable : boolean

设置是否可以通过滑动页面进行页面的切换

BarMode

设置TabBar布局模式
- fixed
- Scrollable：每一个TabBar均使用实际的布局宽度，超过总长度（横向的tabs的barWidth，纵向的tabs的barHeight）可滑动

2.1代码

@Entry
@Component
struct Test01 {
  @State message: string = 'Hello World';
  // 当前页签的索引
  @State CurrentIndex: number = 0
  private TabController: TabsController = new TabsController()
  private scroller: Scroller = new Scroller();

  /*

  *滚动条的滚动范围是父级的高度
  * 滚动条的高度 =父级的高度/x                       x=内容区域的高度/父级的高度
   * Scroll
   *    可滚动的容器组件，
   *    当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动
   *    滚动的前提：主轴方向上的大小小于内容大小
   *  参数：
   *    scroller：可滚动组件的控制器，用于与可滚动的组件进行绑定
   *
   *  属性：
   *    scrollable：设置滚动的方向，默认值ScrollDirection.Vertical
   *    scrollBar：设置滚动条的状态，默认值BarState.Auto
   *      on    默认开启      off：默认关闭      Auto：视情况出现
   *    scrollBarWidth（）；滚动条的宽度
   *    scrollBarColor（）：设置滚动条颜色
   *
   *    建议：在最外层用Scroll，防止内容超出页面
   *
   * */
  build() {

    Column() {
      Scroll(){
        Row() {
          this.tab('账号登录', 0)
          this.tab('短信登录', 1)
          this.tab('短信登录', 2)
          this.tab('短信登录', 3)
      }

      }
      .scrollable(ScrollDirection.Horizontal)

      // tab控制器
      Tabs({ controller: this.TabController }) {
        TabContent() {
          Column() {
            Scroll() {
              Text('第一页')
                .backgroundColor(Color.Red)
                .height(10000)
            }

          }.width('100%')
          .height(500)

        }
        .backgroundColor(Color.Pink)

        TabContent() {
          Text('第二页')
        }
      }
      // .barWidth()
      .barHeight(0)
      // 捕获视图的的行为 onChange只有一个参数，对于不同的组件具有不同的意义
      // 该index表示为当前视图的索引
      .onChange((index) => {
        this.CurrentIndex = index
      })
    }
  }

  @Builder
  tab(tabName: string, tabIndex: number) {
    Row() {
      Text(tabName)
        .border({
          width: { bottom: this.CurrentIndex === tabIndex ? 2 : 0 },
          color: Color.Blue
        })
    }
    .onClick(() => {
      // 点击目标页签后，让当前的页签索引等于目标页签的索引
      this.CurrentIndex = tabIndex
      this.TabController.changeIndex(this.CurrentIndex)
    })
    .width(120)
    .height(30)
  }
}