HarmonyOS 鸿蒙Next Navigation导航栏背景颜色怎么设置

HarmonyOS 鸿蒙Next Navigation导航栏背景颜色怎么设置

cke_153.png

途中标红的背景色怎么设置？


更多关于HarmonyOS 鸿蒙Next Navigation导航栏背景颜色怎么设置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

如果指的是组件导航Navigation的工具栏

可以设置Navigation的属性toolbarConfiguration中的options，其中options的内容为NavigationToolbarOptions，有一个backgroundColor可以设置背景颜色

如果指的是选项卡Tabs的TabBar

可以设置Tabs的属性barBackgroundColor

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


这个需要自定义导航栏，如下代码可实现：

@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .backgroundColor(Color.Pink)
  .justifyContent(FlexAlign.Center)
}

TabContent() {
  Column(){
    Text('我的内容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

参考文档：https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394

Navigation 不能实现是吧？

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html，

姓名

  • 性别：男
  • 年龄：28
  • 所在地：北京市
  • 职业：软件工程师

解决了，个人使用问题

cke_535.png

补充问题说明：

cke_192.png

我想要达成这样的效果

基本信息
姓名: 张三
职位: 软件工程师
邮箱: zhangsan@example.com
联系电话: 1234567890

![图片](https://example.com/image.png)

在HarmonyOS（鸿蒙）系统中，设置Next Navigation导航栏的背景颜色通常涉及到对系统UI组件的自定义。以下是直接针对鸿蒙系统设置导航栏背景颜色的方法：

  1. XML布局文件配置： 在应用的布局XML文件中，找到对应的导航栏组件（如NavigationBar，注意实际组件名称可能有所不同），并尝试通过background属性直接设置颜色。例如：

    <NavigationBar
    ...
    ohos:background_element="#FF0000" <!-- 红色背景 -->
    ... />

  2. 代码动态设置： 如果XML中无法直接设置或需要动态改变，可以在JavaScript（或其他鸿蒙支持的脚本语言）代码中通过组件的引用设置背景颜色。例如：

    let navigationBar = this.$element('navigationBarId'); // 假设navigationBarId是导航栏的ID
navigationBar.setBackgroundColor(new Color(255, 0, 0)); // 设置为红色

请注意，具体实现可能因鸿蒙系统版本和组件库的不同而有所差异。如果上述方法不适用于您的项目，可能是因为组件名称、属性或API有所变化。

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

回到顶部