HarmonyOS组件之Tabs

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() { } } 参数名参数类型barPositionBarPositionindexNumbercontrollerTabsController barPosition：设置页签位置，（配合vertical属性一并使用）index：起始索引，设置当前视图页签的索引，默认是0controller：Tabs控制器 1.3.1 BarPosition枚举 名称描述Startvertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签为容器顶部Endvertical属性方法设置为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布局模式 fixedScrollable：每一个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) } }