使用Tabs组件提升页面内容的聚焦与分类效率

news2024/9/20 14:36:25

当页面信息量较大时，为了提高用户的浏览效率，我们需要对页面内容进行有效的分类和展示。HarmonyOS提供的Tabs组件是一个理想的解决方案，可以在一个页面内快速切换视图内容，提升用户查找信息的效率，同时减少用户在单次操作中获取的信息量。

Tabs组件的基本结构与布局

Tabs组件的页面结构主要包括两个部分：TabContent和TabBar。TabContent是实际显示的内容页，TabBar则是导航页签栏。Tabs组件的布局支持三种导航方式：底部导航、顶部导航和侧边导航，每种导航方式适用于不同的使用场景。

Tabs() {
    TabContent() {
        Text('首页内容').fontSize(30)
    }
    .tabBar('首页')

    TabContent() {
        Text('推荐内容').fontSize(30)
    }
    .tabBar('推荐')

    TabContent() {
        Text('发现内容').fontSize(30)
    }
    .tabBar('发现')

    TabContent() {
        Text('我的内容').fontSize(30)
    }
    .tabBar("我的")
}

底部导航：最常见的应用主导航

底部导航是应用中最常见的一种导航方式，通常位于应用的一级页面。用户打开应用时，可以快速分辨出应用的主要功能模块，方便用户单手操作。

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

顶部导航：适用于内容分类较多的场景

顶部导航更适合用于需要频繁切换且内容分类较多的应用场景，例如资讯类应用。顶部导航可以将内容按类型进一步细分，让用户快速找到自己感兴趣的内容。

Tabs({ barPosition: BarPosition.Start }) {
    // TabContent内容示例：关注、视频、游戏、数码、科技
    ...
}

侧边导航：横屏应用的首选

侧边导航通常用于横屏界面，由于用户的视觉习惯是从左到右，侧边导航栏默认为左侧。这种布局更多出现在横屏游戏或多功能操作界面中。

Tabs({ barPosition: BarPosition.Start, vertical: true }) {
    // TabContent内容示例：首页、发现、推荐、我的
    ...
}

限制导航栏的滑动切换

在一些多级分类的页面中，导航栏的滑动切换可能会引起用户的困惑。因此，我们可以通过设置scrollable属性来限制导航栏的滑动切换。

Tabs({ barPosition: BarPosition.End, scrollable: false }) {
    // 底部导航示例，滑动切换已禁用
    ...
}

固定与滚动导航栏

固定导航栏适用于内容分类较少且不具有拓展性的场景，例如底部导航。滚动导航栏则适用于内容分类较多的场景，例如顶部导航栏。

// 固定导航栏示例
Tabs({ barPosition: BarPosition.End, barMode: BarMode.Fixed }) {
    // 固定底部导航栏示例
    ...
}

// 滚动导航栏示例
Tabs({ barPosition: BarPosition.Start, barMode: BarMode.Scrollable }) {
    // 滚动顶部导航栏示例
    ...
}

自定义导航栏：提高用户体验

在应用主页面，通常我们会希望结合文字与图标来表示导航页签的内容。HarmonyOS支持通过自定义函数组件来实现这一需求，增强用户体验。

@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
        Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
            .size({ width: 25, height: 25 })
        Text(title)
            .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
}

TabContent() {
    Column(){
        Text('我的内容')  
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#007DFF')
}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

自定义页签切换逻辑

在使用自定义导航栏后，默认的Tabs逻辑不会处理页签的切换逻辑。我们可以通过onChange事件方法监听索引变化，自行实现页签的切换逻辑。

@Entry
@Component
struct TabsExample1 {
    @State currentIndex: number = 2

    @Builder tabBuilder(title: string, targetIndex: number) {
        Column() {
            Text(title)
                .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
        }
    }

    build() {
        Column() {
            Tabs({ barPosition: BarPosition.End }) {
                TabContent() {
                    ...
                }.tabBar(this.tabBuilder('首页', 0))

                TabContent() {
                    ...
                }.tabBar(this.tabBuilder('发现', 1))

                TabContent() {
                    ...
                }.tabBar(this.tabBuilder('推荐', 2))

                TabContent() {
                    ...
                }.tabBar(this.tabBuilder('我的', 3))
            }
            .animationDuration(0)
            .backgroundColor('#F1F3F5')
            .onChange((index: number) => {
                this.currentIndex = index
            })
        }.width('100%')
    }
}

在这里插入图片描述