沉浸式状态栏

鸿蒙小兵

已于 2024-02-04 16:09:56 修改

阅读量1.1k

点赞数 26

分类专栏：鸿蒙-元服务API8 文章标签： harmonyos 华为前端

于 2024-02-04 16:07:37 首次发布

本文链接：https://blog.csdn.net/m0_58411371/article/details/136027648

版权

鸿蒙-元服务API8 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文基于HarmonyOS元服务开发语言是ArkTs 且基于API 8进行解说

引入window
```
import window from '@ohos.window';
```

在onPageShow() 方法中写入下面代码

 window.getTopWindow().then((data)=>{
      this.mainWindowClass = data;
      const SystemBarProperties={
        //状态栏颜色
        statusBarColor: '#00000000',
        //底部导航栏颜色
        navigationBarColor: '#00000000',
        //状态栏主题 true 文字颜色为白色
        isStatusBarLightIcon:true,
        //底部导航栏主题
        isNavigationBarLightIcon:true
      }
      //设置窗口内导航栏、状态栏的属性
      this.mainWindowClass.setSystemBarProperties(SystemBarProperties)
      //窗口全屏但是布局不穿透到状态栏
      // this.mainWindowClass.setFullScreen(true)
      //窗口全屏但是布局穿透到状态栏
      this.mainWindowClass.setLayoutFullScreen(true)
    })

完整代码

import router from '@ohos.router'
import window from '@ohos.window';

@Entry
@Component
struct Index{
  @State message: string = '你好  鸿蒙'

  mainWindowClass: window.Window;

  onPageShow(){

    window.getTopWindow().then((data)=>{
      this.mainWindowClass = data;
      const SystemBarProperties={
        //状态栏颜色
        statusBarColor: '#00000000',
        //底部导航栏颜色
        navigationBarColor: '#00000000',
        //状态栏主题 true 文字颜色为白色
        isStatusBarLightIcon:true,
        //底部导航栏主题
        isNavigationBarLightIcon:true
      }
      //设置窗口内导航栏、状态栏的属性
      this.mainWindowClass.setSystemBarProperties(SystemBarProperties)
      //窗口全屏但是布局不穿透到状态栏
      // this.mainWindowClass.setFullScreen(true)
      //窗口全屏但是布局穿透到状态栏
      this.mainWindowClass.setLayoutFullScreen(true)
    })
  }


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button(){
          Text('enter').fontSize(25).fontColor('#ffffff').onClick(()=>{
            router.push({url:'pages/second'})
          }).margin({left:10,right:10})
        }
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#00ffff')
  }
}