HarmonyOS 鸿蒙Next 应用的Tabs 组件怎么使用

HarmonyOS 鸿蒙Next 应用的Tabs 组件怎么使用 鸿蒙应用中的Tabs组件是一个用于通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。以下是Tabs组件的使用方法：

一、基本结构

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。Tabs组件使用花括号包裹TabContent，其中TabContent显示相应的内容页。

二、常用属性

• barPosition：用于设置导航栏的位置，可以是开头（BarPosition.Start）或结尾（BarPosition.End）。默认情况下，导航栏位于顶部（BarPosition.Start）。当vertical属性为true时，barPosition设置为start，则导航栏位于左侧；设置为end，则导航栏位于右侧。
• vertical：用于设置导航栏的方向，可以是水平（false）或垂直（true）。
• scrollable：控制是否允许滑动。当导航栏的内容过多，无法在一屏内显示完时，可以通过设置scrollable为true来允许滑动。
• animationDuration：设置切换动画的时间，单位为毫秒。
• barMode：设置导航栏的模式，可以是固定（BarMode.Fixed）或滚动（BarMode.Scrollable）。当标签页过多时，可通过barMode属性设置导航栏的滑动。

三、使用方法

1. 基本用法

在鸿蒙应用的页面中，可以通过以下方式使用Tabs组件：

@Entry
@Component
struct TabsDemo {
    build() {
        Tabs() {
            TabContent() {
                Text('首页内容')
            }.tabBar('首页')
            TabContent() {
                Text('推荐内容')
            }.tabBar('推荐')
            TabContent() {
                Text('发现内容')
            }.tabBar('发现')
            TabContent() {
                Text('我的内容')
            }.tabBar('我的')
        }
    }
}

2. 设置导航栏位置

可以通过barPosition属性设置导航栏的位置。例如，将导航栏设置在底部：

Tabs({
    barPosition: BarPosition.End
}) {
    // ...TabContent和tabBar的内容
}

3. 滚动导航栏

当标签页过多，无法在一屏内显示完时，可以通过设置barMode为BarMode.Scrollable来实现滚动导航栏：

Tabs() {
    ForEach(this.titles, (item: string, index: number) => {
        TabContent() {
            Text(`${item}内容`)
        }.tabBar(`${item}`)
    })
}.barMode(BarMode.Scrollable)

其中，this.titles是一个包含所有标签页标题的字符串数组。

4. 自定义导航栏

TabBar在底部时，一般会显示图形和文字，甚至有特殊的图标。可以通过自定义构建函数来实现自定义导航栏：

@Builder
function myBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {
    Column() {
        Image(index == this.selectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)
        if (index === this.selectedIndex) {
            Text(title).fontColor(Color.Orange)
        } else {
            Text(title)
        }
    }
}

@Entry
@Component
struct CustomTabsDemo {
    @State selectedIndex: number = 0

    build() {
        Tabs({barPosition: BarPosition.End}) {
            TabContent() {
                Text('购物')
            }.tabBar(this.myBuildBar(0, '购物', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))
            TabContent() {
                Text('我的')
            }.tabBar(this.myBuildBar(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
            // ...其他TabContent和tabBar的内容
        }.onChange((index: number) => {
            this.selectedIndex = index
        })
    }
}

在上面的代码中，myBuildBar函数用于构建自定义的TabBar，其中selectedIndex用于存储当前选中的TabBar索引。通过onChange事件监听TabBar的切换，并更新selectedIndex的值，从而实现高亮切换效果。

5. 嵌套使用Tabs

Tabs内可以嵌套多个Tabs，以实现更复杂的布局。例如，可以在一个Tabs组件中嵌套另一个Tabs组件：

@Entry
@Component
struct NestedTabsDemo {
    title: string[] = ['直播', '推荐', '热门', '动画', '影视', '新征程', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']

    build() {
        Tabs({barPosition: BarPosition.End}) {
            TabContent() {
                Tabs() {
                    ForEach(this.title, (item: string, index: number) => {
                        TabContent() {
                            Text(`${item}内容`)
                        }.tabBar(`${item}`)
                    })
                }.barMode(BarMode.Scrollable)
            }.tabBar('首页')
            // ...其他TabContent和tabBar的内容
        }.scrollable(false).animationDuration(3000)
    }
}

在上面的代码中，外层的Tabs组件包含一个TabBar和一个内容区域，内容区域中嵌套了另一个Tabs组件。内层的Tabs组件用于显示多个标签页的内容，并通过barMode属性设置为滚动模式。

四、注意事项

• TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
• TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
• 在自定义TabBar时，需要注意高亮切换效果的实现，可以通过监听onChange事件或onTabBarClick事件来更新选中状态。

通过以上方法，可以在鸿蒙应用中灵活地使用Tabs组件来实现标签页切换功能。