经验分享 鸿蒙中如何隐藏底部触控小白条？

在鸿蒙底部有触控小白条，用来响应系统级用户手势。在应用开发时候，有些业务场景需要隐藏底部触控小白条，鸿蒙提供了响应 API，代码比较简单，使用 UTS 几行代码轻松切换展示。

在 HBuilderX 中新建 uni_modules 文件夹，在 uni_modules 文件夹右键选择创建 UTS-API 插件，创建并编辑 app-harmony/index.uts 文件夹，如果没有就新建该文件。

在文件中填写下面代码：

/**  
 * 展示底部小白条  
 */  
export const showNavigationIndicator = () => {  
  const window = UTSHarmony.getCurrentWindow()  
  window.setSpecificSystemBarEnabled('navigationIndicator', true)  
}  

/**  
 * 隐藏底部小白条  
 */  
export const hideNavigationIndicator = () => {  
  const window = UTSHarmony.getCurrentWindow()  
  window.setSpecificSystemBarEnabled('navigationIndicator', false)  
}  

在 Vue 页面中导入并使用即可。

<template>  
  <view>  
    <button @click="showNavigationIndicator">showNavigationIndicator</button>  
    <button @click="hideNavigationIndicator">hideNavigationIndicator</button>  
  </view>  
</template>  
<script setup lang="uts">  
  import {  
    showNavigationIndicator,  
    hideNavigationIndicator,  
  } from '@/uni_modules/harmony-toggle-navigation-indicator'  
</script>  

当用户点击 hideNavigationIndicator 按钮之后，系统大概一秒后会隐藏小白条。点击 showNavigationIndicator 系统会展示小白条。