HarmonyOS Navigation的toolBar 背景色如何设置？

Question

Navigation的toolBar 背景色如何设置 在 ArkUI Inspector 里看被设置成了固定的 \#F2F1F3F5

Answer 1

您参考一下下面的demo：

let COLOR1: string = "#80004AAF";
let COLOR2: string = "#802787D9";
let BLUR_STYLE_1: BlurStyle = BlurStyle.BACKGROUND_THIN;
let BLUR_STYLE_2: BlurStyle = BlurStyle.BACKGROUND_THICK;

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();
  @State useColor1: boolean = true;
  @State useBlur1: boolean = true;


  build() {
    Navigation(this.stack) {
      Stack({alignContent: Alignment.Center}) {

        Column() {
          Stack({alignContent: Alignment.Center}) {
            Button("switch color")
              .onClick(() => {
                this.useColor1 = !this.useColor1;
              })
          }
          .width('100%')
          .layoutWeight(1)


        }
        .width('100%')
        .height('80%')
      }.width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .title("NavTitle")
    // 开发者可以设置工具栏的背景颜色和背景模糊效果
    .toolbarConfiguration([
      {value: "a"},
      {value: "b"},
      {value: "c"}
    ], {
      backgroundColor: this.useColor1 ? COLOR1 : COLOR2, // 工具栏背景颜色，不设置时为系统默认颜色
      backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2 // 工具栏背景模糊样式，不设置时关闭背景模糊效果
    })
  }
}

参考连接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5\#navigationtoolbaroptions11