Image无法使用bindContextMenu?

Question

Image无法使用bindContextMenu

Answer 1

Image有长按触发拖拽属性，和长按弹出菜单冲突，需要将图片的draggable属性设置为false。参考代码如下：

@Entry 
@Component 
struct Index { 
  @Builder 
  MenuBuilder() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Button('Test ContextMenu1') 
      Divider().strokeWidth(2).margin(5).color(Color.Black) 
      Button('Test ContextMenu2') 
      Divider().strokeWidth(2).margin(5).color(Color.Black) 
      Button('Test ContextMenu3') 
    } 
    .width(200) 
    .height(160) 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Column() { 
        Image($r('app.media.icon')) 
          .draggable(false) 
          .width('100vp') 
      } 
      .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 
      .onDragStart(() => { 
        // 拖拽时关闭菜单 
        ContextMenu.close() 
      }) 
 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

参考链接:

菜单控制，Image组件