uni-app android下获取系统导航栏高度

uni-app android下获取系统导航栏高度

const main = plus.android.runtimeMainActivity()  
const windowMe = main.getWindow()  
plus.android.importClass(windowMe)  
const decorView = windowMe.getDecorView()  
plus.android.importClass(decorView)  

const windowInsets = decorView.getRootWindowInsets()  
const WindowInsets = plus.android.importClass(windowInsets)  
const insets = windowInsets.getInsets(WindowInsets.Type.navigationBars())  
const navigationBarHeight = plus.android.getAttribute(insets, 'bottom')  
console.log(navigationBarHeight) // 取到的是物理像素值，需要除以dpr转为逻辑像素值
开发环境 版本号 项目创建方式

更多关于uni-app android下获取系统导航栏高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app android下获取系统导航栏高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中获取Android系统导航栏高度，可以通过调用原生模块来实现。因为uni-app是基于Vue.js的多端框架，它提供了对原生功能的访问接口，可以让我们在H5、小程序、App等多端实现一致的开发体验。不过，获取系统导航栏高度这种特定于平台的功能，需要用到条件编译和原生模块。

以下是一个如何在uni-app中获取Android系统导航栏高度的示例代码：

  1. 在manifest.json中配置权限（如果需要）：

    确保你的App有必要的权限访问系统信息。一般情况下，获取导航栏高度不需要额外的权限，但为了安全起见，可以检查你的manifest.json文件。

  2. 创建一个原生插件（可选，但推荐）：

    为了更灵活地控制原生功能，可以创建一个原生插件。但在这里，为了简化，我们将直接使用uni-app提供的plus对象。

  3. 在Vue组件中获取导航栏高度：

    <template>
  <view class="content">
    <!-- Your content here -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navigationBarHeight: 0
    };
  },
  mounted() {
    this.getNavigationBarHeight();
  },
  methods: {
    getNavigationBarHeight() {
      #ifdef APP-PLUS
      const main = plus.webview.currentWebview();
      plus.android.importClass('android.view.View');
      const DecorView = main.getEvaluation().getClass().getDeclaredMethod('getDecorView').invoke(main.getEvaluation());
      const uiOptions = DecorView.getSystemUiVisibility();
      const hasNavigationBar = (uiOptions & 0x00000400) === 0;
      let navigationBarHeight = 0;
      if (hasNavigationBar) {
        const resources = plus.android.runtimeMainActivity().getResources();
        const resourceId = plus.android.importClass('android.R$dimen');
        const id = resources.getIdentifier('navigation_bar_height', 'dimen', 'android');
        if (id > 0) {
          navigationBarHeight = resources.getDimensionPixelSize(id);
        }
      }
      this.navigationBarHeight = navigationBarHeight;
      console.log('Navigation Bar Height:', navigationBarHeight);
      #endif
    }
  }
};
</script>

<style scoped>
.content {
  padding-top: calc(env(safe-area-inset-top) + var(--navigation-bar-height, 0px));
}
</style>

    注意：在样式中，我们使用了env(safe-area-inset-top)来处理iOS的刘海屏问题，并结合--navigation-bar-height（这个CSS变量需要在JavaScript中动态设置）来处理Android的导航栏。

上述代码在App端（特别是Android端）运行时会获取系统导航栏的高度，并将其存储在Vue组件的navigationBarHeight数据中。你可以根据需要在样式或布局中使用这个值。

回到顶部