HarmonyOS 鸿蒙Next Navigation的toolBar 背景色如何设置

发布于 1周前 作者 sinazl 来自 鸿蒙OS

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

Harmonyos Next教程
2 回复

参考一下下面的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 // 工具栏背景模糊样式，不设置时关闭背景模糊效果
    })
  }
}

更多关于HarmonyOS 鸿蒙Next Navigation的toolBar 背景色如何设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，设置Next Navigation组件的toolBar背景色，可以通过修改其对应的样式属性来实现。具体步骤如下：

  1. 定位资源文件：首先，在你的项目中找到与Next Navigation相关的资源文件，通常是XML布局文件或者相应的样式文件。

  2. 修改背景色：在找到的布局文件中，找到toolBar的定义部分。如果toolBar是通过XML直接定义的，你可以直接在它的属性中设置android:background（注意，虽然属性名包含android，但在鸿蒙系统中同样适用）为你想要的颜色值。颜色值可以是十六进制颜色代码，也可以是资源文件中的颜色引用。

    例如：

    <ToolBar
    ohos:id="$+id:toolbar"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:background="#FF0000"  <!-- 红色背景 -->
    ...>
    ...
</ToolBar>

  3. 应用样式：如果toolBar的背景色是通过样式来控制的，你需要在项目的样式文件中定义一个新的样式，或者修改现有的样式，将背景色属性设置为你的目标颜色。

  4. 重新编译运行：修改完成后，重新编译并运行你的项目，查看toolBar的背景色是否已按预期更改。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部