HarmonyOS 鸿蒙Next迷你栏适配智感握姿

开发者您好，您可以通过[@ohos.multimodalAwareness.motion (动作感知能力)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-awareness-motion)获取握持手状态，参见获取握持手状态开发指导，需要添加权限： ohos.permission.DETECT_GESTURE，具体申请方式请参考声明权限：

"requestPermissions":[
    {
      "name" : "ohos.permission.DETECT_GESTURE"
    }
  ]

对HdsTabs的barHeight设置为0，通过自定义tabbar和minibar实现窄屏的智感握姿，参考代码如下：

// 从6.0.2(22)版本开始，无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。
import { HdsTabs, HdsTabsController } from '@kit.UIDesignKit';
import { motion } from '@kit.MultimodalAwarenessKit';
import { BusinessError } from '@kit.BasicServicesKit';

// Tab数据模型
interface TabItemData {
  title: string;
  icon: ResourceStr;
  activeIcon: ResourceStr;
}

@Entry
@Component
struct Index {
  // 初始化HdsTabs控制器
  private controller: HdsTabsController = new HdsTabsController();
  @State currentIndex: number = 0;
  @State barReversed: boolean = false; // 是否交换MiniBar和TabBar的位置
  // Tab数据源
  private tabItems: TabItemData[] = [
    { title: '首页', icon: $r('sys.media.ohos_ic_public_clock'), activeIcon: $r('sys.media.ohos_ic_public_clock') }
  ];
  callback: Callback<motion.HoldingHandStatus> = (data: motion.HoldingHandStatus) => {
    // 1左手，2右手
    console.info(`Succeeded in getting data:${data}.`);
    if (data === 1) {
      this.barReversed = true;
    } else if (data === 2) {
      this.barReversed = false;
    }
  };

  onMotion() {
    try {
      motion.on('holdingHandChanged', this.callback);
      console.info('Succeeded in holdingHandChang on.');
    } catch (err) {
      let error = err as BusinessError;
      console.error('Failed on and err code is ' + error.code);
    }
  }

  offMotion() {
    try {
      motion.off('holdingHandChanged');
      console.info('Succeeded in holdingHandChanged off.');
    } catch (err) {
      let error = err as BusinessError;
      console.error('Failed off and err code is ' + error.code);
    }
  }

  // 单个Tab按钮
  @Builder
  TabItemBuilder(item: TabItemData, index: number) {
    Column() {
      Image(this.currentIndex === index ? item.activeIcon : item.icon)
        .width(40)
        .height(40)
        .fillColor(this.currentIndex === index ? '#007DFF' : '#999999');
      Text(item.title)
        .fontSize(10)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#999999')
        .margin({ top: 2 });
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.currentIndex = index;
    });
  }

  @Builder
  TabBuilder() {
    Stack() {
      Column()
        .height(60)
        .width(60)
        .borderRadius(30)
        .foregroundBlurStyle(BlurStyle.Thin,
          {
            colorMode: ThemeColorMode.LIGHT,
            adaptiveColor: AdaptiveColor.DEFAULT,
            scale: 1.0
          });
      Row() {
        ForEach(this.tabItems, (item: TabItemData, index: number) => {
          this.TabItemBuilder(item, index);
        });
      };
    }
    .alignContent(Alignment.Center)
    .height('60')
    .width('60');
  }

  // MiniBar
  @Builder
  MiniBarBuilder() {
    Stack() {
      Column()
        .height(50)
        .width(200)
        .borderRadius(25)
        .foregroundBlurStyle(BlurStyle.Thin,
          {
            colorMode: ThemeColorMode.LIGHT,
            adaptiveColor: AdaptiveColor.DEFAULT,
            scale: 1.0
          });
      Row() {
        Column() {
          Image($r('app.media.startIcon'))
            .width(40)
            .height(40)
            .borderRadius(40);
        }.width(48).height(48).justifyContent(FlexAlign.Center).margin({ left: 4, right: 4 });

        Text('Hello');

        Column() {
          Image($r('sys.media.ohos_ic_public_pause'))
            .width(40)
            .height(40)
            .borderRadius(40);
        }.width(48).height(48).justifyContent(FlexAlign.Center);
      }
      .justifyContent(FlexAlign.Start);
    }
    .alignContent(Alignment.Start)
    .height(50)
    .width(200);
  }

  // 自定义底部栏
  @Builder
  CustomBottomBar() {
    Row() {
      if (this.barReversed) {
        // ====== 交换后：MiniBar 在左，TabBar 在右 ======
        this.MiniBarBuilder();
        this.TabBuilder();
      } else {
        // ====== 默认：TabBar 在左，MiniBar 在右 ======
        this.TabBuilder();

        this.MiniBarBuilder();
      }
    }
    .padding({ left: 10, right: 10 })
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height(56)
    .margin({ bottom: 20 });
  }

  aboutToAppear(): void {
    this.onMotion();
  }

  aboutToDisappear(): void {
    this.offMotion();
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      HdsTabs({ controller: this.controller }) {
        TabContent() {
          Scroll() {
            Column() {
              Image($r('app.media.startIcon'));
              Image($r('app.media.startIcon'));
              Image($r('app.media.startIcon'));
              Image($r('app.media.startIcon'));
            };
          };
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_ic_public_clock'), 'Green'));

        TabContent() {
          Image($r('app.media.startIcon'));
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.wifi_router_fill'), 'Blue'));

        TabContent() {
          Image($r('app.media.startIcon'));
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_ic_public_clock'), 'Yellow'));

      }
      .barHeight(0)
      // 设置barOverlap为true，vertical为false，barPosition为BarPosition.End
      .barOverlap(true)
      .barPosition(BarPosition.End)
      .vertical(false);

      this.CustomBottomBar();
    };
  }
}