《HarmonyOS应用开发基础》 课件知识点2-11 页签切换容器组件Tabs.pptx

页签切换容器组件Tabs

Tabs概述Tabs是通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。它仅可包含子组件TabContent。每个TabContent对应的页签图标和文字用属性tabBar设置，Tabs的控制器和事件可以配合进行页签的切换控制。如右图所示。接口描述：Tabs(value?:{barPosition?:BarPosition,index?:number,controller?:?TabsController})

Tabs参数?private?controller:?TabsController?=?new?TabsController();…??????Tabs({????????barPosition:?BarPosition.End,?//指定页签位置????????index:0,???//index：指定初始页签索引，默认值为?0????????controller:?this.controller?//controller：设置Tabs控制器??????})…其他代码略Tabs通过参数来设置页签位置、初始页签索引和控制器。参数说明：参数名参数类型必填参数描述barPositionBarPosition否设置Tabs的页签位置。默认值：BarPosition.Startindexnumber否设置初始页签索引。默认值：0controllerTabsController否设置Tabs控制器。使用示例：

Tabs的页签位置Tabs使用参数barPosition配合属性vertical可指定页签出现的位置。

Tabs子组件TabContentTabs的内容视图子组件TabContent，只在Tabs中使用，TabContent使用时不需要传参数，它的tabBar属性,用来设置tabBar显示标签。TabContent内只能由一个子组件。tabBar的参数类型：string|Resource|CustomBuilder|{icon?:string|Resource,text?:string|Resource}

Tabs子组件TabContent使用示例：Tabs({??barPosition:?BarPosition.End}){??TabContent()?{????Column(){?Text(消息页).fontSize(50)}??????.width(100%).height(100%).backgroundColor(#ffd1e0ef)??}.size({width:?100%,?height:?100%})?//?.tabBar(消息)??//直接使用文字??.tabBar({icon:$r(app.media.icon),text:消息})//使用图标和文字…//其他TabContent略}

Tabs的属性Tabs除支持通用属性外，还支持以下属性。名称参数类型描述verticalboolean设置为false是为横向Tabs，设置为true时为纵向Tabs。默认值：falsescrollableboolean设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。默认值：truebarModeBarModeTabBar布局模式，具体描述见BarMode枚举说明。默认值：BarMode.FixedbarWidthnumber|Length8+TabBar的宽度值。barHeightnumber|Length8+TabBar的高度值。animationDurationnumberTabContent滑动动画时长。默认值：200BarMode.Scrollable:每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。。BarMode.Fixed:所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。

Tabs的事件Tabs除支持通用事件外，还支持onChange事件。onChange(event:(index:number)=void)：Tab页签切换后触发的事件，可以在获取箭头函数的参数index。private?currentIndex:?number?=?0;//当前页签的索引Tabs({…}){...}.onChange((index:?number)={??this.currentIndex?=?index;})