HarmonyOS 鸿蒙Next Navigation的toolBarConfiguration如何修改文字颜色

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

HarmonyOS 鸿蒙Next Navigation的toolBarConfiguration如何修改文字颜色

Navigation的toolBarConfiguration如何修改文字颜色

Harmonyos Next教程
2 回复
toolbarConfiguration设置status:ToolbarItemStatus.ACTIVE的时候，选中字体颜色如何修改吗？

ToolbarItem里目前无法修改选中文字的颜色，如果想要可以使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备ToolbarItem功能。

关于toolbar的事件回调可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#toolbaritem10

有关toolbar的详细介绍，可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ohos-arkui-advanced-toolbar-V5#ZH-CN_TOPIC_0000001847050344__toolbar

关于获取toolBarConfiguration item参数，

深色代码主题
复制
class ActionFn {
  onclick: Function = () => {
  }
}
@Entry
@Component
struct GetIndexPage {
  @State TooTmp: ToolbarItem = {
    'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': () => {
    }
  }
  private arr: number[] = [1, 2, 3];
  testOnClick = (params: string) => {
    console.log(params)
  }
  @Builder
  test(action: ActionFn) {
    Row() {
      Text('Test').onClick(() => {
        action.onclick('Test')
      }).width(50)
        .height(24);
      Text('Test2').onClick(() => {
        action.onclick('Test2')
      }).width(50)
        .height(24).fontColor('pink')//颜色不生效
      Text('Test3').onClick(() => {
        action.onclick('Test3')
      }).width(50)
        .height(24);
    }
  }
  build() {
    Column() {
      Navigation() {
        List({ space: 12 }) {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, (item: string): string => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Split)
      .toolbarConfiguration(this.test({ onclick: this.testOnClick }))
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

更多关于HarmonyOS 鸿蒙Next Navigation的toolBarConfiguration如何修改文字颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，针对Next Navigation组件的toolBarConfiguration修改文字颜色，可以通过设置工具栏的样式属性来实现。具体步骤如下：

  1. 获取ToolBar配置：首先，通过代码获取到Next Navigation组件的ToolBar配置对象。

  2. 设置文字颜色：利用ToolBar配置对象提供的方法或属性，直接设置文字颜色。在鸿蒙系统的API中，通常会提供类似setTextColor或相关的属性设置方法。

  3. 应用配置：将修改后的配置重新应用到Next Navigation组件上，确保更改生效。

示例代码（伪代码，具体实现需参考鸿蒙API文档）：

// 伪代码示例，具体实现需参考鸿蒙开发文档
ToolBarConfiguration config = nextNavigation.getToolBarConfiguration();
config.setTextColor(Color.RED); // 假设此处为设置文字颜色为红色
nextNavigation.setToolBarConfiguration(config);

注意：上述代码仅为示例，实际开发中需根据鸿蒙系统的API文档查找具体的属性设置方法。鸿蒙系统的API可能有所不同，需确保使用正确的方法和属性名。

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

回到顶部