HarmonyOS组件之Tabs

Tabs

1.1概念

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

1.2子组件

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

1.2.1TabContent

1. 有几个页签就写入几个TabContent
2. 和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 = 0private 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})}}@Buildertab(tabName: string, tabIndex: number) {Row() {Text(tabName).border({width: { bottom: this.CurrentIndex === tabIndex ? 2 : 0 },color: Color.Blue})}.onClick(() => {// 点击目标页签后，让当前的页签索引等于目标页签的索引this.CurrentIndex = tabIndexthis.TabController.changeIndex(this.CurrentIndex)}).width(120).height(30)}
}