【鸿蒙 HarmonyOS NEXT】popup弹窗

一、背景

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

常见场景：点击按钮弹出popup弹窗，并对弹窗的内容进行交互逻辑处理，如：弹窗内点击跳转到其他页面

二、给组件绑定Popup弹窗

PopupOptions类型说明

名称	类型	必填	描述
message	string	是	弹窗信息内容。元服务API：从API version 11开始，该接口支持在元服务中使用。
placementOnTop(deprecated)	boolean	否	是否在组件上方显示，默认值为false。说明：从 API version 10 开始废弃，建议使用placement替代。
primaryButton	{ value: string, action: () => void }	否	第一个按钮。 value: 弹窗里主按钮的文本。 action: 点击主按钮的回调函数。元服务API：从API version 11开始，该接口支持在元服务中使用。
secondaryButton	{ value: string, action: () => void }	否	第二个按钮。 value: 弹窗里辅助按钮的文本。 action: 点击辅助按钮的回调函数。元服务API：从API version 11开始，该接口支持在元服务中使用。
onStateChange	(event: { isVisible: boolean }) => void	否	弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。元服务API：从API version 11开始，该接口支持在元服务中使用。
arrowOffset9+	Length	否	popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。元服务API：从API version 11开始，该接口支持在元服务中使用。
showInSubWindow9+	boolean	否	是否在子窗口显示气泡，默认值为false。元服务API：从API version 11开始，该接口支持在元服务中使用。
mask10+	boolean \| { color : ResourceColor }	否	设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。
messageOptions10+	PopupMessageOptions	否	设置弹窗信息文本参数。元服务API：从API version 11开始，该接口支持在元服务中使用。
targetSpace10+	Length	否	设置popup与目标的间隙。元服务API：从API version 11开始，该接口支持在元服务中使用。
placement10+	Placement	否	设置popup组件相对于目标的显示位置，默认值为Placement.Bottom。如果同时设置了placementOnTop和placement，则以placement的设置生效。元服务API：从API version 11开始，该接口支持在元服务中使用。
offset10+	Position	否	设置popup组件相对于placement设置的显示位置的偏移。说明：不支持设置百分比。元服务API：从API version 11开始，该接口支持在元服务中使用。
enableArrow10+	boolean	否	设置是否显示箭头。默认值：true 说明：当页面可用空间无法让气泡完全避让时，气泡会覆盖到组件上并且不显示箭头。元服务API：从API version 11开始，该接口支持在元服务中使用。
popupColor11+	Color \| string \| number \| Resource	否	提示气泡的颜色。如需去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。默认值：透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。元服务API：从API version 12开始，该接口支持在元服务中使用。
autoCancel11+	boolean	否	页面有操作时，是否自动关闭气泡。默认值：true 元服务API：从API version 12开始，该接口支持在元服务中使用。
width11+	Dimension	否	弹窗宽度。说明： showInSubWindow=true时最大高度为设备屏幕高度，showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度（没有时高度为0）-dock栏高度（没有时高度为0）-40VP-40VP。元服务API：从API version 12开始，该接口支持在元服务中使用。
arrowPointPosition11+	ArrowPointPosition	否	气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。元服务API：从API version 12开始，该接口支持在元服务中使用。
arrowWidth11+	Dimension	否	设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。默认值：16.0_vp 说明：不支持设置百分比。元服务API：从API version 12开始，该接口支持在元服务中使用。
arrowHeight11+	Dimension	否	设置箭头高度。默认值：8.0_vp 说明：不支持设置百分比。元服务API：从API version 12开始，该接口支持在元服务中使用。
radius11+	Dimension	否	设置气泡圆角半径。默认值：20.0_vp 元服务API：从API version 12开始，该接口支持在元服务中使用。
shadow11+	ShadowOptions \| ShadowStyle	否	设置气泡阴影。默认值：ShadowStyle.OUTER_DEFAULT_MD 元服务API：从API version 12开始，该接口支持在元服务中使用。
backgroundBlurStyle11+	BlurStyle	否	设置气泡模糊背景参数。默认值：BlurStyle.COMPONENT_ULTRA_THICK 元服务API：从API version 12开始，该接口支持在元服务中使用。
transition12+	TransitionEffect	否	自定义设置popup弹窗显示和退出的动画效果。说明： 1.如果不设置，则使用默认的显示/退出动效。 2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。 3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。元服务API：从API version 12开始，该接口支持在元服务中使用。
onWillDismiss12+	boolean\|(dismissPopupAction: DismissPopupAction) => void	否	设置popup交互式关闭拦截开关及拦截回调函数，默认值为true，popup响应点击、左滑/右滑、三键back。 1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；如果设置为true，则正常响应退出事件； 2.如果设置为函数类型，则拦截退出事件且执行回调函数。说明：在onWillDismiss回调中，不能再做onWillDismiss拦截。元服务API：从API version 12开始，该接口支持在元服务中使用。

三、具体实现

代码：

@Extend(Text)
function PopupTextStyle() {
  .fontSize(14)
  .fontColor('#222427')
  .lineHeight(16)
}
@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false; //定义变量控制弹窗显示
  controller: TabsController = new TabsController()

  build() {
    Column(){
      Image($r('app.media.navImg')).width(100)
        .onClick(()=>{
          this.customPopup = !this.customPopup;
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Bottom,
          mask: { color: '#80000000' },
          popupColor: Color.White,
          enableArrow: true, //是否显示箭头
          arrowPointPosition: ArrowPointPosition.CENTER, //气泡尖角位置
          arrowWidth: 13, //箭头宽度
          arrowHeight: 10, //箭头高度
          radius: 4,
          offset: {x:-5, y: -8 },
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false;
            }
          }
        })
    }
    .layoutWeight(1)
    .width('100%')
    .backgroundColor('#f0f2f4')
    }

  //popup构造器定义弹框内容
  @Builder
  popupBuilder() {
    Column({ space: 16 }) {
      Text('首页')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 11')
        })
      Text('购物车')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 22')
        })
      Text('分类')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 33')
        })
    }
    .alignItems(HorizontalAlign.Start)
    .width(74)
    .padding({ top: 16, bottom: 16, left: 16 })
  }
}

效果：

点击图片出现弹窗，弹窗内点击内容进行交互处理