codecamp

菜单(Menu)

Menu是菜单接口,一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考Menu控制

创建默认样式的菜单

菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件,绑定组件后手势点击对应组件后即可弹出。

  1. Button('click for Menu')
  2. .bindMenu([
  3. {
  4. value: 'Menu1',
  5. action: () => {
  6. console.info('handle Menu1 select')
  7. }
  8. }
  9. ])

创建自定义样式的菜单

当默认样式不满足开发需求时,可使用@Builder自定义菜单内容。可通过bindMenu接口进行菜单的自定义。

@Builder开发菜单内的内容

  1. @State select: boolean = true
  2. private iconStr: ResourceStr = $r("app.media.view_list_filled")
  3. private iconStr2: ResourceStr = $r("app.media.view_list_filled")
  4. @Builder
  5. SubMenu() {
  6. Menu() {
  7. MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
  8. MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
  9. }
  10. }
  11. @Builder
  12. MyMenu(){
  13. Menu() {
  14. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
  15. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
  16. MenuItem({
  17. startIcon: this.iconStr,
  18. content: "菜单选项",
  19. endIcon: $r("app.media.arrow_right_filled"),
  20. // 当builder参数进行配置时,表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时,会显示子菜单。
  21. builder: this.SubMenu.bind(this),
  22. })
  23. MenuItemGroup({ header: '小标题' }) {
  24. MenuItem({ content: "菜单选项" })
  25. .selectIcon(true)
  26. .selected(this.select)
  27. .onChange((selected) => {
  28. console.info("menuItem select" + selected);
  29. this.iconStr2 = $r("app.media.icon");
  30. })
  31. MenuItem({
  32. startIcon: $r("app.media.view_list_filled"),
  33. content: "菜单选项",
  34. endIcon: $r("app.media.arrow_right_filled"),
  35. builder: this.SubMenu.bind(this)
  36. })
  37. }
  38. MenuItem({
  39. startIcon: this.iconStr2,
  40. content: "菜单选项",
  41. endIcon: $r("app.media.arrow_right_filled")
  42. })
  43. }
  44. }

bindMenu属性绑定组件

  1. Button('click for Menu')
  2. .bindMenu(this.MyMenu)

创建支持右键或长按的菜单

通过bindContextMenu接口进行菜单的自定义及菜单弹出的触发方式:右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的,可显示在应用窗口外部。

  • @Builder开发菜单内的内容与上文写法相同。
  • 确认菜单的弹出方式,使用bindContextMenu属性绑定组件。示例中为右键弹出菜单。
    1. Button('click for Menu')
    2. .bindContextMenu(this.MyMenu, ResponseType.RightClick)
气泡提示(Popup)
页面路由(router)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }