鸿蒙开发 组件:菜单(Menu)

往期推文全新看点(文中附带最新·鸿蒙全栈学习笔记)

1.嵌入式开发适不适合做鸿蒙南向开发?一文带你了解

2.鸿蒙众多岗位需求突增!该如何选择?

3.分享一场鸿蒙开发岗位面试经历~

4.待更新中……

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

创建默认样式的菜单

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

Button('click for Menu')
  .bindMenu([
    {
      value: 'Menu1',
      action: () => {
        console.info('handle Menu1 select')
      }
    }
  ])
HarmonyOS 开发中,为 `Text` 组件设置自定义菜单可以通过 `bindContextMenu` 方法实现,该方法允许开发者将一个自定义的菜单构建器与组件绑定,并在特定事件(如长按)触发时显示菜单。以下是一个完整的实现示例: ### 自定义菜单构建器 首先,定义一个菜单构建器方法 `MenuBuilder`,用于构建自定义菜单内容。该方法返回一个包含多个按钮的布局结构,作为菜单项显示: ```typescript @Builder MenuBuilder() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button('菜单项1') Divider().strokeWidth(2).margin(5).color(Color.Grey).opacity(0.2) Button('菜单项2') Divider().strokeWidth(2).margin(5).color(Color.Grey).opacity(0.2) Button('菜单项3') } .width(200) .height(160) } ``` ### 绑定菜单到 Text 组件 接下来,在 `build` 方法中创建一个 `Text` 组件,并使用 `bindContextMenu` 方法将其与 `MenuBuilder` 绑定。通过设置 `ResponseType.LongPress`,可以在用户长按文本时触发菜单显示: ```typescript build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Column() { Text("长按显示自定义菜单") .fontSize(20) .width('100%') .height(300) .backgroundColor(Color.Orange) .textAlign(TextAlign.Center) } .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) .onDragStart(() => { // 拖拽时关闭菜单 ContextMenu.close() }) } .width('100%') .height('100%') } ``` ### 菜单样式设置 如果需要对菜单的样式进行自定义,例如字体大小、颜色、字符间距等,可以在 CSS 文件中为菜单相关的类或标签设置样式属性。例如: ```css .container { width: 100%; height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; } .title-text { font-size: 35px; background-color: #5a5aee; color: white; width: 70%; text-align: center; height: 85px; border-radius: 12px; } menu { text-color: blue; font-size: 35px; letter-spacing: 2px; } option { color: #6a6aef; font-size: 30px; } ``` 上述代码片段展示了如何通过 `bindContextMenu` 为 `Text` 组件绑定自定义菜单,并通过样式文件对菜单项进行样式定制 [^4]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值