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 
    } 
  } 
}) 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

效果见附件截图。

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

HarmonyOS

十根玉米

2024-08-04 18:36:30

浏览

回答 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) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

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) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

2024-08-05 13:06:54

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看