前一章节，我们完成了欢迎页的逻辑和UI，沉浸式效果也做了讲解和实现，本文简单介绍一下主页面Tabs组件的应用。
Tabs组件介绍
Tabs组件是当前所有应用中最常用的容器组件之一，用户可以在一个页面内快速实现视图内容的切换，极大地提高效率。
Tabs组件主要包含两个部分：TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。
Tabs组件的写法通常如下所示：
Tabs() {
TabContent() {
Text('首页的内容').fontSize(30)
}
.tabBar('首页')
TabContent() {
Text('推荐的内容').fontSize(30)
}
.tabBar('推荐')
TabContent() {
Text('我的内容').fontSize(30)
}
.tabBar("我的")
}
导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、发现、推荐、我的
...
}
关于Tabs组件的更多用法，请见官方文档Tabs组件。
Tabs组件实现
关于我的tabs实现，直接上代码吧。
定义一个tabs数组（此处第三项是icon资源）
export class AppConstants {
......
/**
* Tab array.
*/
static readonly TAB_ARRAY: string[] = [
'app.string.tab_homepage',
'app.string.tab_friend',
'app.media.icon_add',
'app.string.tab_msg',
'app.string.tab_mine'
];
}
在build绘制
build() {
NavDestination() {
Column() {
Tabs({ index: this.curTabIndex, controller: this.tabsController }) {
TabContent() {
HomePage()
}
.width(AppConstants.FULL_PERCENT)
.height($r('app.string.content_height'))
TabContent() {
Text($r(this.tabArray[1]))
.fontSize($r('app.integer.text_size_20'))
}
.width(AppConstants.FULL_PERCENT)
.height($r('app.string.content_height'))
TabContent() {
Text('发布')
.fontSize($r('app.integer.text_size_20'))
}
.width(AppConstants.FULL_PERCENT)
.height($r('app.string.content_height'))
TabContent() {
Text($r(this.tabArray[3]))
.fontSize($r('app.integer.text_size_20'))
}
.width(AppConstants.FULL_PERCENT)
.height($r('app.string.content_height'))
TabContent() {
Text($r(this.tabArray[4]))
.fontSize($r('app.integer.text_size_20'))
}
.width(AppConstants.FULL_PERCENT)
.height($r('app.string.content_height'))
}
.scrollable(false)
// .barHeight($r('app.integer.tabs_bar_height'))
// .animationDuration(TabContentConstants.TAB_TABS_DURATION)
.onChange((index: number) => {
this.curTabIndex = index;
})
Row() {
ForEach(this.tabArray, (item: string, index: number) => {
Column() {
if (index == 2) {
if (this.curTabIndex == index) {
Image($r(item)).width(28).height(24).objectFit(ImageFit.Fill).borderRadius(2)
} else {
Image($r(item)).width(24).height(21).objectFit(ImageFit.Fill).borderRadius(2)
}
} else {
Text($r(item))
.fontColor(this.curTabIndex === index ? '#ffffff' : '#66ffffff')
.margin({ top: 4 })
}
}
.width(50)
.margin(10)
.height(60)
.onClick(() => {
this.curTabIndex = index;
this.tabsController.changeIndex(this.curTabIndex);
})
}, (item: string, index: number) => JSON.stringify(item) + index)
}
.offset({
y: $r('app.integer.tab_row_offset')
})
.width(AppConstants.FULL_PERCENT)
// Extend to all non-secure areas.
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.backgroundColor($r('app.color.tab_black'))
.justifyContent(FlexAlign.SpaceAround)
}
}
.hideTitleBar(true)
.onReady((context: NavDestinationContext) => {
this.pathStack = context.pathStack
LogUtils.info("current page config info is ：" , JSON.stringify(context.getConfigInRouteMap()));
})
}
NavDestination组件从API Version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API Version 11之前的版本需配合expandSafeArea属性实现安全区避让。
以上代码中把tabs标签和tabcontent的绘制实现了抽离，其中tabs角标为0的页面content引用的是home模块的自定义view，大家可以自定义view名称和UI，前文已讲过导出UI或接口的方法，此处不再赘述。
此外，本文在build内部包含了一层NavDestination组件，这是因为前面几篇文章中关于页面跳转，我用的是router跳转，由于官方不再推荐使用router，我这边已改用Navigation组件，大家如果还使用的router，把外面包的这层NavDestination去掉即可。
Navigation作为当前HarmonyOS NEXT开发中主推的路由组件，后续将会频繁被使用到。关于Navigation组件的特性和使用，下一篇文章再做具体讲解。
