HarmonyOS 鸿蒙Next 类似Menu组件,如何实现下面的效果

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 类似Menu组件,如何实现下面的效果

想要实现如下效果:点击按钮的时候,在按钮的下方展示垂直显示的菜单,在菜单的上方有一个向上的箭头,菜单出现时,背景要置灰,效果如下图~

用Menu组件试了一下,它不可滚动,大家有什么其他方法嘛,类似安卓里PopUpWindow,鸿蒙展示还没有PopUpWindow的三方库

cke_2745.jpeg

7 回复

更多关于HarmonyOS 鸿蒙Next 类似Menu组件,如何实现下面的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


bindPopup不能设置高度的!设置popup显示在当前组件下方,
下方显示不下时,它就显示在组件右侧,直到撑满屏幕高度后才可以开始滑动,
想要的效果:只在组件的下方显示,

# DirectiveMenuExample

## Options
## Options
## Options
## Options
## Options
## Options
## Options
## Options

https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu8

案例4 看我上面发的测试代码 ,这是我改过的,弊端就是需要长按,具体还需要你自己进行修改,思路就是这个思路,模拟器测试也可以达到你那个需求,

在HarmonyOS中,实现类似Menu组件的效果可以使用PopupMenuContextMenuPopupMenu用于在用户点击某个控件时弹出菜单,而ContextMenu则用于长按某个控件时弹出菜单。

  1. PopupMenu

    • 创建PopupMenu对象,并指定其锚点控件。
    • 使用Menu对象添加菜单项。
    • 设置菜单项的点击事件监听器。
    • 调用show()方法显示菜单。
    let popupMenu = new PopupMenu(this, anchorView);
    let menu = popupMenu.getMenu();
    menu.addItem(0, "Item 1");
    menu.addItem(1, "Item 2");
    popupMenu.setOnMenuItemClickListener((item) => {
        switch (item.getItemId()) {
            case 0:
                // 处理Item 1点击事件
                break;
            case 1:
                // 处理Item 2点击事件
                break;
        }
        return true;
    });
    popupMenu.show();
  2. ContextMenu

    • onCreateContextMenu方法中创建菜单项。
    • onContextItemSelected方法中处理菜单项的点击事件。
    • 在需要显示菜单的控件上注册上下文菜单。
    onCreateContextMenu(menu: ContextMenu, v: View, menuInfo: ContextMenuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        menu.add(0, 0, 0, "Item 1");
        menu.add(0, 1, 1, "Item 2");
    }
    
    onContextItemSelected(item: MenuItem): boolean {
        switch (item.getItemId()) {
            case 0:
                // 处理Item 1点击事件
                break;
            case 1:
                // 处理Item 2点击事件
                break;
        }
        return super.onContextItemSelected(item);
    }
    
    registerForContextMenu(anchorView);

通过以上方式,可以在HarmonyOS中实现类似Menu组件的效果。

在HarmonyOS中,可以通过ListContainerListItem组件实现类似菜单的效果。首先,使用ListContainer作为容器,然后为每个菜单项创建ListItem,并设置其布局和点击事件。可以通过Text组件显示菜单项文本,使用Image组件添加图标。通过setOnItemClickListener监听菜单项点击事件,实现交互逻辑。此外,可以使用Divider组件为菜单项添加分割线,提升视觉效果。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!