HarmonyOS鸿蒙Next中NavDestination的属性

HarmonyOS鸿蒙Next中NavDestination的属性 在api参考中，Navigation的子页NavDestination的属性中含有toolbarConfiguration，但是在在线课程中给出的布局示意图中NavDestination子页是没有工具栏的（底部区域），以及询问CodeGenie（鸿蒙问答）也是说NavDestination没有该属性。而我确实用到了，预览器也成功显示了工具栏。我想知道这是bug吗，因为我正考虑在NavDestination中使用Tabs组件还是toolbarConfiguration属性。

4 回复

以API为准，如果还想再确认有没有，那就看下源码是否有这个属性。有的话那肯定能用。

更多关于HarmonyOS鸿蒙Next中NavDestination的属性的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


以API参考文档为准，AI回答的幻觉居多。toolbarConfiguration 在API 13+ 开始支持，设置工具栏内容。未调用本接口时不显示工具栏。

演示NavDestination绑定可滚动容器组件来实现滚动内容时触发标题栏和工具栏显示隐藏的效果。

import { SymbolGlyphModifier } from '@kit.ArkUI';

@Component
struct MyPageOne {
  private listScroller: Scroller = new Scroller();
  private scrollScroller: Scroller = new Scroller();
  private arr: number[] = [];

  aboutToAppear(): void {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i);
    }
  }

  build() {
    NavDestination() {
      Scroll(this.scrollScroller) {
        Column() {
          List({ space: 0, initialIndex: 0, scroller: this.listScroller }) {
            ForEach(this.arr, (item: number, index: number) => {
              ListItem() {
                Text('' + item)
                  .height(100)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .width('90%')
                  .margin({ left: '5%' })
                  .borderRadius(10)
                  .backgroundColor(Color.Gray)
              }
            }, (item: string) => item);
          }.width('100%').height('80%').scrollBar(BarState.Off)
          .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })

          ForEach(this.arr, (item: number, index: number) => {
            ListItem() {
              Text('' + item)
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .width('90%')
                .margin({ top: '5%' })
                .borderRadius(10)
                .backgroundColor(Color.Pink)
            }
          }, (item: string) => item);
        }
      }
      .width('100%')
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)
      .edgeEffect(EdgeEffect.Spring)
    }
    .title('PageOne', { backgroundColor: Color.Yellow, barStyle: BarStyle.STACK })
    .toolbarConfiguration([
      {
        // $r('sys.symbol.phone_badge_star')需要替换为开发者所需的资源文件
        value: 'item1',
        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star'))
      }
    ], { backgroundColor: Color.Orange, barStyle: BarStyle.STACK })
    // 绑定有父子关系的可滚动容器组件
    .bindToNestedScrollable([{ parent: this.scrollScroller, child: this.listScroller }])
  }
}

@Component
struct MyPageTwo {
  private listScroller: Scroller = new Scroller();
  private arr: number[] = [];

  aboutToAppear(): void {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i);
    }
  }

  build() {
    NavDestination() {
      List({ scroller: this.listScroller }) {
        ForEach(this.arr, (item: number, index: number) => {
          ListItem() {
            Text('' + item)
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .width('90%')
              .margin({ left: '5%' })
              .borderRadius(10)
              .backgroundColor(Color.Gray)
          }
        }, (item: string) => item);
      }.width('100%')
    }
    .title('PageTwo', { backgroundColor: Color.Yellow, barStyle: BarStyle.STACK })
    .toolbarConfiguration([
      {
        // $r('sys.symbol.phone_badge_star')需要替换为开发者所需的资源文件
        value: 'item1',
        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star'))
      }
    ], { backgroundColor: Color.Orange, barStyle: BarStyle.STACK })
    // 绑定可滚动容器组件
    .bindToScrollable([this.listScroller])
  }
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  MyPageMap(name: string) {
    if (name === 'myPageOne') {
      MyPageOne();
    } else {
      MyPageTwo();
    }
  }

  build() {
    Navigation(this.stack) {
      Column() {
        Button('push PageOne').onClick(() => {
          this.stack.pushPath({ name: 'myPageOne' });
        })
        Button('push PageTwo').onClick(() => {
          this.stack.pushPath({ name: 'myPageTwo' });
        })
      }.height('40%').justifyContent(FlexAlign.SpaceAround)
    }.width('100%')
    .height('100%')
    .title({ main: 'MainTitle', sub: 'subTitle' })
    .navDestination(this.MyPageMap)
  }
}

NavDestination在HarmonyOS Next中用于导航目标配置，主要属性包括：

  • name：目标唯一标识符
  • route：路由路径
  • builder：构建目标页面内容
  • deepLink：深度链接支持
  • argument：参数传递定义
  • label：目标显示标签
  • icon：目标图标资源

这些属性在Navigation组件中定义页面导航结构和行为，支持页面间参数传递和深度链接。

根据HarmonyOS Next的官方设计，NavDestination确实支持toolbarConfiguration属性，用于配置当前导航页面的工具栏。这不是bug，而是API的正常功能。

在线课程或CodeGenie的回复可能存在信息滞后或表述不完整的情况。实际开发中，你可以根据需求选择：

  1. 使用toolbarConfiguration为当前页面添加工具栏
  2. 在页面内容区使用Tabs组件实现标签页切换

两者的主要区别在于：

  • toolbarConfiguration的工具栏位置固定（通常顶部），与导航框架集成度更高
  • Tabs组件可以灵活放置在页面任意位置，样式控制更自由

建议参考最新官方API文档进行开发，预览器显示正常即表明功能可用。

回到顶部