OpenHarmony应用开发-容器组件Tabs/TabContent

素年锦时静待君丶
发布于 2023-4-17 18:32
浏览
0收藏

版本:v3.2 Release

Tabs

通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

仅可包含子组件​​TabContent​​。

接口

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

参数:

参数名

参数类型

必填

参数描述

barPosition

BarPosition

设置Tabs的页签位置。

默认值:BarPosition.Start

index

number

设置初始页签索引。

默认值:0

说明:

设置为小于0的值时按默认值显示。

可选值为[0, TabContent子节点数量-1]。

设置不同值时,默认生效切换动效,可以设置animationDuration为0关闭动画。

controller

​TabsController​

设置Tabs控制器。

BarPosition枚举说明

名称

描述

Start

vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。

End

vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

vertical

boolean

设置为false是为横向Tabs,设置为true时为纵向Tabs。

默认值:false

scrollable

boolean

设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。

默认值:true

barMode

BarMode

TabBar布局模式,具体描述见BarMode枚举说明。

默认值:BarMode.Fixed

barWidth

number | Length8+

TabBar的宽度值。

说明:

设置为小于0或大于Tabs宽度值时,按默认值显示。

barHeight

number | Length8+

TabBar的高度值。

说明:

设置为小于0或大于Tabs宽度值时,按默认值显示。

animationDuration

number

TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。

默认值:300

说明:

设置为小于0或百分比时,按默认值显示。

BarMode枚举说明

名称

描述

Scrollable

每一个TabBar均使用实际布局宽度,超过总长度(横向Tabs的barWidth,纵向Tabs的barHeight)后可滑动。

Fixed

所有TabBar平均分配barWidth宽度(纵向时平均分配barHeight高度)。

事件

除支持​​通用事件​​外,还支持以下事件:

名称

功能描述

onChange(event: (index: number) => void)

Tab页签切换后触发的事件。

- index:当前显示的index索引,索引从0开始计算。

触发该事件的条件:

1、TabContent支持滑动时,组件触发滑动时触发。

2、通过​​控制器​​API接口调用。

3、通过​​状态变量​​构造的属性值进行修改。

4、通过页签处点击触发。

TabsController

Tabs组件的控制器,用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

导入对象

controller: TabsController = new TabsController()
    ts
changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

参数:

参数名

参数类型

必填

参数描述

value

number

页签在Tabs里的索引值,索引值从0开始。

说明:

设置小于0或大于最大数量的值时,该事件失效。

示例

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.TabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.TabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.TabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

OpenHarmony应用开发-容器组件Tabs/TabContent-鸿蒙开发者社区

TabContent

仅在Tabs中使用,对应一个切换页签的内容视图。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

支持单个子组件。

说明:

可内置系统组件和自定义组件,支持渲染控制类型(​​if/else​​​、​​ForEach​​​和​​LazyForEach​​)。

接口

TabContent()

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

tabBar

string | Resource | {

icon?: string | Resource,

text?: string | Resource

}

| ​​CustomBuilder​8+

设置TabBar上显示内容。

CustomBuilder: 构造器,内部可以传入组件(API8版本以上适用)。

>  说明:

> 如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。

设置的内容超出tabbar页签时进行裁切。

tabBar9+

​SubTabBarStyle​​​ | ​​BottomTabBarStyle​

设置TabBar上显示内容。

SubTabBarStyle: 子页签样式,参数为文字。

BottomTabBarStyle: 底部页签和侧边页签样式,参数为文字和图片。

说明:

底部样式没有下划线效果。

icon异常时显示灰色图块。

说明:

  • TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
  • vertical属性为false值,交换上述2个限制。
  • TabContent组件不支持内容过长时页面的滑动,如需页面滑动,可嵌套List使用。

SubTabBarStyle9+

子页签样式。

constructor9+

constructor(content: string | Resource)

SubTabBarStyle的构造函数。

参数:

参数名

参数类型

必填

参数描述

content

string | ​​Resource​

页签内的文字内容。

BottomTabBarStyle9+

底部页签和侧边页签样式。

constructor9+

constructor(icon: string | Resource, text: string | Resource)

BottomTabBarStyle的构造函数。

参数:

参数名

参数类型

必填

参数描述

icon

string | ​​Resource​

页签内的图片内容。

text

string | ​​Resource​

页签内的文字内容。

示例

示例1:

// xxx.ets
@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(0))

        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(1))

        TabContent() {
          Column() {
            Text('Tab3')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(2))

        TabContent() {
          Column() {
            Text('Tab4')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(3))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }.width('100%')
  }
}

OpenHarmony应用开发-容器组件Tabs/TabContent-鸿蒙开发者社区

示例2:

// xxx.ets
@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text('Tab')
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent()
          .tabBar(this.TabBuilder(0))
        TabContent()
          .tabBar(this.TabBuilder(1))
        TabContent()
          .tabBar(this.TabBuilder(2))
        TabContent()
          .tabBar(this.TabBuilder(3))
      }
      .vertical(true)
      .barWidth(96)
      .barHeight(414)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(96)
      .height(414)
      .backgroundColor('#F1F3F5')
      .margin({ top: 52 })
    }.width('100%')
  }
}

OpenHarmony应用开发-容器组件Tabs/TabContent-鸿蒙开发者社区

示例3:

// xxx.ets
@Entry
@Component
struct TabBarStyleExample {
  build() {
    Column({ space: 5 }) {
      Text("子页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new SubTabBarStyle('Pink'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new SubTabBarStyle('Yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(new SubTabBarStyle('Blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new SubTabBarStyle('Green'))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)
      Text("底部页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)
      Text("侧边页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
        }
        .vertical(true).scrollable(true).barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(400)
    }
  }
}

OpenHarmony应用开发-容器组件Tabs/TabContent-鸿蒙开发者社区




文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md/​

已于2023-4-17 18:32:37修改
收藏
回复
举报
回复
    相关推荐