HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?
HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?
如何显示和隐藏顶部状态栏?
如何设置成沉浸式状态栏
如何设置状态栏的主题色
如何设置成沉浸式状态栏
如何设置状态栏的主题色
2 回复
可以在UIAbility的onWindowStageCreate的生命周期中设置setWindowSystemBarEnable接口即可。 如onWindowStageCreate(windowStage){ windowStage.getMainWindowSync().setWindowSystemBarEnable([]) … } 显示和隐藏以及沉浸式参考链接如下:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/windowmanager/application-window-stage.md#/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md 修改状态栏颜色请参考以下代码:
import window from '@ohos.window';
import router from '@ohos.router';
@Entry
@Component
export struct CommonTopBar {
@Prop title: string
@Prop alpha: number = 1
@State statusBarHeight: number = 0
private titleAlignment: TextAlign = TextAlign.Center
private backButton: boolean = true
private onBackClick?: () => void
@State barHeight: number = 0
onPageShow(): void {
}
aboutToAppear() {
this.setSystemBar()
}
async setSystemBar() {
// 获取当前应用窗口
let windowClass: window.Window = await window.getLastWindow(getContext(this))
// 获取状态栏高度
this.barHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
console.log(`获取状态栏高度 : ${this.barHeight}`);
// 前提:设置窗口为全屏窗口
// windowClass.setWindowLayoutFullScreen(true);
// 沉浸式方案一:设置系统栏不显示[],需要显示则设置[‘status’,‘navigation’]
// windowClass.setWindowSystemBarEnable([]);
// 沉浸式方案二:将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
await windowClass.setWindowSystemBarProperties({
// 颜色属性为ARGB,将蒙尘设置为0%使其透明
// 导航栏颜色
navigationBarColor:
'#fd121de5',
// 状态栏颜色
statusBarColor: '#ff0ad9c2',
// 导航栏文字颜色
navigationBarContentColor: '#fde20606',
// 状态栏文字颜色
statusBarContentColor: '#fff1e50a',
})
}
build() {
Column() {
Blank()
.backgroundColor(Color.Red)
.opacity(this.alpha)
Stack({ alignContent: Alignment.Start }) {
Stack()
.height(50)
.width("100%")
.opacity(this.alpha)
.backgroundColor(Color.Red)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text(this.title)
.flexGrow(1)
.textAlign(this.titleAlignment)
.fontColor('#ffffff')
.fontSize(16)
.align(Alignment.Center)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.height(50)
.margin({ left: 50, right: 50 })
.alignSelf(ItemAlign.Center)
if (this.backButton) {
Stack() {
Image($r('app.media.startIcon'))
.height(16)
.width(16)
.align(Alignment.Center)
.onClick(() => {
this.onBackClick?.()
router.back();
})
}
.height(50)
.width(50)
}
}
.height(50)
.width("100%")
}.height(this.statusBarHeight)
}
}
更多关于HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html