鸿蒙ArkUI开发-Tabs组件的使用
在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的” 两个内容视图的切换。
arkui开发框架提供了一种页签容器组件tabs，开发者通过tabs组件可以很容易的实现内容视图的切换。页签容器tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。
本文将详细介绍tabs组件的使用。
tabs组件的简单使用tabs组件仅可包含子组件tabcontent，每一个页签对应一个内容视图即tabcontent组件。下面的示例代码构建了一个简单的页签页面：
@entry@componentstruct tabsexample { private controller: tabscontroller = new tabscontroller() build() { column() { tabs({ barposition: barposition.start, controller: this.controller }) { tabcontent() { column().width('100%').height('100%').backgroundcolor(color.green) } .tabbar('green') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.blue) } .tabbar('blue') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.yellow) } .tabbar('yellow') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.pink) } .tabbar('pink') } .barwidth('100%') // 设置tabbar宽度 .barheight(60) // 设置tabbar高度 .width('100%') // 设置tabs组件宽度 .height('100%') // 设置tabs组件高度 .backgroundcolor(0xf5f5f5) // 设置tabs组件背景颜色 } .width('100%') .height('100%') }}效果图如下：
上面示例代码中，tabs组件中包含4个子组件tabcontent，通过tabcontent的tabbar属性设置tabbar的显示内容。使用通用属性width和height设置了tabs组件的宽高，使用barwidth和barheight设置了tabbar的宽度和高度。
说明
tabcontent组件不支持设置通用宽度属性，其宽度默认撑满tabs父组件。tabcontent组件不支持设置通用高度属性，其高度由tabs父组件高度与tabbar组件高度决定。设置tabbar布局模式因为tabs的布局模式默认是fixed的，所以tabs的页签是不可滑动的。当页签比较多的时候，可能会导致页签显示不全，将布局模式设置为scrollable的话，可以实现页签的滚动。 tabs的布局模式有fixed（默认）和scrollable两种：
barmode.fixed：所有tabbar平均分配barwidth宽度（纵向时平均分配barheight高度）,页签不可滚动，效果图如下：
barmode.scrollable：每一个tabbar均使用实际布局宽度，超过总长度（横向tabs的barwidth，纵向tabs的barheight）后可滑动。
当页签比较多的时候，可以滑动页签，下面的示例代码将barmode设置为barmode.scrollable，实现了可滚动的页签：@entry@componentstruct tabsexample { private controller: tabscontroller = new tabscontroller() build() { column() { tabs({ barposition: barposition.start, controller: this.controller }) { tabcontent() { column() .width('100%') .height('100%') .backgroundcolor(color.green) } .tabbar('green') tabcontent() { column() .width('100%') .height('100%') .backgroundcolor(color.blue) } .tabbar('blue') ... } .barmode(barmode.scrollable) .barwidth('100%') .barheight(60) .width('100%') .height('100%') } }}设置tabbar位置和排列方向 tabs组件页签默认显示在顶部，某些场景下您可能希望tabs页签出现在底部或者侧边，您可以使用tabs组件接口中的参数barposition设置页签位置。此外页签显示位置还与vertical属性相关联，vertical属性用于设置页签的排列方向，当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。 barposition的值可以设置为barposition.start（默认值）和barposition.end：
barposition.startvertical属性方法设置为false（默认值）时，页签位于容器顶部。tabs({ barposition: barposition.start }) { ...}.vertical(false) .barwidth('100%') .barheight(60)效果图如下：
vertical属性方法设置为true时，页签位于容器左侧。
tabs({ barposition: barposition.start }) { ...}.vertical(true) .barwidth(100) .barheight(200)效果图如下：
barposition.endvertical属性方法设置为false时，页签位于容器底部。tabs({ barposition: barposition.end }) { ...}.vertical(false) .barwidth('100%') .barheight(60)效果图如下：
vertical属性方法设置为true时，页签位于容器右侧。
tabs({ barposition: barposition.end}) { ...}.vertical(true) .barwidth(100) .barheight(200)效果图如下：
自定义tabbar样式tabbar的默认显示效果如下所示：
往往开发过程中，ux给我们的设计效果可能并不是这样的，比如下面的这种底部页签效果：
tabcontent的tabbar属性除了支持string类型，还支持使用@builder装饰器修饰的函数。您可以使用@builder装饰器，构造一个生成自定义tabbar样式的函数，实现上面的底部页签效果，示例代码如下：
@entry@componentstruct tabsexample { @state currentindex: number = 0; private tabscontroller: tabscontroller = new tabscontroller(); @builder tabbuilder(title: string, targetindex: number, selectedimg: resource, normalimg: resource) { column() { image(this.currentindex === targetindex ? selectedimg : normalimg) .size({ width: 25, height: 25 }) text(title) .fontcolor(this.currentindex === targetindex ? '#1698ce' : '#6b6b6b') } .width('100%') .height(50) .justifycontent(flexalign.center) .onclick(() = > { this.currentindex = targetindex; this.tabscontroller.changeindex(this.currentindex); }) } build() { tabs({ barposition: barposition.end, controller: this.tabscontroller }) { tabcontent() { column().width('100%').height('100%').backgroundcolor('#00cb87') } .tabbar(this.tabbuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal'))) tabcontent() { column().width('100%').height('100%').backgroundcolor('#007dff') } .tabbar(this.tabbuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal'))) } .barwidth('100%') .barheight(50) .onchange((index: number) = > { this.currentindex = index; }) }}示例代码中将barposition的值设置为barposition.end，使页签显示在底部。使用@builder修饰tabbuilder函数，生成由image和text组成的页签。同时也给tabs组件设置了tabscontroller控制器，当点击某个页签时，调用changeindex方法进行页签内容切换。 最后还需要给tabs添加onchange事件，tab页签切换后触发该事件，这样当我们左右滑动内容视图的时候，页签样式也会跟着改变。
泛在电力物联网只主有什么技术
扩声系统声反馈原理
LED摇棒原理图
打造最具活力的操作系统开源社区，全产业链共享多样性算力创新价值
NI成功主办第八届高校教师交流会
鸿蒙ArkUI开发-Tabs组件的使用
安世亚太荣获“2023数字化转型十大贡献企业”
关于大族超能小幅面精密切割系列产品的展示和应用
魅族MX7什么时候发布？魅族MX7最新消息：联发科X30能否战胜小米6
浅析电源转换芯片TPS5430的特点及应用
3D产业销额三年将超百亿美元 索尼欲借其转身
什么是二次谐波？二次谐波的定义？
芯片分为哪几类 芯片分类汇总
凌力尔特推出过压保护控制器LT4363
在天气冷的时候磷酸铁锂电池续航衰减比三元锂电池快
数据港拟与阿里巴巴合作建数据中心
华为mate20Pro和华为P30Pro该如何选择
强化数据共享，推动智慧城市高质量发展
基于DSP的自动对焦系统
为什么PCB上要有晶振？晶振的类型和作用
arkui开发框架提供了一种页签容器组件tabs，开发者通过tabs组件可以很容易的实现内容视图的切换。页签容器tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。
本文将详细介绍tabs组件的使用。
tabs组件的简单使用tabs组件仅可包含子组件tabcontent，每一个页签对应一个内容视图即tabcontent组件。下面的示例代码构建了一个简单的页签页面：
@entry@componentstruct tabsexample { private controller: tabscontroller = new tabscontroller() build() { column() { tabs({ barposition: barposition.start, controller: this.controller }) { tabcontent() { column().width('100%').height('100%').backgroundcolor(color.green) } .tabbar('green') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.blue) } .tabbar('blue') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.yellow) } .tabbar('yellow') tabcontent() { column().width('100%').height('100%').backgroundcolor(color.pink) } .tabbar('pink') } .barwidth('100%') // 设置tabbar宽度 .barheight(60) // 设置tabbar高度 .width('100%') // 设置tabs组件宽度 .height('100%') // 设置tabs组件高度 .backgroundcolor(0xf5f5f5) // 设置tabs组件背景颜色 } .width('100%') .height('100%') }}效果图如下：
上面示例代码中，tabs组件中包含4个子组件tabcontent，通过tabcontent的tabbar属性设置tabbar的显示内容。使用通用属性width和height设置了tabs组件的宽高，使用barwidth和barheight设置了tabbar的宽度和高度。
说明
tabcontent组件不支持设置通用宽度属性，其宽度默认撑满tabs父组件。tabcontent组件不支持设置通用高度属性，其高度由tabs父组件高度与tabbar组件高度决定。设置tabbar布局模式因为tabs的布局模式默认是fixed的，所以tabs的页签是不可滑动的。当页签比较多的时候，可能会导致页签显示不全，将布局模式设置为scrollable的话，可以实现页签的滚动。 tabs的布局模式有fixed（默认）和scrollable两种：
barmode.fixed：所有tabbar平均分配barwidth宽度（纵向时平均分配barheight高度）,页签不可滚动，效果图如下：
barmode.scrollable：每一个tabbar均使用实际布局宽度，超过总长度（横向tabs的barwidth，纵向tabs的barheight）后可滑动。
当页签比较多的时候，可以滑动页签，下面的示例代码将barmode设置为barmode.scrollable，实现了可滚动的页签：@entry@componentstruct tabsexample { private controller: tabscontroller = new tabscontroller() build() { column() { tabs({ barposition: barposition.start, controller: this.controller }) { tabcontent() { column() .width('100%') .height('100%') .backgroundcolor(color.green) } .tabbar('green') tabcontent() { column() .width('100%') .height('100%') .backgroundcolor(color.blue) } .tabbar('blue') ... } .barmode(barmode.scrollable) .barwidth('100%') .barheight(60) .width('100%') .height('100%') } }}设置tabbar位置和排列方向 tabs组件页签默认显示在顶部，某些场景下您可能希望tabs页签出现在底部或者侧边，您可以使用tabs组件接口中的参数barposition设置页签位置。此外页签显示位置还与vertical属性相关联，vertical属性用于设置页签的排列方向，当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。 barposition的值可以设置为barposition.start（默认值）和barposition.end：
barposition.startvertical属性方法设置为false（默认值）时，页签位于容器顶部。tabs({ barposition: barposition.start }) { ...}.vertical(false) .barwidth('100%') .barheight(60)效果图如下：
vertical属性方法设置为true时，页签位于容器左侧。
tabs({ barposition: barposition.start }) { ...}.vertical(true) .barwidth(100) .barheight(200)效果图如下：
barposition.endvertical属性方法设置为false时，页签位于容器底部。tabs({ barposition: barposition.end }) { ...}.vertical(false) .barwidth('100%') .barheight(60)效果图如下：
vertical属性方法设置为true时，页签位于容器右侧。
tabs({ barposition: barposition.end}) { ...}.vertical(true) .barwidth(100) .barheight(200)效果图如下：
自定义tabbar样式tabbar的默认显示效果如下所示：
往往开发过程中，ux给我们的设计效果可能并不是这样的，比如下面的这种底部页签效果：
tabcontent的tabbar属性除了支持string类型，还支持使用@builder装饰器修饰的函数。您可以使用@builder装饰器，构造一个生成自定义tabbar样式的函数，实现上面的底部页签效果，示例代码如下：
@entry@componentstruct tabsexample { @state currentindex: number = 0; private tabscontroller: tabscontroller = new tabscontroller(); @builder tabbuilder(title: string, targetindex: number, selectedimg: resource, normalimg: resource) { column() { image(this.currentindex === targetindex ? selectedimg : normalimg) .size({ width: 25, height: 25 }) text(title) .fontcolor(this.currentindex === targetindex ? '#1698ce' : '#6b6b6b') } .width('100%') .height(50) .justifycontent(flexalign.center) .onclick(() = > { this.currentindex = targetindex; this.tabscontroller.changeindex(this.currentindex); }) } build() { tabs({ barposition: barposition.end, controller: this.tabscontroller }) { tabcontent() { column().width('100%').height('100%').backgroundcolor('#00cb87') } .tabbar(this.tabbuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal'))) tabcontent() { column().width('100%').height('100%').backgroundcolor('#007dff') } .tabbar(this.tabbuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal'))) } .barwidth('100%') .barheight(50) .onchange((index: number) = > { this.currentindex = index; }) }}示例代码中将barposition的值设置为barposition.end，使页签显示在底部。使用@builder修饰tabbuilder函数，生成由image和text组成的页签。同时也给tabs组件设置了tabscontroller控制器，当点击某个页签时，调用changeindex方法进行页签内容切换。 最后还需要给tabs添加onchange事件，tab页签切换后触发该事件，这样当我们左右滑动内容视图的时候，页签样式也会跟着改变。
泛在电力物联网只主有什么技术
扩声系统声反馈原理
LED摇棒原理图
打造最具活力的操作系统开源社区，全产业链共享多样性算力创新价值
NI成功主办第八届高校教师交流会
鸿蒙ArkUI开发-Tabs组件的使用
安世亚太荣获“2023数字化转型十大贡献企业”
关于大族超能小幅面精密切割系列产品的展示和应用
魅族MX7什么时候发布？魅族MX7最新消息：联发科X30能否战胜小米6
浅析电源转换芯片TPS5430的特点及应用
3D产业销额三年将超百亿美元 索尼欲借其转身
什么是二次谐波？二次谐波的定义？
芯片分为哪几类 芯片分类汇总
凌力尔特推出过压保护控制器LT4363
在天气冷的时候磷酸铁锂电池续航衰减比三元锂电池快
数据港拟与阿里巴巴合作建数据中心
华为mate20Pro和华为P30Pro该如何选择
强化数据共享，推动智慧城市高质量发展
基于DSP的自动对焦系统
为什么PCB上要有晶振？晶振的类型和作用