HarmonyOS鸿蒙Next中bindPopup气泡的背景色怎么和设置的不一致？

HarmonyOS鸿蒙Next中bindPopup气泡的背景色怎么和设置的不一致？ 代码如下：

Row的背景色是 “F7F7F7” ，bindPopup的背景色也是 “F7F7F7”

但是bindPopup弹出来时的背景色和Row的背景色不一样，这是咋回事？

有啥办法能让 “F7F7F7” 这个颜色在bindPopup中展示对？

@Entry
@Component
struct Index {
  @State handlePopup: boolean = false

  build() {
    Column() {

      Row() {

      }
      .width(200)
      .height(50)
      .backgroundColor('#F7F7F7')
      .onClick(() => {
        this.handlePopup = !this.handlePopup;
      })
      .bindPopup(this.handlePopup, {
        message: '请输入100的整数倍',
        messageOptions: { font: { size: 15 }, textColor: '#000' },
        radius: 4,
        placement: Placement.Top,
        popupColor: '#F7F7F7',
        showInSubWindow: false,
        backgroundBlurStyle: BlurStyle.NONE
      })

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中bindPopup气泡的背景色怎么和设置的不一致？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

颜色是一样的，只不过是气泡的阴影导致了视觉上的错误而已。两种方法验证：

第一种：把你最外层的column加上背景色为"#f7f7f7"，然后点击弹出气泡，会发现颜色是一样的。

@Entry
@Component
struct Index {
  @State handlePopup: boolean = false;

  build() {
    Column() {

      Row() {

      }
      .width(200)
      .height(50)
      .backgroundColor(Color.Blue)
      .onClick(() => {
        this.handlePopup = !this.handlePopup;
      })
      .bindPopup(this.handlePopup, {
        message: '请输入100的整数倍',
        messageOptions: { font: { size: 15 }, textColor: '#000' },
        radius: 4,
        placement: Placement.Top,
        popupColor: '#F7F7F7',
        showInSubWindow: false,
        backgroundBlurStyle: BlurStyle.NONE
      });

    }.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor("#f7f7f7");
  }
}

第二种：把你气泡的阴影的radius设定为0，让气泡没有阴影，再比较气泡与row组件的背景色，你会发现，颜色还是一样的。

@Entry
@Component
struct Index {
  @State handlePopup: boolean = false;

  build() {
    Column() {

      Row() {

      }
      .width(200)
      .height(50)
      .backgroundColor('#F7F7F7')
      .onClick(() => {
        this.handlePopup = !this.handlePopup;
      })
      .bindPopup(this.handlePopup, {
        message: '请输入100的整数倍',
        messageOptions: { font: { size: 15 }, textColor: '#000' },
        radius: 4,
        placement: Placement.Top,
        popupColor: '#F7F7F7',
        showInSubWindow: false,
        backgroundBlurStyle: BlurStyle.NONE,
        shadow: {
          radius: 0
        }
      });

    }.width('100%').height('100%').justifyContent(FlexAlign.Center);
  }
}

更多关于HarmonyOS鸿蒙Next中bindPopup气泡的背景色怎么和设置的不一致？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


气泡的阴影的radius设定为0！感谢感谢，解决啦～，

好的呢，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

我试了， 没有问题啊，

cke_425.png

你这个是把气泡颜色设置为 ‘#F7F7’ 把popupColor设置成 ‘#F7F7F7’ 就能看出来了，

期待HarmonyOS能在未来带来更多创新的技术和理念。

你把你代码单独粘到空白项目或者页面试试 感觉是项目里其他代码干扰到了

我这个代码就是放在新建的项目中的测试的，

气泡颜色和Row布局颜色一致 ‘#F7F7F7’ 这个就能看出来颜色不一致了吧

图片

是一样的， 我用测色计都测了 。 色值完全一样，

pop上面有字， 只是视觉误差。

我在评论区贴了图片，应该能看到明显的颜色差别吧～harmony5和harmony6的手机我都试过了，都是这样的，颜色不一致，

在HarmonyOS Next中，bindPopup气泡背景色不一致通常由以下原因导致：

  1. 样式继承：气泡可能继承了父组件或全局的主题样式，覆盖了自定义设置。
  2. 主题影响：系统主题或深色/浅色模式会自动调整背景色，需检查是否启用了动态主题。
  3. 组件默认样式：Popup组件本身可能有预设的背景样式，需使用自定义样式类覆盖。
  4. 代码检查：确认设置的背景色属性是否正确，如background-color的值格式无误。

建议检查代码中是否有冲突的样式设置或主题配置。

在HarmonyOS Next中，bindPopup气泡的背景色与设置值不一致，通常是由于系统默认的蒙层叠加效果导致的。即使设置了 popupColor: '#F7F7F7'，系统仍会为Popup添加一个半透明的遮罩层，这会使实际显示的颜色变深或产生色差。

要解决此问题，最直接有效的方法是关闭Popup的蒙层效果。在你的代码中，你已经设置了 backgroundBlurStyle: BlurStyle.NONE，但这仅关闭了背景模糊，并未移除蒙层。你需要使用 maskColor 参数，并将其设置为完全透明。

请将你的 bindPopup 配置修改如下：

.bindPopup(this.handlePopup, {
  message: '请输入100的整数倍',
  messageOptions: { font: { size: 15 }, textColor: '#000' },
  radius: 4,
  placement: Placement.Top,
  popupColor: '#F7F7F7',
  showInSubWindow: false,
  backgroundBlurStyle: BlurStyle.NONE,
  maskColor: '#00000000' // 关键：将蒙层颜色设置为完全透明
})

通过添加 maskColor: '#00000000'，你将禁用系统默认的灰色半透明蒙层。这样，Popup的背景色 #F7F7F7 就能以其真实的颜色值显示，与Row的背景色保持一致。

如果问题依然存在，请检查是否在全局或页面级别设置了影响Popup的主题样式。此外，确保测试设备或模拟器运行的是最新的HarmonyOS Next SDK版本，以避免已知的显示问题。

回到顶部