头部自定义时候，设置获取安全区域，可以用  uni.getSystemInfoSync();接口。 

 <view class="statusBar" :style="{height:statusBarHeight+'px'}">

let SYS=uni.getSystemInfoSync();
let statusBarHeight=ref(SYS.statusBarHeight)

头部胶囊按钮设置：

<view class="titleBar" :style="{height:titleBarheight+'px'}">

let titleBarheight=ref((top-statusBarHeight.value)*2+height)

案例，头部组件

效果：

<template><view><view class="layout"><view class="navbar"><view class="statusBar" :style="{height:statusBarHeight+'px'}"></view><view class="titleBar" :style="{height:titleBarheight+'px'}"><view class="title">标题</view><view class="search"><uni-icons type="search" color="#888" size="18" class="icon"></uni-icons><text class="text">搜索</text></view></view></view><view class="fill" :style="{height:statusBarHeight+titleBarheight+'px'}"></view></view></view>
</template><script setup>import { ref } from 'vue';
let SYS=uni.getSystemInfoSync();
let statusBarHeight=ref(SYS.statusBarHeight);
let {top,height}=uni.getMenuButtonBoundingClientRect();
let titleBarheight=ref((top-statusBarHeight.value)*2+height)
</script><style lang="scss" scoped>
.layout{.navbar{position: fixed;top: 0;left: 0;width: 100%;z-index: 10;background:linear-gradient(to bottom,transparent ,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#f4e2D8);.statusBar{}.titleBar{display: flex;align-items: center;padding: 0 30rpx;border: 1px solid green;.title{font-size: 22px;font-weight: 700;color: #000;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255, 0.4);border: 1px solid #fff;margin-left: 30rpx;color: #999;font-size: 28rpx;display: flex;align-items: center;.icon{margin-left: 5rpx;}.text{padding-left: 10rpx;}}}}
}
</style>

优化代码：建立utils文件夹

utils文件夹下建立system.js文件代码

const SYS=uni.getSystemInfoSync();
export const getstatusBarHeight=()=>SYS.statusBarHeight || 0;
export const getTitleBarHeight=()=>{if(uni.getMenuButtonBoundingClientRect){let {top,height}=uni.getMenuButtonBoundingClientRect();return  height+(top-getstatusBarHeight())*2}else{return 60;}
}
export const getNavBarHeight=()=>getstatusBarHeight()+getTitleBarHeight()
/* export getLeftIcon=()=>{if(tt.getCustomButtonBoundingClientRect){let {leftIcon:{left,width}}=tt.getCustomButtonBoundingClientRect()return left+parseInt(width)+5}else{return 0;}抖音图标
} */e
// #ifdef MP-TOUTIAO
let {leftIcon:{left,width}}=tt.getCustomButtonBoundingClientRect()return left+parseInt(width)+5
// #endif
// #ifndef MP-TOUTIAO
return 0;
// #endif

组件内代码

<template><view><view class="layout"><view class="navbar"><view class="statusBar" :style="{height:getstatusBarHeight()+'px'}"></view><view class="titleBar" :style="{height:getTitleBarHeight() + 'px'}" ><view class="title">标题</view><view class="search"><uni-icons type="search" color="#888" size="18" class="icon"></uni-icons><text class="text">搜索</text></view></view></view><view class="fill" :style="{height:getNavBarHeight()+'px'}"></view></view></view>
</template><script setup>
import { ref } from 'vue';
import { getstatusBarHeight,getTitleBarHeight,getNavBarHeight} from "@/utils/system.js"</script><style lang="scss" scoped>
.layout{.navbar{position: fixed;top: 0;left: 0;width: 100%;z-index: 10;background:linear-gradient(to bottom,transparent ,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#f4e2D8);.statusBar{}.titleBar{display: flex;align-items: center;padding: 0 30rpx;.title{font-size: 22px;font-weight: 700;color: #000;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255, 0.4);/* border: 1px solid #fff; */margin-left: 30rpx;color: #999;font-size: 28rpx;display: flex;align-items: center;.icon{margin-left: 5rpx;}.text{padding-left: 10rpx;}}}}
}
</style>