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 中灵活地实现适配各种设备的自定义导航栏，提升应用的用户体验和视觉一致性。

📌 扩展阅读：

如果你喜欢这篇文章，欢迎点赞、收藏或分享给需要的朋友！也欢迎关注我的技术博客，获取更多 UniApp 开发实战技巧。🚀