【鸿蒙 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构造器定义弹框内容@BuilderpopupBuilder() {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 })}
}效果：
点击图片出现弹窗，弹窗内点击内容进行交互处理
