HarmonyOS 鸿蒙Next Navigation的toolbarConfiguration属性怎么设置customBuilder

HarmonyOS 鸿蒙Next Navigation的toolbarConfiguration属性怎么设置customBuilder

@State TooTmp: ToolbarItem = {
'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': () => {
// this.pageInfos.pushPath({ name: "NavDestinationTitle" + '99999' })
this.pageInfos.pushPathByName('Page1', 1);
}
}

.toolbarConfiguration([this.TooTmp, this.TooTmp,this.customToolbarBuilder()])

@Builder customToolbarBuilder() {}

toolbarConfiguration前两个使用ToolbarItem ，后面使用customBuilder, 这种写法有报错 ,能提供一个最小demo么


更多关于HarmonyOS 鸿蒙Next Navigation的toolbarConfiguration属性怎么设置customBuilder的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

有关toolbarConfiguration的使用您可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#toolbarconfiguration10

示例demo：

class ActionFn {

  onclick:Function = () => {}

}

@Entry

@Component

struct NavigationExample {

  @State TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}

  private arr: number[] = [1, 2, 3];

  testOnClick = (params:string) => {

    console.log('Test'+params)

  }

  @Builder

  test(action:ActionFn) {

    Column(){

      Text('Test').onClick(() => {

        action.onclick('Test')

      })

    }

  }

  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属性怎么设置customBuilder的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，针对Next Navigation组件的toolbarConfiguration属性，若需设置customBuilder以实现自定义Toolbar，你应当遵循以下步骤：

  1. 定义Custom Toolbar Layout：首先，在项目的resources/layout目录下定义一个XML布局文件，该文件将作为你的自定义Toolbar布局。

  2. 实现CustomBuilder接口：创建一个类实现Component.CustomBuilder接口，并重写其build方法。在build方法中，通过LayoutScatter.getInstance().parse方法加载你定义的Toolbar布局文件，并返回构建好的组件实例。

  3. 配置toolbarConfiguration：在Next Navigation组件的配置中，设置toolbarConfiguration的customBuilder属性为你实现的CustomBuilder类的实例。

  4. 应用配置：确保你的Next Navigation组件正确应用了这个配置，通常是在页面的@Entry注解的configuration属性中指定。

通过上述步骤，你应该能够成功为Next Navigation组件设置自定义Toolbar。请确保所有资源文件和类路径正确无误。

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

回到顶部