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
有关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，你应当遵循以下步骤：
-
定义Custom Toolbar Layout：首先，在项目的
resources/layout目录下定义一个XML布局文件，该文件将作为你的自定义Toolbar布局。 -
实现CustomBuilder接口：创建一个类实现
Component.CustomBuilder接口，并重写其build方法。在build方法中，通过LayoutScatter.getInstance().parse方法加载你定义的Toolbar布局文件，并返回构建好的组件实例。 -
配置toolbarConfiguration：在Next Navigation组件的配置中，设置
toolbarConfiguration的customBuilder属性为你实现的CustomBuilder类的实例。 -
应用配置：确保你的Next Navigation组件正确应用了这个配置，通常是在页面的
@Entry注解的configuration属性中指定。
通过上述步骤，你应该能够成功为Next Navigation组件设置自定义Toolbar。请确保所有资源文件和类路径正确无误。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
