鸿蒙界面开发（12）：选项卡结构(Tabs)

选项卡结构(Tabs)

当页面信息较多时，为了让用户能够聚焦于当前表现的内容，需要对页面内容举行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换。
根本结构

Tabs组件的页面构成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。

分析
TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

1. Tabs(){
2. TabContent() {
3.    Text('首页的内容').fontSize(30)
4. }
5. .tabBar('首页')
6. ...
7. TabContent() {
8.    Text('...').fontSize(30)
9. }
10. .tabBar('...')
11. }
12. ...

复制代码

导航栏位置利用Tabs的barPosition参数举行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。

1. Tabs({ barPosition: BarPosition.End }) {
2.   // TabContent的内容：首页、发现、推荐、我的
3.   ...
4. }

复制代码

实现侧边导航栏需要将Tabs的vertical属性设置为true，vertical默认值为false，表明内容页和导航栏垂直方向分列。

1. Tabs({ barPosition: BarPosition.Start }) {
2.   // TabContent的内容:首页、发现、推荐、我的
3.   ...
4. }
5. .vertical(true)
6. .barWidth(100)
7. .barHeight(200)

复制代码

分析
vertical为false时，tabbar的宽度默认为撑满屏幕的宽度，需要设置barWidth为合适值。
vertical为true时，tabbar的高度默认为现实内容的高度，需要设置barHeight为合适值。
限制导航栏的滑动切换

默认情况下，导航栏都支持滑动切换，在一些内容信息量需要举行多级分类的页面，如支持底部导航+顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现辩论，此时需要限制底部导航的滑动，制止引起欠好的用户体验。
控制手动滑动切换的属性为scrollable，默认值为true，表现可以滑动，若要限制滑动切换页签则需要设置为false。

1. Tabs({ barPosition: BarPosition.End }) {
2.   // 其他TabContent内容：发现、推荐、我的
3.   ...
4. }
5. .scrollable(false)

复制代码

滑动动画animationDuration

1. .animationDuration():点击滑动的动画时间，不想要动画，可以设为0

复制代码

导航栏

固定导航栏——BarMode.Fixed

当内容分类较为固定且不具有拓展性时，例如底部导航内容分类一样平常固定，分类数量一样平常在3-5个，此时利用固定导航栏。固定导航栏不可滚动，无法被拖拽滚动，内容均分tabBar的宽度。
Tabs的barMode属性用于控制导航栏是否可以滚动，默认值为BarMode.Fixed。

1. Tabs({ barPosition: BarPosition.End }) {
2.   // TabContent的内容：首页、发现、推荐、我的
3.   ...
4. }
5. .barMode(BarMode.Fixed)

复制代码

滚动导航栏BarMode.Scrollable

滚动导航栏可以用于顶部导航栏大概侧边导航栏的设置，内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，需要利用可滚动的导航栏，支持用户点击和滑动来加载隐蔽的页签内容。
滚动导航栏需要设置Tabs组件的barMode属性，BarMode.Scrollable表现可滚动导航栏。

1. Tabs({ barPosition: BarPosition.Start }) {
2.   // TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事
3.   ...
4. }
5. .barMode(BarMode.Scrollable)

复制代码

自定义导航栏

对于底部导航栏，一样平常作为应用主页面功能区分，为了更好的用户体验，会组合笔墨以及对应语义图标表现页签内容，这种情况下，需要自定义导航页签的样式。
设置自定义导航栏需要利用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。

1. 例如这里声明tabBuilder的自定义函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。
2. //参数
3. @Builder tabBuilder(title: string,
4.                 targetIndex: number,
5.                 selectedImg: Resource,
6.                 normalImg: Resource
7. ) {//结构
8.   Column() {//融侨城
9.     Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
10.       .size({ width: 25, height: 25 })
11.     Text(title)
12.       .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
13.   }
14.   .width('100%')
15.   .height(50)
16.   .justifyContent(FlexAlign.Center)
17. }
19. 在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。
20. TabContent() {。。。}
21. .tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

复制代码

切换至指定页签

在不利用自定义导航栏时，默认的Tabs会实现切换逻辑。在利用了自定义导航栏后，默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑，页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时，页签栏需要同步切换至内容页对应的页签。
此时需要利用Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值通报给currentIndex，实现页签的切换。

1. @Entry
2. @Component
3. struct TabsExample1 {
4.   @State currentIndex: number = 0
5.   @Builder tabBuilder(title: string, targetIndex: number) {
6.     Column() {
7.     //判断是否为当前内容页，改变页签的颜色
8.       Text(title) .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
9.     }
10.   }
12.   build() {
13.     Column() {
14.       Tabs({ barPosition: BarPosition.End }) {
15.         TabContent() {...}.tabBar(this.tabBuilder('首页', 0))
16.         ...
17.       }.animationDuration(0).backgroundColor('#F1F3F5')
18.       //onChange事件，监听滑动和点击的时候，都会触发
19.       .onChange((index: number) => {
20.         this.currentIndex = index
21.       })
22.     }.width('100%')
23.   }
24. }

复制代码

2 除此之外，还可以将currentIndex传给Tabs的index参数，通过改变currentIndex来实现跳转至指定索引值对应的TabContent内容。
3 也可以利用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件举行内容页切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

1. @State currentIndex: number = 2
2. private controller: TabsController = new TabsController()
4. Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {...}.height(600)
5. .onChange((index: number) => {
6.    this.currentIndex = index
7. })
9. Button('动态修改index').width('50%').margin({ top: 20 })
10.   .onClick(()=>{
11.     this.currentIndex = (this.currentIndex + 1) % 4
12. })
14. Button('changeIndex').width('50%').margin({ top: 20 })
15.   .onClick(()=>{
16.     let index = (this.currentIndex + 1) % 4
17.     this.controller.changeIndex(index)
18. })

复制代码

4 还可以通过Tabs组件的onContentWillChange接口，设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用，假如回调返回true，新页面可以展示；假如回调返回false，新页面不会展示，仍表现原来页面。

1. Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
2. .onContentWillChange((currentIndex, comingIndex) => {
3.   if (comingIndex == 2) {
4.     return false
5.   }
6.   return true
7. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。