UniApp 自定义导航栏：解决安全区域适配问题的完整实践
在开发 UniApp 应用时，自定义导航栏是一个常见的需求，尤其是在追求个性化 UI 设计或品牌统一风格的项目中。然而，自定义导航栏往往会遇到一个经典问题：如何适配不同设备的状态栏高度（安全距离）？
本文将通过一个完整的实战示例，带你了解如何在 UniApp 中使用 uni.getSystemInfo 获取系统信息，并结合本地存储实现自定义导航栏的安全距离适配，确保你的应用在各种设备上都能优雅地展示。
一、问题背景：为什么需要适配状态栏高度？
在 iOS 、鸿蒙和 Android 设备上，尤其是全面屏、刘海屏等设备，顶部的状态栏（status bar）高度是不一样的。如果你直接在页面顶部放置一个固定高度的自定义导航栏，可能会导致：
- 导航栏与状态栏重叠，影响美观；
- 状态栏文字（如时间、信号、电池）遮挡导航栏内容；
- 用户体验不一致，尤其是在 iPhone X 及以上机型中。
因此，我们需要动态获取设备的状态栏高度，并在自定义导航栏中预留出这个安全距离。
二、解决方案：获取系统状态栏高度并存储
我们可以在 App.vue 的 onLaunch 生命周期中，使用 uni.getSystemInfo 获取系统信息，并将状态栏高度保存到本地存储中。
onLaunch: function () {uni.getSystemInfo({success: (result) => {uni.setStorageSync('GM_STATUS_BAR_HEIGHT', result.statusBarHeight)}})
}
这段代码的作用是：
- 在应用启动时获取设备的系统信息；
- 将状态栏高度（单位为 px）保存到本地缓存中，供后续页面使用。
三、使用存储的高度：在页面中设置安全距离
在需要自定义导航栏的页面中，我们从本地缓存中取出状态栏高度，并将其作为样式的一部分，插入到页面顶部的占位 view 中。
<template><view><!-- 安全区域占位 --><view :style="{height: statusHeight + 'px', background: 'red'}"></view><!-- 自定义导航栏 --><uni-nav-bar title="导航栏组件"></uni-nav-bar><!-- 页面内容 --><text>1111</text></view>
</template><script lang="uts">
export default {data() {return {title: 'Hello World',statusHeight: 0}},onLoad() {uni.getStorage({key: 'GM_STATUS_BAR_HEIGHT',success: (res) => {this.statusHeight = res.data}})},methods: {}
}
</script>
这里
<view>是一个红色的占位块，高度等于状态栏高度，确保后续内容不会被状态栏遮挡。
四、样式优化：让导航栏更美观
你可以根据项目需求，进一步美化自定义导航栏。例如：
<template><view><view :style="{height: statusHeight + 'px', background: '#007AFF'}"></view><view class="custom-nav-bar"><text class="nav-title">我的导航栏</text></view><view class="content"><text>这里是页面内容</text></view></view>
</template><style>
.custom-nav-bar {height: 44px;background-color: #ffffff;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.nav-title {font-size: 18px;font-weight: bold;color: #333;
}.content {padding: 20px;
}
</style>
五、注意事项与优化建议
1. 单位问题
uni.getSystemInfo 返回的 statusBarHeight 单位为 px，而 UniApp 推荐使用 rpx 做响应式适配。如果你希望使用 rpx，可以手动转换：
this.statusHeight = res.data * 2 // px -> rpx
2. 默认值兜底
考虑到某些设备可能无法获取到状态栏高度，建议设置一个默认值：
this.statusHeight = res.data || 20
3. 全局变量管理
为了更好的维护和复用，可以将状态栏高度存储在 Vuex 或全局变量中，避免每个页面都去读取本地存储。
六、总结
通过本文的讲解，我们了解了：
- 为什么需要适配状态栏高度；
- 如何使用
uni.getSystemInfo获取系统信息； - 如何使用本地存储保存和读取状态栏高度；
- 如何在页面中动态设置安全区域；
- 如何进一步美化自定义导航栏。
掌握这些技巧后，你就可以在 UniApp 中灵活地实现适配各种设备的自定义导航栏，提升应用的用户体验和视觉一致性。
📌 扩展阅读：
- uni.getSystemInfo 官方文档
- uni.setStorageSync 官方文档
如果你喜欢这篇文章，欢迎点赞、收藏或分享给需要的朋友！也欢迎关注我的技术博客，获取更多 UniApp 开发实战技巧。🚀