在HarmonyOS NEXT开发中bindContextMenu中设置backgroundColor不生效？

Question

在HarmonyOS NEXT开发中bindContextMenu中设置backgroundColor不生效？想改变menu弹框默认的背景色，发现设置backgroundColor无效；通过更改自定义menu根布局颜色的话，又无法做到填充满Menu的边角。

Answer 1

修改弹出菜单颜色可参考如下实现方式：

@Entry 
@Component 
struct BindContextMenuTest { 
  @Builder 
  MsgMenuBuilder() { 
    Menu() { 
      MenuItem({content: "menu"}) 
        .contentFontColor(Color.Black) 
        .backgroundColor(Color.Green) 
        .labelFontColor(Color.Black) 
        .padding({ 
          left: 15, 
          right: 15, 
          top: 5, 
          bottom: 5 
        }) 
    }.backgroundColor(Color.Green) 
  } 
 
  build() { 
    Column() { 
      Text('Long Press Text') 
        .width(150) 
        .height(100) 
        .textAlign(TextAlign.Center) 
        .margin(100) 
        .fontSize(30) 
        .bindContextMenu(this.MsgMenuBuilder, ResponseType.LongPress, { 
          enableArrow: true, 
          placement: Placement.Bottom, 
          backgroundColor: "#2A2C2D", 
          preview: MenuPreviewMode.IMAGE, 
          previewAnimationOptions: {scale: [0.8, 1.0]} 
 
        }) 
    }.width('100%').backgroundColor(Color.Pink) 
  } 
} 
 
//bindContextMenu的箭头颜色无法设置，建议使用bindPopup替代bindContextMenu，并将 backgroundBlurStyle属性设为BlurStyle.NONE，可参考如下示例代码： 
 
@Entry 
@Component 
struct BindPopUpTest { 
  @State customPopup: boolean = false; 
 
  @Builder popupBuilder() { 
    Column({ space: 2 }) { 
      Menu() { 
        MenuItem({content: "menu1"}) 
          .backgroundColor(Color.White) 
          .margin({top: 5}) 
          .width("100%") 
        MenuItem({content: "menu2"}) 
          .backgroundColor(Color.White) 
          .margin({top: 5}) 
          .width("100%") 
      } 
    } 
    .justifyContent(FlexAlign.SpaceAround) 
    .width(200) 
    .height(125) 
    .padding(5) 
  } 
 
  build() { 
    Column() { 
      Text('LongPress') 
        .fontSize(28) 
        .gesture( 
          LongPressGesture({ repeat: true }) 
            .onAction((event: GestureEvent|undefined) => { 
              this.customPopup = !this.customPopup; 
            }) 
        ) 
        .bindPopup(this.customPopup, { 
          builder: this.popupBuilder, 
          placement: Placement.Bottom, 
          popupColor: Color.Green, 
          mask: false, 
          backgroundBlurStyle: BlurStyle.NONE, 
          enableArrow: true, 
          onStateChange: (e) => { 
            if (!e.isVisible) { 
              this.customPopup = false; 
            } 
          } 
        }) 
    } 
    .justifyContent(FlexAlign.Center) 
    .width('100%') 
    .height("100%") 
  } 
}