HarmonyOS鸿蒙NEXT中如何深度定制一多组件？以这里tabs为例

尊敬的开发者，您好，tabs一多适配开发者可参考底部/侧边导航，基于一多能力实现响应式布局。深度自定义tabs组件，您具体可以参考如下demo，如果还是不能满足您的需求，您可以提供更详细的需求信息。关于您对WPS应用的一些疑问，您可以询问WPS的官网进行询问。
示例代码如下：

// Cover.ets
import { MediaQuery, mediaquery } from '@kit.ArkUI';

export class MediaListener {
  private static instance: MediaListener | undefined = undefined;

  public static getInstance(): MediaListener {
    if (!MediaListener.instance) {
      MediaListener.instance = new MediaListener();
    }
    return MediaListener.instance;
  }

  // 定义屏幕宽度断点（单位：vp）
  private SM_SCREEN: string = '(max-width: 599vp)'; // 小屏设备
  private MD_SCREEN: string = '(min-width: 600vp) and (max-width: 839vp)'; // 中屏
  private LG_SCREEN: string = '(min-width: 840vp) and (max-width: 1049)'; // 大屏
  private XL_SCREEN: string = '(min-width: 1051vp)'; // 超大屏
  smListener: mediaquery.MediaQueryListener | undefined = undefined;
  mdListener: mediaquery.MediaQueryListener | undefined = undefined;
  lgListener: mediaquery.MediaQueryListener | undefined = undefined;
  xlListener: mediaquery.MediaQueryListener | undefined = undefined;

  initListen(uiContext: UIContext) {
    let mediaQuery: MediaQuery = uiContext.getMediaQuery();
    this.smListener = mediaQuery.matchMediaSync(this.SM_SCREEN);
    this.mdListener = mediaQuery.matchMediaSync(this.MD_SCREEN);
    this.lgListener = mediaQuery.matchMediaSync(this.LG_SCREEN);
    this.xlListener = mediaQuery.matchMediaSync(this.XL_SCREEN);
  }

  startListen() {
    // sm小屏监听回调
    this.smListener?.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        AppStorage.setOrCreate('windowSize', 1);
      }
    });

    // md中屏监听回调
    this.mdListener?.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        AppStorage.setOrCreate('windowSize', 2);
      }
    });

    // lg大屏监听回调
    this.lgListener?.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        AppStorage.setOrCreate('windowSize', 3);
      }
    });

    // xl超大屏监听回调
    this.xlListener?.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        AppStorage.setOrCreate('windowSize', 4);
      }
    });
  }

  stopListen() {
    this.smListener?.off('change');
    this.mdListener?.off('change');
    this.lgListener?.off('change');
    this.xlListener?.off('change');
  }
}

import { MediaListener } from './Cover';
import { CommonModifier, window } from '@kit.ArkUI';

interface TabItem {
  icon: Resource;
  name: string;
  index: number;
}

@Entry
@Component
struct Index {
  windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  tabController: TabsController = new TabsController();
  tabList: TabItem[] = [
    { icon: $r('app.media.startIcon'), name: '页签1', index: 0 }, // 图片资源替换成所需资源
    { icon: $r('app.media.startIcon'), name: '页签2', index: 1 }// 图片资源替换成所需资源
  ];
  childList: string[] = ['精选', '视频', '社区', '新闻'];
  @State tabPosition: BarPosition = BarPosition.End;
  @State isVertical: boolean = false;
  @State imgWidth: number = 40;
  @State nameSize: number = 16;
  @State childNameSize: number = 20;
  // 实现Tabs一多的适配，首先需要使用@StorageProp装饰器获取到全局的断点值。然后就可以使用断点值来进行一多适配了。
  @StorageProp('windowSize') @Watch('windowSizeChange') windowSize: number = 0;
  @State currentIndex: number = 0;
  @State childIndex: number = 0;
  @State childIndex2: number = 0;

  @Builder
  tabBuilder(item: TabItem) {
    Flex({
      direction: this.windowSize <= 2 ? FlexDirection.Column : FlexDirection.Row,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center
    }) {
      Image(item.icon)
        .width(this.imgWidth)
        .aspectRatio(1);
      Text(item.name)
        .fontSize(this.nameSize)
        .fontWeight(FontWeight.Medium)
        .fontColor(this.currentIndex === item.index ? '#007df5' : '#000000');
    }
    .padding(16)
    .width('100%')
    .height('100%');
  }

  @Builder
  childTabBar(item: string, index: number) {
    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text(item)
        .fontSize(this.nameSize)
        .fontWeight(this.childIndex === index ? FontWeight.Bold : FontWeight.Regular);
    }
    .width(80)
    .height('25%');
  }

  windowSizeChange() {
    // 根据窗口大小变化，控制Tabs页签的横竖显示等属性
    if (this.windowSize === 1) {
      this.isVertical = false;
      this.tabPosition = BarPosition.Start;
      this.imgWidth = 40;
      this.nameSize = 16;
      this.childNameSize = 22;
    } else if (this.windowSize === 2) {
      this.isVertical = false;
      this.tabPosition = BarPosition.Start;
      this.imgWidth = 50;
      this.nameSize = 22;
      this.childNameSize = 26;
    } else {
      this.isVertical = true;
      this.tabPosition = BarPosition.End;
      this.imgWidth = 60;
      this.nameSize = 28;
      this.childNameSize = 32;
    }
  }

  aboutToAppear(): void {
    // 设置沉浸式
    this.setImmersive(this.windowStage.getMainWindowSync());
    // 监听窗口大小变化
    MediaListener.getInstance().initListen(this.getUIContext());
    MediaListener.getInstance().startListen();
  }

  aboutToDisappear(): void {
    // 取消监听
    MediaListener.getInstance().stopListen();
  }

  build() {
    Column() {
      Tabs({
        barPosition: this.tabPosition,
        controller: this.tabController,
        index: this.currentIndex
      }) {
        TabContent() {
          Column() {
            Tabs({
              barPosition: this.tabPosition,
              index: this.childIndex
            }) {
              ForEach(this.childList, (item: string, index: number) => {
                TabContent() {
                  Column() {
                    Text(`${item}的内容`)
                      .fontSize(this.childNameSize);
                  }
                  .backgroundColor('#0a59f7')
                  .justifyContent(FlexAlign.Center)
                  .width('100%')
                  .height('100%');
                }
                .tabBar(this.childTabBar(item, index));
              });
            }
            .vertical(this.isVertical)
            .backgroundColor('#ffffff')
            .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
              this.childIndex = targetIndex;
            })
            .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
              others: Array<GestureRecognizer>): GestureJudgeResult => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态
              if (current) {
                let target = current.getEventTargetInfo();
                if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
                  let panEvent = event as PanGestureEvent;
                  if (!this.isVertical && panEvent && panEvent.velocityX < 0 && this.childIndex === 3) { // 内层Tabs滑动到尽头
                    return GestureJudgeResult.REJECT;
                  }
                  if (!this.isVertical && panEvent && panEvent.velocityX > 0 && this.childIndex === 0) { // 内层Tabs滑动到开头
                    return GestureJudgeResult.REJECT;
                  }
                  if (this.isVertical && panEvent && panEvent.velocityY < 0 && this.childIndex === 3) { // 内层Tabs滑动到尽头
                    return GestureJudgeResult.REJECT;
                  }
                  if (this.isVertical && panEvent && panEvent.velocityY > 0 && this.childIndex === 0) { // 内层Tabs滑动到开头
                    return GestureJudgeResult.REJECT;
                  }
                }
              }
              return GestureJudgeResult.CONTINUE;
            }, true);
          }
          .padding(16);
        }
        .backgroundColor('#ffffff')
        .tabBar(this.tabBuilder(this.tabList[0]));

        // 其他TabContent嵌套Tabs的内容，开发者可参考上面代码实现
        TabContent() {
          Tabs({
            barPosition: this.tabPosition,
            index: this.childIndex2
          }) {
            TabContent() {
              Column() {
                Text('a页签的内容')
                  .fontSize(this.childNameSize);
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .height('100%');
            }
            .tabBar('a');

            TabContent() {
              Column() {
                Text('b页签的内容')
                  .fontSize(this.childNameSize);
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .height('100%');
            }
            .tabBar('b');
          }
          .vertical(this.isVertical)
          .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
            this.childIndex2 = targetIndex;
          })
          .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
            others: Array<GestureRecognizer>): GestureJudgeResult => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态
            if (current) {
              let target = current.getEventTargetInfo();
              if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
                let panEvent = event as PanGestureEvent;
                if (!this.isVertical && panEvent && panEvent.velocityX < 0 && this.childIndex2 === 1) { // 内层Tabs滑动到尽头
                  return GestureJudgeResult.REJECT;
                }
                if (!this.isVertical && panEvent && panEvent.velocityX > 0 && this.childIndex2 === 0) { // 内层Tabs滑动到开头
                  return GestureJudgeResult.REJECT;
                }
                if (this.isVertical && panEvent && panEvent.velocityY < 0 && this.childIndex2 === 1) { // 内层Tabs滑动到尽头
                  return GestureJudgeResult.REJECT;
                }
                if (this.isVertical && panEvent && panEvent.velocityY > 0 && this.childIndex2 === 0) { // 内层Tabs滑动到开头
                  return GestureJudgeResult.REJECT;
                }
              }
            }
            return GestureJudgeResult.CONTINUE;
          }, true);
        }
        .tabBar(this.tabBuilder(this.tabList[1]));

        // ...
      }
      .backgroundColor('#f1f3f5')
      .barHeight(this.isVertical ? '100%' : this.imgWidth + 80)
      .barWidth(this.isVertical ? this.imgWidth + 80 : '100%')
      .vertical(this.isVertical)
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        this.currentIndex = targetIndex;
      });
    }
    .width('100%')
    .height('100%');
  }

  // 设置沉浸式
  setImmersive(mainWindow: window.Window) {
    try {
      mainWindow.setWindowLayoutFullScreen(true)
        .then(() => {
          console.info(`Succeeded in setting immersive mode.`);
        })
        .catch((err: BusinessError) => {
          console.error(`Failed to set immersive mode. Code: ${err.code}, message: ${err.message}`);
        });
      mainWindow.setWindowDecorVisible(false);
    } catch (error) {
      let err = error as BusinessError;
      console.error(`Failed to set immersive type. Code: ${err.code}, message: ${err.message}`);
    }
  }
}

在EntryAbility文件设置：

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    AppStorage.setOrCreate('windowStage',windowStage)
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }