HarmonyOS鸿蒙Next中Navigation的菜单点击弹出更多菜单是怎么实现的

HarmonyOS鸿蒙Next中Navigation的菜单点击弹出更多菜单是怎么实现的

类似系统文件管理的效果，点击右上角的菜单时弹出更多菜单，这种怎么实现：

cke_137.png

联系人这里的效果简单点：

cke_2201.png


更多关于HarmonyOS鸿蒙Next中Navigation的菜单点击弹出更多菜单是怎么实现的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

楼主看一下这个官方示例： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation# 示例15navigation工具栏自适应

跑一下这个代码：

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

@Entry
@Component
struct NavigationExample {
  @Provide('navPathStack') navPathStack:NavPathStack = new NavPathStack();
  @State enable: boolean = false
  @State menuItems:Array<NavigationMenuItem> = [
    {
      value:'menuItem1',
      symbolIcon: new SymbolGlyphModifier($r('sys.symbol.card_writer')),
    },
    {
      value:'menuItem2',
      symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus'))
    },
    {
      value:'menuItem3',
      symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')),
    },
  ]

  @State toolItems:Array<ToolbarItem>= [
    {
      value:'toolItem1',
      symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')),
      action:()=>{}
    },
    {
      value:'toolItem2',
      symbolIcon:new SymbolGlyphModifier($r('sys.symbol.card_migration')),
      action:()=>{}
    },
    {
      value:'toolItem3',
      symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_star')),
      action:()=>{}
    }
  ]

  build() {
    Navigation(this.navPathStack) {
      Column() {
        Button('启用/关闭自适应').onClick(()=>{
          this.enable = !this.enable;
        })
        Text("启用自适应能力：" + this.enable)
      }
    }
    .mode(NavigationMode.Stack)
    .enableToolBarAdaptation(this.enable) //是否启用工具栏自适应能力
    .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')))
    .titleMode(NavigationTitleMode.Mini)
    .menus(this.menuItems)
    .toolbarConfiguration(this.toolItems)
    .title('一级页面')
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation的菜单点击弹出更多菜单是怎么实现的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


  • 控制不了最外层只展示一个菜单图标

试试自定义菜单来实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#

示例2弹出自定义菜单，

@Entry
@Component
struct NavigationMenuExample {
  @State navPathStack: NavigationPathStack = new NavigationPathStack();

  // 菜单项点击事件
  onShareClick() { console.log('分享操作'); }
  onSearchClick() { console.log('搜索操作'); }

  build() {
    Navigation(this.navPathStack) {
      Column() {
        Text('主页面内容')
          .fontSize(20)
      }
    }
    .menus([
      {
        icon: $r('app.media.ic_share'),
        action: this.onShareClick.bind(this)
      },
      {
        icon: $r('app.media.ic_search'),
        action: this.onSearchClick.bind(this) 
      },
      // 添加更多菜单项触发折叠
      {
        icon: $r('app.media.ic_setting'),
        action: () => console.log('设置操作')
      },
      {
        icon: $r('app.media.ic_help'),
        action: () => console.log('帮助操作')
      }
    ])
    .titleMode(NavigationTitleMode.Full)
  }
}

超过3个才折叠，你这个写法连联系人的那个效果都实现不了，

1

使用弹出式菜单：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#示例7设置状态变量弹出菜单

image.png

理论上确实可以配合这个用 custombuilder 实现。

在HarmonyOS Next中，通过Navigation组件实现菜单点击弹出更多菜单的功能，可以使用自定义弹出式组件配合事件触发。具体步骤如下：

  1. 在Navigation组件中设置菜单项，并为其绑定点击事件。
  2. 在点击事件回调中，使用CustomPopupController控制自定义弹出式组件的显示/隐藏。
  3. 自定义弹出式组件使用@CustomDialog装饰器实现，内部布局使用Column/Row等组合所需菜单项。
  4. 通过position参数设置弹出位置，通常为{ x: '100%', y: 0 }实现右侧弹出效果。

关键代码示例：

[@CustomDialog](/user/CustomDialog)
struct MoreMenuDialog {
  controller: CustomPopupController
  // 自定义菜单内容
}

// 点击事件
onMenuClick() {
  popupController = new CustomPopupController()
  popupController.show()
}

在HarmonyOS Next中，可以通过Menu组件配合Navigation实现右上角菜单的弹出效果。以下是实现步骤：

  1. 在Navigation组件中添加Menu：
import { Menu, MenuItem } from '@ohos.arkui.advanced.Menu'

@Entry
@Component
struct Sample {
  @State showMenu: boolean = false

  build() {
    Navigation() {
      // 页面内容...
    }
    .title('标题')
    .toolbar({
      items: [
        {
          icon: $r('app.media.more'),
          action: () => { this.showMenu = true }
        }
      ]
    })
    .menu(
      Menu()
      .show(this.showMenu)
      .onChange((show: boolean) => { this.showMenu = show })
      .width(180)
      .height(200)
      .position({ x: '90%', y: 60 })
      .animation({ duration: 200, curve: Curve.Ease })
    ) {
      MenuItem({ content: '新建文件' })
      MenuItem({ content: '导入' })
      MenuItem({ content: '设置' })
    }
  }
}
  1. 关键点说明：
  • 使用toolbar属性设置右上角菜单图标
  • Menu组件通过show属性控制显示/隐藏
  • position设置菜单弹出位置
  • 每个MenuItem对应一个菜单项
  1. 联系人样式的简单实现：
.menu(
  Menu()
  .show(this.showMenu)
  .width(120)
  .position({ x: '80%', y: 50 })
) {
  MenuItem({ content: '添加联系人' })
  MenuItem({ content: '刷新' })
}

注意调整width和position参数可获得不同样式的菜单效果。

回到顶部