22、鸿蒙/布局/选项卡 (Tabs)

2024-07-17 本文已影响0人圆梦人生

概述

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

基本布局

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

Tabs.png

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

Tabs使用花括号包裹TabContent，如图2，其中TabContent显示相应的内容页。

image.png

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置tabBar属性，可以设置其对应页签中的内容，tabBar作为内容的页签。

Tabs(){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
}

底部导航

底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部，用户打开应用，能够分清整个应用的功能分类，以及页签对应的内容，并且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在，其作用是将用户关心的内容按照功能进行分类，迎合用户使用习惯，方便在不同模块间的内容切换。
导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。

Tabs({ barPosition: BarPosition.End }){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
}

侧边导航栏

侧边导航是应用较为少见的一种导航模式，更多适用于横屏界面，用于对应用进行导航操作，由于用户的视觉习惯是从左到右，侧边导航栏默认为左侧侧边栏。
实现侧边导航栏需要将Tabs的vertical属性设置为true，vertical默认值为false，表明内容页和导航栏垂直方向排列。

Tabs(){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
}.vertical(true).barWidth(80).barHeight(200)

vertical为false时，tabbar的宽度默认为撑满屏幕的宽度，需要设置barWidth为合适值。
vertical为true时，tabbar的高度默认为实际内容的高度，需要设置barHeight为合适值。

限制导航栏的滑动切换

默认情况下，导航栏都支持滑动切换，在一些内容信息量需要进行多级分类的页面，如支持底部导航+顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现冲突，此时需要限制底部导航的滑动，避免引起不好的用户体验。

控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限制滑动切换页签则需要设置为false。

Tabs(){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
}.scrollable(false)

固定导航栏

当内容分类较为固定且不具有拓展性时，例如底部导航内容分类一般固定，分类数量一般在3-5个，此时使用固定导航栏。固定导航栏不可滚动，无法被拖拽滚动，内容均分tabBar的宽度。

Tabs的barMode属性用于控制导航栏是否可以滚动，默认值为BarMode.Fixed。

Tabs(){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
}.barMode(BarMode.Fixed)

滚动导航栏

滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，需要使用可滚动的导航栏，支持用户点击和滑动来加载隐藏的页签内容。

滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，BarMode.Scrollable表示可滚动导航栏。

Tabs(){
        TabContent(){
          Text('我的内容')
        }.tabBar('我的').backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar('推荐').backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar('商城').backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)

        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)
        TabContent(){
          Text('新闻内容')
        }.tabBar('新闻').backgroundColor(Color.Green)

}.barMode(BarMode.Scrollable)

自定义导航栏

对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。

@State currentIndex: number = 2;
// ....
Tabs({ barPosition: BarPosition.End }){
        TabContent(){
          Text('我的内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '我的'}).backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '推荐'}).backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '商城'}).backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '新闻'}).backgroundColor(Color.Green)
}

切换至指定页签

在不使用自定义导航栏时，默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑，页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时，页签栏需要同步切换至内容页对应的页签。

此时需要使用Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值传递给currentIndex，实现页签的切换。

Button('切换下一个tab').onClick(()=>{
        if(this.currentIndex >= 3) {
          this.currentIndex = 0
        }else{
          this.currentIndex+=1
        }
})
Tabs({ barPosition: BarPosition.End, index: this.currentIndex }){
        TabContent(){
          Text('我的内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '我的'}).backgroundColor(Color.Gray)
        TabContent(){
          Text('推荐内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '推荐'}).backgroundColor(Color.Yellow)
        TabContent(){
          Text('商城内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '商城'}).backgroundColor(Color.Orange)
        TabContent(){
          Text('新闻内容')
        }.tabBar({icon: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', text: '新闻'}).backgroundColor(Color.Green)
}.onChange((index: number)=>{
        console.log('tabs index === ', index);
}).height(500)