bindPopup弹窗自定义圆角位置
==================

#### 问题现象

bindPopup弹窗如何自定义圆角位置？如只设置底部或者顶部圆角？

#### 背景知识

[bindPopup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup#bindpopup)为组件绑定Popup气泡，入参[PopupOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup#popupoptions类型说明)的部分字段说明如下：

*   radius：可以设置气泡圆角半径，但不支持自定义圆角位置。
*   popupColor：设置气泡的背景颜色。

#### 解决方案

设置气泡的背景popupColor为透明色，再通过设置气泡内的最外层组件的圆角样式，以在视觉上实现气泡自定义圆角位置的效果。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ee/v3/b1KYHi3qQIKlsOeH9l_jkg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134037Z&HW-CC-Expire=86400&HW-CC-Sign=0C6FAB7F0EE323146AC46C4E09BC184577F31244216225B67B3F35FD39D1F93C)

设置popupColor为透明色时一定要设置backgroundBlurStyle字段为BlurStyle.NONE。

只设置气泡弹窗的左上和右下圆角。

@Entry
@Component
struct BindPopupDemo {
  @State customPopup: boolean \= false; _// 定义变量控制弹窗显示_

 _ // popup构造器定义弹框内容_
  @Builder
  popupBuilder() {
    Column({ space: 2 }) {
      Text('Popup').margin({ top: 16, bottom: 16 });
    }
    .justifyContent(FlexAlign.SpaceAround)
    .borderRadius({ topLeft: 16, bottomRight: 16 }) _//_ _设置Column左上和右下圆角_
    .width(100)
    .borderWidth(1);
  }

  build() {
    Column() {
      Button('click')
        .onClick(() \=\> {
          this.customPopup \= !this.customPopup;
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          mask: false,
          popupColor: Color.Transparent, _// 气泡的背景色设为透明_
          backgroundBlurStyle: BlurStyle.NONE, _//_ _关闭气泡模糊背景_
          radius: 0, _// 设置气泡的圆角_
          shadow: { radius: 0 },
          onStateChange: (e) \=\> {
            this.customPopup \= e.isVisible;
          }
        });
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%');
  }
}

限制：由于是在气泡自定义内容函数中根组件设置圆角样式，所以不能在bindPopup入参中再设置箭头、阴影、背景颜色等样式，否则会和弹窗根组件设置的样式产生干扰。