鸿蒙Next navigation toolbar action 如何实现

在鸿蒙Next中，如何实现navigation toolbar的自定义action？我想在顶部导航栏添加按钮并绑定点击事件，但官方文档描述比较简略。具体想知道：1) 如何通过XML或代码添加action图标；2) 如何正确处理action的点击回调；3) 是否支持动态修改action状态（如显示/隐藏、图标切换）。求示例代码说明关键实现步骤。

2 回复

鸿蒙Next的navigation toolbar action实现很简单：

  1. 在ohos:action里定义图标和点击事件。
  2. 在Navigation组件中通过.toolbar添加。
  3. 用onClick绑定处理函数，比如弹个Toast：“程序员永不为奴！”
    代码简洁，效果拉满，试试看！

更多关于鸿蒙Next navigation toolbar action 如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙（HarmonyOS）Next中，NavigationToolbar 的 Action 可通过 NavigationToolbar 组件的 actions 属性实现，用于添加工具栏操作按钮。以下是实现步骤和示例代码：

步骤

  1. 定义 Action 数据：使用 NavigationAction 对象描述每个操作按钮的图标、文本和点击事件。
  2. 配置 NavigationToolbar：在页面组件中通过 actions 属性绑定 Action 数据。
  3. 处理点击事件：为每个 Action 定义 onClick 回调函数。

示例代码

import { NavigationToolbar, NavigationAction } from '@ohos/arkui';

@Entry
@Component
struct Index {
  // 定义 Action 数组
  private actions: NavigationAction[] = [
    {
      value: '搜索', // 按钮文本
      icon: $r('app.media.icon_search'), // 图标资源
      action: () => {
        // 点击事件处理
        console.log('点击搜索');
      }
    },
    {
      value: '设置',
      icon: $r('app.media.icon_settings'),
      action: () => {
        console.log('点击设置');
      }
    }
  ];

  build() {
    Column() {
      // 使用 NavigationToolbar 并绑定 actions
      NavigationToolbar({ title: '主页' })
        .actions(this.actions)
    }
    .width('100%')
    .height('100%')
  }
}

关键说明

  • 图标资源：通过 $r('app.media.xxx') 引用资源文件（需在 resources/base/media/ 中预先放置图标）。
  • 样式调整：可通过 NavigationToolbar 的样式属性（如颜色、位置）自定义外观。
  • 动态更新：若需动态修改 Actions，可将 actions 绑定到状态变量（如 @State），通过数据驱动更新。

注意事项

  • 确保鸿蒙 SDK 版本支持 NavigationToolbar 组件（建议使用最新版本）。
  • 图标尺寸建议适配不同屏幕密度。

以上代码实现了包含两个操作按钮的工具栏，点击时输出日志。根据实际需求调整图标、文本和事件逻辑。

回到顶部