【鸿蒙 HarmonyOS NEXT】popup弹窗

一、背景
给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。
常见场景：点击按钮弹出popup弹窗，并对弹窗的内容进行交互逻辑处理，如：弹窗内点击跳转到其他页面
二、给组件绑定Popup弹窗
PopupOptions类型说明
名称类型必填描述messagestring是 弹窗信息内容。
元服务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开始，该接口支持在元服务中利用。
  三、具体实现
代码：

1. @Extend(Text)
2. function PopupTextStyle() {
3.   .fontSize(14)
4.   .fontColor('#222427')
5.   .lineHeight(16)
6. }
7. @Entry
8. @Component
9. struct PopupExample {
10.   @State customPopup: boolean = false; //定义变量控制弹窗显示
11.   controller: TabsController = new TabsController()
13.   build() {
14.     Column(){
15.       Image($r('app.media.navImg')).width(100)
16.         .onClick(()=>{
17.           this.customPopup = !this.customPopup;
18.         })
19.         .bindPopup(this.customPopup, {
20.           builder: this.popupBuilder,
21.           placement: Placement.Bottom,
22.           mask: { color: '#80000000' },
23.           popupColor: Color.White,
24.           enableArrow: true, //是否显示箭头
25.           arrowPointPosition: ArrowPointPosition.CENTER, //气泡尖角位置
26.           arrowWidth: 13, //箭头宽度
27.           arrowHeight: 10, //箭头高度
28.           radius: 4,
29.           offset: {x:-5, y: -8 },
30.           onStateChange: (e) => {
31.             if (!e.isVisible) {
32.               this.customPopup = false;
33.             }
34.           }
35.         })
36.     }
37.     .layoutWeight(1)
38.     .width('100%')
39.     .backgroundColor('#f0f2f4')
40.     }
42.   //popup构造器定义弹框内容
43.   @Builder
44.   popupBuilder() {
45.     Column({ space: 16 }) {
46.       Text('首页')
47.         .PopupTextStyle()
48.         .onClick(()=>{
49.           console.log('lucy== 11')
50.         })
51.       Text('购物车')
52.         .PopupTextStyle()
53.         .onClick(()=>{
54.           console.log('lucy== 22')
55.         })
56.       Text('分类')
57.         .PopupTextStyle()
58.         .onClick(()=>{
59.           console.log('lucy== 33')
60.         })
61.     }
62.     .alignItems(HorizontalAlign.Start)
63.     .width(74)
64.     .padding({ top: 16, bottom: 16, left: 16 })
65.   }
66. }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。