HarmonyOS鸿蒙Next中bindmenu使用自定义的builder会在周围有一圈不可控的白色外圈

HarmonyOS鸿蒙Next中bindmenu使用自定义的builder会在周围有一圈不可控的白色外圈 使用 bindmenu 时，传入内容使用自定义的 builder 在周围会有一圈不可控制背景色的白色外圈。

版本： Api 12+。

可复现代码如下：

@Entry
@Component
struct Index {

  @Builder
  Demo() {
    Column() {
      Text('One')
      Text('Two')
    }
    .backgroundColor(Color.Red)
  }

  build() {
    RelativeContainer() {
      Button(`Click Me`)
        .bindMenu(this.Demo)
    }
    .background(Color.Black)
    .height('100%')
    .width('100%')
  }
}

cke_2206.png


更多关于HarmonyOS鸿蒙Next中bindmenu使用自定义的builder会在周围有一圈不可控的白色外圈的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

如果只是把背景设置为透明，在模拟器和真机上是不行的。

所以，可以用以下办法，

.bindMenu(this.Demo, {backgroundColor: Color.Red, backgroundBlurStyle: BlurStyle.NONE})

如图， 把颜色设置成和你需要展示的内容背景颜色一样。

cke_1391.png

更多关于HarmonyOS鸿蒙Next中bindmenu使用自定义的builder会在周围有一圈不可控的白色外圈的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个好说， 把背景设置为透明即可。

.bindMenu(this.Demo, {backgroundColor: Color.Transparent})

修改后的效果：

cke_2213.png

请认真看文档：菜单控制-弹窗控制-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

只要看这个”ContextMenuAnimationOptions“的属性字段就行了。
cke_702.png

cke_1013.png

真机测试，这种是不行的。

.bindMenu(this.Demo, {backgroundColor: Color.Transparent})

这种是可以的；

.bindMenu(this.Demo, {backgroundBlurStyle: BlurStyle.NONE})

cke_20520.jpeg

代码如下：

@Entry
@Component
struct Index {

  @Builder
  Demo() {
    Column() {
      Text('One')
      Text('Two')
    }
    .backgroundColor(Color.Red)
  }

  build() {
    RelativeContainer() {
      Button(`Click Me`)
        .bindMenu(this.Demo, {backgroundColor: Color.Blue})
    }
    .backgroundColor(Color.Black)
    .height('100%')
    .width('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

模拟器效果如下，可以看到不生效：

preview

预览器表现与模拟器不一致：

cke_130.png

在HarmonyOS Next中，自定义builder构建的bindmenu组件默认会包含系统预置的边框样式，导致出现白色外圈。可通过修改组件的背景属性或样式配置来调整边框效果，例如设置borderRadius或background属性以覆盖默认样式。具体实现需参考HarmonyOS UI组件的最新API文档进行适配。

这个问题是由于bindMenu的默认样式导致的。在HarmonyOS Next中，菜单组件会自带一个默认的背景和边框样式。

要消除这个白色外圈，可以在自定义Builder中为最外层容器设置padding和margin为0，并确保背景色完全覆盖：

@Builder
Demo() {
  Column() {
    Text('One')
    Text('Two')
  }
  .backgroundColor(Color.Red)
  .padding(0)
  .margin(0)
  .borderRadius(0)
}

如果问题仍然存在，可以尝试使用clip属性：

@Builder
Demo() {
  Column() {
    Text('One')
    Text('Two')
  }
  .backgroundColor(Color.Red)
  .padding(0)
  .margin(0)
  .clip(true)
}

另外，检查是否在全局样式或主题中定义了影响菜单的样式。这个问题通常是由菜单容器的默认样式与自定义Builder样式冲突导致的。

回到顶部