HarmonyOS navigation组件的导航栏上的返回按钮和右侧的menu的背景颜色设置成透明？

Question

navigation组件的导航栏上的返回按钮和右侧的menu的背景颜色可以设置成透明吗？

Answer 1

设置状态栏和导航栏的背景为透明

可以参考以下代码案例

//index.ets

@Entry
@Component
struct Type3 {
  @State message: string = 'Hello World'
  @StorageLink("topHeight") topHeight: number = 0
  @StorageLink("bottomHeight") bottomHeight: number = 0

  build() {
    Column() {
      // 在界面顶部放置一个Row组件，用于占位
      Row() {

      }
      .width("100%")
      // 设置Row组件的高度为状态栏的高度，可避免界面内容与状态栏内容重叠
      .height(px2vp(this.topHeight))
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .position({ x: 0, y: 0 })
      }
      .width("100%")
      .flexGrow(1)
      // 在界面底部放置一个Row组件，用于占位
      Row() {

      }
      .width("100%")
      // 设置Row组件的高度为导航栏的高度，可避免界面内容与导航栏内容重叠
      .height(px2vp(this.bottomHeight))
    }
    // .backgroundImage($r("app.media.icon"))
    .backgroundColor("#ff63f317")
    .backgroundImageSize(ImageSize.Cover)
    .width("100%")
    .height("100%")
  }
}

//EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

async function enterImmersion(windowClass: window.Window) {
  // 获取状态栏和导航栏的高度
  windowClass.on("avoidAreaChange", (data) => {
    if (data.type == window.AvoidAreaType.TYPE_SYSTEM) {
      let topHeight:number = data.area.topRect.height
      let botHeight:number = data.area.bottomRect.height
      // 将状态栏和导航栏的高度保存在AppStorage中
      AppStorage.setOrCreate('topHeight', topHeight);
      AppStorage.setOrCreate('bottomHeight', botHeight);
    }
  })

  //EntryAbility.ets

  // 设置窗口布局为沉浸式布局
  await windowClass.setWindowLayoutFullScreen(true)
  await windowClass.setWindowSystemBarEnable(["status", "navigation"])
  // 设置状态栏和导航栏的背景为透明
  await windowClass.setWindowSystemBarProperties({
    navigationBarColor: "#00000000",
    statusBarColor: "#00000000",
    navigationBarContentColor: "#FF0000",
    statusBarContentColor: "#FF0000"
  })
}

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  async  onWindowStageCreate(windowStage: window.WindowStage) {

    let windowClass:window.Window = await windowStage.getMainWindow()
    await enterImmersion(windowClass)

    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}