鸿蒙Next气泡提示（Popup）的使用 原创

本文介绍自定义的气泡CustomPopupOptions的使用，设置弹出框内容，弹出框位置，是否为模态窗口，默认小箭头的设置，简单动画，看效果：

@Entry
@ComponentV2
struct  test{
  @Local customPopup: boolean = false
  @Builder
  viewToolView(){
    Row({space:5}){
      Image($r("app.media.icon_send")).width(15).height(15)
      Text('转发').fontColor(Color.White).fontSize(16)
      Image($r("app.media.icon_good")).width(15).height(15)
      Text('点赞').fontColor(Color.White).fontSize(16)
      Image($r("app.media.icon_comment")).width(15).height(15)
      Text('评论').fontColor(Color.White).fontSize(16)
    }.padding(5).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Start)
    // .backgroundColor('#5C5C5C')
  }
  build() {
    Column({space:20}){

      Text('系统')

      Text('TOP').fontSize(20).fontColor(Color.Black).onClick(()=>{
        this.customPopup = !this.customPopup
      }).bindPopup(this.customPopup, {
        builder: this.viewToolView, // 气泡的内容
        placement:Placement.Top, // 气泡的弹出位置
        backgroundBlurStyle:BlurStyle.NONE,//去除模糊背景
        popupColor:'#5C5C5C',
        arrowHeight:0, //设置箭头高度
        arrowWidth:0,
        enableArrow:false, //去掉默认的小箭头
        radius:5,
        onStateChange: (e) => {
          if (!e.isVisible) {
            this.customPopup = false
          }
        }
      })
      Row(){
        Text('RightBottom').fontSize(20).fontColor(Color.Black).onClick(()=>{
          this.customPopup = !this.customPopup
        }).bindPopup(this.customPopup, {
          builder: this.viewToolView, // 气泡的内容
          placement:Placement.RightBottom, // 气泡的弹出位置
          backgroundBlurStyle:BlurStyle.NONE,//去除模糊背景
          popupColor:'#5C5C5C',
          arrowHeight:8, //设置箭头高度
          arrowWidth:18,
          targetSpace:10, //设置popup与目标的间隙
          radius:5,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
      }.width('100%')

      Text('Bottom').fontSize(20).fontColor(Color.Black).onClick(()=>{
        this.customPopup = !this.customPopup
      }).bindPopup(this.customPopup, {
        builder: this.viewToolView, // 气泡的内容
        placement:Placement.Bottom, // 气泡的弹出位置
        mask:false, //是否有遮罩层及遮罩颜色

        backgroundBlurStyle:BlurStyle.NONE,//去除模糊背景
        popupColor:'#5C5C5C',
        enableArrow:true, //是否显示掉默认小箭头

        radius:5,
        onStateChange: (e) => {
          if (!e.isVisible) {
            this.customPopup = false
          }
        }
      })

      Text('气泡尖角相对于父组件显示位置').fontSize(20).fontColor(Color.Black).onClick(()=>{
        this.customPopup = !this.customPopup
      }).margin({top:30}).bindPopup(this.customPopup, {
        builder: this.viewToolView, // 气泡的内容
        placement:Placement.Bottom, // 气泡的弹出位置
        mask:false, //是否有遮罩层及遮罩颜色

        backgroundBlurStyle:BlurStyle.NONE,//去除模糊背景
        popupColor:'#5C5C5C',
        enableArrow:true, //是否显示掉默认小箭头
        // 气泡尖角相对于父组件显示位置
        arrowPointPosition:ArrowPointPosition.START,
        radius:5,
        onStateChange: (e) => {
          if (!e.isVisible) {
            this.customPopup = false
          }
        },
        // 设置弹窗显示动效与退出动效 平移+透明度
        transition:TransitionEffect.translate({ x: 0, y: 10 }).combine(TransitionEffect.opacity(0)).animation({ duration: 500, curve: Curve.Ease })
      })
    }.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}