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

2025-06-23
北京
本文字数：1838 字
阅读完需：约 6 分钟

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


@Entry@ComponentV2struct  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)  }}