HarmonyOS鸿蒙Next中怎么设置无导航栏全局样式

HarmonyOS鸿蒙Next中怎么设置无导航栏全局样式 设置主题样式类似安卓Theme.AppCompat.Light.NoActionBar，顶部时间，wifi 电量等栏背景颜色透明

4 回复

是要实现 状态栏透明且页面全屏的效果？参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-358-V5

// 在EntryAbility.ets中设置windowClass
let windowClass: window.Window = windowStage.getMainWindowSync(); 
AppStorage.setOrCreate("windowClass",windowClass);

import window from '@ohos.window';
import { BusinessError } from '@ohos.base';

@Component
@Entry
struct index {
  private windowClass = AppStorage.get("windowClass") as window.Window
  @State message: string = 'Hello World';
  aboutToAppear(): void {
    //全屏
    try {
      this.windowClass.setWindowLayoutFullScreen(true, (err: BusinessError) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error(`Failed to set the window layout to full-screen mode. Cause code: ${err.code}, message: ${err.message}`);
          return;
        }
        console.info('Succeeded in setting the window layout to full-screen mode.');
      });
    } catch (exception) {
      console.error(`Failed to set the window layout to full-screen mode. Cause code: ${exception.code}, message: ${exception.message}`);
    }
    //设置状态栏颜色
    let sysBarProps: window.SystemBarProperties = {
      statusBarColor: Color.Transparent.toString(),
      statusBarContentColor: '#00ff00',
    };
    this.windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar properties.');
    });
  }
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: 'container', align: VerticalAlign.Center },
          middle: { anchor: 'container', align: HorizontalAlign.Center }
        })
    }.backgroundColor(Color.Red)
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中怎么设置无导航栏全局样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


//1.获取应用主窗口。 let windowClass: window.Window | null = null; windowStage.getMainWindow((err: BusinessError, data) => { windowClass = data; let sysBarProps: window.SystemBarProperties = { statusBarColor: ‘#ff37a0fc’, statusBarContentColor: ‘#fffffeff’ }; // 2.设置窗口内导航栏、状态栏属性。systemBarProperties：导航栏、状态栏的属性集合 windowClass.setWindowSystemBarProperties(sysBarProps);

globalThis.windowClass = data // 赋值给全局变量windowClass })

在HarmonyOS鸿蒙Next中，设置无导航栏全局样式可以通过修改config.json文件来实现。具体步骤如下：

  1. 打开项目中的config.json文件。
  2. 在"module"节点下找到"abilities"节点。
  3. 在"abilities"节点中添加或修改"navigationBar"属性，将其设置为false。
  4. 保存文件并重新编译运行应用。

示例代码如下：

{
  "module": {
    "abilities": [
      {
        "name": ".MainAbility",
        "navigationBar": false
      }
    ]
  }
}

在HarmonyOS Next中，可以通过以下步骤设置无导航栏的全局样式：

  1. 修改配置文件：在config.json中设置"navigationBarHidden": true，隐藏导航栏。
  2. 使用代码动态设置：在onInit生命周期方法中调用this.$page.setNavigationBarHidden(true)，隐藏导航栏。
  3. 全局样式控制：在app.ux中通过this.$def.setNavigationBarHidden(true)，全局隐藏导航栏。

确保在相关页面或应用中正确应用这些设置，以实现无导航栏的全局样式。

回到顶部