HarmonyOS 气泡提示popup设置popupColor不生效问题

自定义CustomBuilder设置了popupColor,颜色未生效,代码如下:

// popup构造器定义弹框内容 
@Builder popupBuilder() { 
  Row() { 
    Text('定位服务未开启,开启后可展示查询当前城市的融资信息') 
      .fontColor("#FFFFFF") 
      .width("55%") 
      .fontSize(14) 
    Button("开启定位") 
      .fontSize(12) 
      .height(27) 
      .backgroundColor("#EB4F4D") 
      .onClick(() => { 
 
      }) 
    Image($r("app.media.loc_cancel")) 
      .width(12).height(12) 
      .margin({ right: 20 }) 
 
  }.width("100%").height(70) 
  .padding({ left: 10, right: 10 }) 
  // .backgroundColor("#4d4d4d") 
  .justifyContent(FlexAlign.SpaceBetween) 
} 
 
.bindPopup(this.customPopup, { 
  builder: this.popupBuilder, 
  placement: Placement.Bottom, 
  enableArrow: true, 
  popupColor: '#4d4d4d', 
  showInSubWindow: false, 
  radius: "8vp", 
  onStateChange: (e) => { 
    if (!e.isVisible) { 
      this.customPopup = false 
    } 
  } 
}) 

效果见附件截图。

HarmonyOS 气泡提示popup设置popupColor不生效问题-鸿蒙开发者社区

HarmonyOS
2024-08-04 18:36:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pfuchenlu

您提供的方法里出现了自己调用自己的情况,当点击气泡弹窗按钮之后,customPoup为true,逻辑走到builder:this.popupBuilder,会重新调用自己,走前面的逻辑,导致无法走到颜色设置逻辑那里

1、把弹窗样式和点击事件、bindPopup分开

2、把弹窗样式作为popupBuilder方法

3、在builder中建一个弹窗按钮,把点击事件、bindPopup修饰在按钮下面

具体代码如下:

@Entry 
@Component 
struct PopupTest1{ 
  @State customPopup: boolean = false 
 
  @Builder popupBuilder() { 
    Row() { 
      Text('定位服务未开启,开启后可展示查询当前城市的融资信息') 
        .fontColor("#FFFFFF") 
        .width("55%") 
        .fontSize(14) 
      Button("开启定位") 
        .fontSize(12) 
        .height(27) 
        .backgroundColor("#EB4F4D") 
        .onClick(() => { 
 
        }) 
      Image($r("app.media.ic_card")) 
        .width(12).height(12) 
        .margin({ right: 20 }) 
 
    }.width("100%").height(70) 
    .padding({ left: 10, right: 10 }) 
    // .backgroundColor("#4d4d4d") 
    .justifyContent(FlexAlign.SpaceBetween) 
  } 
 
  build() { 
    Column(){ 
 
      Button('点击出现弹窗') 
        .onClick(() => { 
          this.customPopup = !this.customPopup 
        }) 
        .bindPopup(this.customPopup, { 
          builder: this.popupBuilder, 
          placement: Placement.Bottom, 
          enableArrow: true, 
          popupColor: '#4d4d4d', 
          //    popupColor: '#EB4F4D', 
          showInSubWindow: false, 
          radius: "8vp", 
          onStateChange: (e) => { 
            if (!e.isVisible) { 
              this.customPopup = false 
            } 
          } 
        }) 
 
 
    }.backgroundColor(Color.Black) 
  } 
}

arkUI中覆盖组件是stack(),看看您的气泡页面有没有stack(),如果有,看看气泡提示组件下面有没有其他组件呢!

在您发给我的代码中将popupBuilder()方法里面的row()的背景颜色去掉,在.bindPopup中加入backgroundBlurStyle:BlurStyle.NONE属性,popupColor颜色即可生效。完整代码如下:

@Entry 
@Component 
export struct PopupTest1 { 
  @State customPopup: boolean = false 
 
  @Builder 
  popupBuilder() { 
    Row() { 
      Text('定位服务未开启,开启后可展示查询当前城市的融资信息') 
        .fontColor("#FFFFFF") 
        .width("55%") 
        .fontSize(14) 
      Button("开启定位") 
        .fontSize(12) 
        .height(27) 
        .backgroundColor("#EB4F4D") 
        .onClick(() => { 
 
        }) 
      Image($r("app.media.startIcon")) 
        .width(12).height(12) 
        .margin({ right: 20 }) 
 
    }.width("100%").height(70) 
    .padding({ left: 10, right: 10 }) 
    // .backgroundColor("#4d4d4d") 
    .justifyContent(FlexAlign.SpaceBetween) 
  } 
 
  build() { 
    Column() { 
 
      Button('点击出现弹窗') 
        .onClick(() => { 
          this.customPopup = !this.customPopup 
        }) 
        .bindPopup(this.customPopup, { 
          builder: this.popupBuilder, 
          placement: Placement.Bottom, 
          // popupColor: '#4d4d4d', 
          popupColor: Color.Green, 
          backgroundBlurStyle:BlurStyle.NONE, 
          enableArrow: true, 
          // popupColor: '#EB4F4D', 
          showInSubWindow: false, 
          radius: "8vp", 
          onStateChange: (e) => { 
            if (!e.isVisible) { 
              this.customPopup = false 
            } 
          } 
        }) 
 
 
    }.margin({top:'100'}).backgroundColor(Color.Black) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-05 13:06:54
相关问题
HarmonyOS @Observed生效问题
274浏览 • 1回复 待解决
HarmonyOS Panel 设置 borderRadius 生效
590浏览 • 1回复 待解决
popup组件气泡框指向颜色怎么修改?
7218浏览 • 1回复 待解决
HarmonyOS 关于onKeyEvent生效问题
246浏览 • 1回复 待解决
ConstraintSize尺寸设置生效
2337浏览 • 1回复 待解决
HarmonyOS Badge文本颜色设置生效
194浏览 • 1回复 待解决
通过WindowProperties设置属性生效
2102浏览 • 1回复 待解决
HarmonyOS 设置了icon和label生效
121浏览 • 1回复 待解决
Tab 设置 barBackgroundColor为透明生效
232浏览 • 1回复 待解决
HarmonyOS margin生效
538浏览 • 1回复 待解决
List组件的initialIndex属性设置生效
2182浏览 • 1回复 待解决
HarmonyOS expandSafeArea生效
215浏览 • 1回复 待解决