目录
Tabs介绍Tabs使用例子TabBar 样式设置定义菜单样式对象-NavigationItem定义一个底部菜单栏集合数据-NavigationList修改TabBuilder
Tab 组件控制题外话
现在市场上的大部分应用，主页都是才用底部导航栏菜单作为页面主体框架来展示， 在鸿蒙中是使用Tabs组件实现，下面我们开始讲解Tab组件的使用。
Tabs介绍
Tabs是一个通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图，它仅可包含子组件TabContent，同时搭配 TabsController使用。
TabsController 是Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。 具体可查看官网介绍，这里就不多描述。
Tabs使用例子
@Entry
@Component
export struct MainPage {
@State mCurrentPage: number = 0;
private mTabController: TabsController = new TabsController()
build() {
Tabs({ barPosition: BarPosition.End, controller: this.mTabController }) {
TabContent() {
Text('第一个页面')
}
.tabBar(this.TabBuilder(0))
TabContent() {
Text('第二个页面')
}
.tabBar(this.TabBuilder(1))
TabContent() {
Text('第三个页面')
}
.tabBar(this.TabBuilder(2))
}
.scrollable(true)
.vertical(false)
.barMode(BarMode.Fixed)
.onChange((index) => {
this.mCurrentPage = index;
})
}
@Builder TabBuilder(index: number) {
Column() {
Image(index == this.mCurrentPage ? $r('app.media.icon_selected'): $r('app.media.icon_normal'))
.width('24vp')
.height('24vp')
.objectFit(ImageFit.Contain)
Text('菜单')
.fontSize('10fp')
.fontWeight(500)
.fontColor(this.mCurrentPage === index ? $r('app.color.blue_3d9dff') : $r('app.color.gray_999999'))
.margin({ top: '4vp' })
}.justifyContent(FlexAlign.Center)
}
}
这里对上面代码进行讲解，
首先定义一个Tab容器组件，在其中摆放了三个TabContent子组件；使用vertical属性跟barPosition: BarPosition.End配合即可以将导航栏显示在页面底部；使用scrollable开启手势滑动切换tab页；定义 onChange函数，可以监听tab页面切换事件，这里我们定义了一个全局变量记录当前tab显示子页索引，通过该值可对底部栏的图标跟文本进行样式高亮处理。使用@Builder注解定义了一个TabBuilder的布局绘制方法，进行tab底部导航栏的绘制
上面代码是一个比较粗糙的例子，由于tabBar设置调用同一个TabBuilder，因此绘制后，每个底部菜单是一模一样的效果。
下面我们对其进行修改，让它支持多个不同菜单绘制
TabBar 样式设置
定义菜单样式对象-NavigationItem
export interface NavigationItem {
id: number;
text: Resource; //文本
icon_normal: Resource; // 默认图标
icon_selected: Resource; // 选中图标
}
定义一个底部菜单栏集合数据-NavigationList
export const NavigationList: NavigationItem[] = [
{
icon_normal: $r('app.media.main_icon_home'),
icon_selected: $r('app.media.main_icon_home'),
text: $r('app.string.tab_home'),
id: 0
},
{
icon_normal: $r('app.media.main_icon_life'),
icon_selected: $r('app.media.main_icon_life'),
text: $r('app.string.tab_life'),
id: 1
},
{
icon_normal: $r('app.media.main_icon_user'),
icon_selected: $r('app.media.main_icon_user'),
text: $r('app.string.tab_user'),
id: 2
},
]
修改TabBuilder
@Builder TabBuilder(item: NavigationItem) {
Column() {
Image(this.mCurrentPage === this.getTabIndexByItem(item) ? item.icon_selected : item.icon_normal)
.width('24vp')
.height('24vp')
.objectFit(ImageFit.Contain)
Text(item.text)
.fontSize('10fp')
.fontWeight(500)
.fontColor(this.mCurrentPage === this.getTabIndexByItem(item) ? $r('app.color_blue_3d9dff') : $r('app.color.gray_999999'))
.margin({ top: '4vp' })
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
这里是根据NavigationItem ID动态找在数组中的索引。
getTabIndexByItem(navigationItem: NavigationItem): number {
return this.mTabDataList.findIndex(item => item.id === navigationItem.id);
}
通过传入一个NavigationItem，对TabBuilder中的组件样式进行动态配置。
Tab 组件控制
如果想要通过代码去控制tab切换到指定子页，可以使用 TabController来对tab进行控制，使用changeIndex函数进行切换。
题外话
本文到此结束，谢谢阅读，由于时间匆忙，只能进行简单讲解，一些tab滑动动画、tabItem的点击样式、tabbar分隔线的问题，后续有时间再进行补充。如有疑问，评论区沟通探讨。
发表评论