HarmonyOS 鸿蒙Next 沉浸式设置底部状态栏高度变化问题
HarmonyOS 鸿蒙Next 沉浸式设置底部状态栏高度变化问题
在页面中设置全屏和js中设置全屏效果不一致 window.getLastWindow(getContext()).then((win) => { win.setWindowLayoutFullScreen(true) })
3 回复
可参考demo
import { window } from '@kit.ArkUI'
@Entry
@Component
export struct ExpandSafeArea2 {
@State currentIndex: number = 0
@State isFullScreen: boolean = false
@State curWindow: window.Window | undefined = undefined
@State TabArr: string[] = ['首页', '推荐', '发现', '我的']
@State statusArr: boolean[] = []
private bottomRectHeight: number = 0
@State marginBottom: number = 0
aboutToAppear(): void {
//这里更新statusArr数据，实际上在加载h5的时候获取
this.statusArr = [true, true, false, false]
window.getLastWindow(getContext()).then((win) => {
this.curWindow = win;
// 根据status信息判断首个界面是否设置沉浸式
this.curWindow.setWindowLayoutFullScreen(true)
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = win.getWindowAvoidArea(type);
console.log(JSON.stringify(avoidArea.bottomRect))
this.bottomRectHeight = px2vp(avoidArea.bottomRect.height); // 获取到导航条区域的高度
this.handleFullScreen(this.currentIndex)
})
}
handleFullScreen(index: number) {
if (!this.curWindow || !this.statusArr.length) {
return;
}
// 对应tab的逻辑
this.curWindow.setWindowLayoutFullScreen(this.statusArr[index])
this.marginBottom = this.statusArr[index] === true ? this.bottomRectHeight : 0 // 沉浸式的时候添加底部margin
}
@Builder
tabBuilder(title: string, targetIndex: number) {
Column() {
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End }) {
ForEach(this.TabArr, (tab: string, index: number) => {
TabContent() {
Text(tab + '沉浸状态：' + this.statusArr[index]).fontSize(30)
}
.backgroundColor(Color.Red)
.tabBar(this.tabBuilder(tab, 0))
.onWillShow(() => {
this.handleFullScreen(index)
})
})
}
.vertical(false)
.clip(false) //tabs包含的时候需要注意， clip默认是开启的。需要关闭不然子节点不能扩展安全区域。
.width('100%')
.height('100%')
.onChange((index: number) => {
this.currentIndex = index
})
}
.margin({
bottom: this.marginBottom
})
}
}
expandSafeArea也需要存储每个tab的状态，和setWindowLayoutFullScreen前提一致，参考下面这个demo：
import { window } from '@kit.ArkUI'
@Entry
@Component
export struct ExpandSafeArea{
@State currentIndex: number = 0
@State isFullScreen: boolean = false
@State curWindow: window.Window | undefined = undefined
@State TabArr: string[] = ['首页', '推荐', '发现', '我的']
@State statusArr: boolean[] = []
@State marginTop: number = 0
aboutToAppear(): void {
//这里更新statusArr数据，实际上在加载h5的时候获取
this.statusArr = [true, true, false, false]
}
@Builder
tabBuilder(title: string, targetIndex: number) {
Column() {
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End }) {
ForEach(this.TabArr, (tab: string, index: number) => {
TabContent() {
Text(tab + '沉浸状态：' + this.statusArr[index]).fontSize(30)
}
.backgroundColor(Color.Red)
.tabBar(this.tabBuilder(tab, 0))
.onWillShow(() => {
this.marginTop = this.statusArr[index] === true ? 0 : 5 // 这里根据实际替换成顶部避让高度
})
.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP])
.margin({
top: this.marginTop
})
})
}
.vertical(false)
.clip(false) //tabs包含的时候需要注意， clip默认是开启的。需要关闭不然子节点不能扩展安全区域。
.width('100%')
.height('100%')
.onChange((index: number) => {
this.currentIndex = index
// this.handleFullScreen(index)
})
}
}
}
针对HarmonyOS 鸿蒙Next沉浸式设置底部状态栏高度变化问题，以下是一些解决方案：
- 获取避让区域高度：通过调用
getWindowAvoidArea接口，获取底部导航栏的高度，以便在布局中进行避让处理。可以使用window.AvoidAreaType.TYPE_SYSTEM来获取系统避让区域，包括状态栏和导航栏的高度。 - 设置沉浸式布局：调用
setWindowLayoutFullScreen接口，设置应用主窗口为全屏布局。这将使应用界面延伸到状态栏和导航栏区域，实现沉浸式效果。 - 调整系统栏属性：若不希望完全隐藏状态栏和导航栏，可以通过
setWindowSystemBarProperties接口调整它们的透明度、背景色、文字颜色等属性，使之与主窗口显示协调一致。 - 布局适配：在UI布局中，可以使用
.expandSafeArea方法扩展安全区，确保底部内容不会被状态栏遮挡。
若上述方法未能解决您的问题，可能是代码实现或系统环境存在特殊情况。建议检查代码逻辑，或尝试在不同设备、不同版本的鸿蒙系统上运行应用，以确定问题的具体原因。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
