HarmonyOS鸿蒙Next中爱奇艺的Tab是怎么实现的

背景知识:

可以使用 HdsNavigation + HdsTabs 来实现，barOverlap 数据来确定使用漂浮tab。

问题解决：

示例代码：

import { HdsNavigation, HdsTabs, HdsTabsController, ScrollEffectType, hdsMaterial } from '@kit.UIDesignKit';
import { LengthMetrics, promptAction } from '@kit.ArkUI';
import common from '@ohos.app.ability.common';

interface HomeTabItem {
    title: string;
    subTitle: string;
    tag: string;
}

@Entry
@Component
struct HdsNavigationPage {
    private tabsController: HdsTabsController = new HdsTabsController();
    @State currentIndex: number = 0;
    private tabTitles: string[] = [
        '首页',
        '免费',
        'Ai',
        '会员',
        '我的'
    ];
    context = this.getUIContext().getHostContext() as common.UIAbilityContext

    build() {
        HdsNavigation() {
            HdsTabs({ controller: this.tabsController, index: this.currentIndex }) {
                TabContent() {
                    this.TabPage(this.tabTitles[0])
                }
                .tabBar(this.tabTitles[0])

                TabContent() {
                    this.TabPage(this.tabTitles[1])
                }
                .tabBar(this.tabTitles[1])

                TabContent() {
                    this.TabPage(this.tabTitles[2])
                }
                .tabBar(this.tabTitles[2])

                TabContent() {
                    this.TabPage(this.tabTitles[3])
                }
                .tabBar(this.tabTitles[3])

                TabContent() {
                    this.TabPage(this.tabTitles[4])
                }
                .tabBar(this.tabTitles[4])
            }
            .width('100%')
            .height('100%')
            .barPosition(BarPosition.End)
            .vertical(false)
            //设置是否 悬浮的tab
            .barOverlap(true)
            .onChange((index: number) => {
                console.log(`HdsNavigation index=${index}`)
                this.currentIndex = index;
            })
            .onContentWillChange((currentIndex: number, comingIndex: number) => {
              //注意请使用 comingIndex 来判断
                if (comingIndex == 2) {
                    //可以在这里处理点击ai后进行处理点击ai tab的按钮逻辑
                    this.getUIContext().getPromptAction().showToast({
                        message: "Ai",
                        duration: 2000,
                        bottom: 80
                    })
                    return false
                } else {
                    return true
                }
                // onContentWillChange 方法的返回值很明确，内容将改变吗？ true 改变 false不改变

            })
            //悬浮tab样式
            .barFloatingStyle({
                barBottomMargin: 28,
                systemMaterialEffect: {
                    materialType: hdsMaterial.MaterialType.ADAPTIVE,
                    materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
                }
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor($r('sys.color.ohos_id_color_background'))
        .mode(NavigationMode.Stack)
        .hideBackButton(true)

    }

    @Builder
    private TabPage(title: string) {
        Scroll() {
            Column({ space: 12 }) {
                this.Banner(title)
            }
            .width('100%')
            .padding({
                left: 16,
                right: 16,
                top: 16,
                bottom: 24
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Grey)
        .edgeEffect(EdgeEffect.Spring)
    }

    @Builder
    private Banner(title: string) {
        Column({ space: 8 }) {
            Text(title)
                .fontSize(28)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
            Text('HdsNavigation + HdsTabs')
                .fontSize(15)
                .fontColor('#EAF1FF')
        }
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.End)
        .width('100%')
        .height(168)
        .padding(20)
        .borderRadius(16)
        .linearGradient({
            angle: 135,
            colors: [
                ['#0A59F7', 0],
                ['#19A08E', 1]
            ]
        })
    }
}

真机演示：