1# Popup控制 2 3给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。 4 5> **说明：** 6> 7> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - popup弹窗的显示状态在onStateChange事件回调中反馈，其显隐与组件的创建或销毁无强对应关系。 10 11## bindPopup 12 13bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions) 14 15给组件绑定Popup弹窗。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 25| show | boolean | 是 | 弹窗显示状态，默认值为false，隐藏弹窗。popup弹窗必须等待页面全部构建完成才能展示，因此show不能在页面构建中设置为true，否则会导致popup弹窗显示位置及形状错误。该参数从API Version 13开始支持[!!语法](../../../quick-start/arkts-new-binding.md#内置组件参数双向绑定)双向绑定变量。 | 26| popup | [PopupOptions](#popupoptions类型说明) \| [CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 是 | 配置弹出弹窗的参数。 | 27 28## PopupOptions类型说明 29 30| 名称 | 类型 | 必填 | 说明 | 31| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 32| message | string | 是 | 弹窗信息内容。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 33| placementOnTop<sup>(deprecated)</sup> | boolean | 否 | 是否在组件上方显示，默认值为false。<br />**说明：**<br />从 API version 10 开始废弃，建议使用`placement`替代。 | 34| primaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第一个按钮。<br/>value: 弹窗里主按钮的文本。<br/>action: 点击主按钮的回调函数。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 35| secondaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第二个按钮。<br/>value: 弹窗里辅助按钮的文本。<br/>action: 点击辅助按钮的回调函数。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 36| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 37| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| showInSubWindow<sup>9+</sup> | boolean | 否 | 取值为true时，气泡会显示在创建的子窗里，取值为false时，气泡会显示在对应的主窗中。<br />默认值：false<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39| mask<sup>10+</sup> | boolean \| { color : [ResourceColor](ts-types.md#resourcecolor) }| 否 | 设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10类型说明) | 否 | 设置弹窗信息文本参数。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 41| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | 否 | 设置popup与目标的间隙。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| placement<sup>10+</sup> | [Placement](ts-appendix-enums.md#placement8) | 否 | 设置popup组件相对于目标的显示位置，默认值为Placement.Bottom。<br />如果同时设置了`placementOnTop`和`placement`，则以`placement`的设置生效。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 43| offset<sup>10+</sup> | [Position](ts-types.md#position) | 否 | 设置popup组件相对于placement设置的显示位置的偏移。<br />**说明：**<br />不支持设置百分比。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| enableArrow<sup>10+</sup> | boolean | 否 | 设置是否显示箭头。<br/>默认值：true<br/>**说明：** <br/>当页面可用空间无法让气泡完全避让时，气泡会覆盖到组件上并且不显示箭头。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 45| popupColor<sup>11+</sup> | [Color](ts-appendix-enums.md#color) \| string \| number \| [Resource](ts-types.md#resource) | 否 | 提示气泡的颜色。如需去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。<br/>默认值：透明色[TRANSPARENT](ts-appendix-enums.md#color)加模糊背景填充效果[COMPONENT_ULTRA_THICK](ts-universal-attributes-background.md#blurstyle9)。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 46| autoCancel<sup>11+</sup> | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 47| width<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 弹窗宽度。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 48| arrowPointPosition<sup>11+</sup> | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | 否 | 气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 49| arrowWidth<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。<br/>默认值：16<br/>单位：vp<br/>**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 50| arrowHeight<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置箭头高度。<br/>默认值：8<br/>单位：vp<br/>**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 51| radius<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置气泡圆角半径。<br/>默认值：20<br/>单位：vp<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 52| shadow<sup>11+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明) | 否 | 设置气泡阴影。<br/>默认值：ShadowStyle.OUTER_DEFAULT_MD <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 53| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 设置气泡模糊背景参数。<br />默认值：BlurStyle.COMPONENT_ULTRA_THICK<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 54| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 自定义设置popup弹窗显示和退出的动画效果。<br/>**说明：**<br/>1.如果不设置，则使用默认的显示/退出动效。<br/>2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。<br/>3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 55| onWillDismiss<sup>12+</sup> | boolean \| Callback\<([DismissPopupAction](#dismisspopupaction12类型说明))> | 否 | 设置popup交互式关闭拦截开关及拦截回调函数，默认值为true，popup响应点击、左滑/右滑、三键back。<br />1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；如果设置为true，则正常响应退出事件；<br />2.如果设置为函数类型，则拦截退出事件且执行回调函数。<br />**说明：**<br />在onWillDismiss回调中，不能再做onWillDismiss拦截。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 56| followTransformOfTarget<sup>13+</sup> | boolean | 否 | 气泡绑定的宿主组件或其宿主组件的父容器添加了旋转、缩放等变换时，气泡是否能显示在对应变化后的位置上。<br/>默认值：false <br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 57| keyboardAvoidMode<sup>15+</sup> | [KeyboardAvoidMode](../js-apis-promptAction.md#keyboardavoidmode12枚举说明) | 否 | 气泡是否避让软键盘，默认不避让。设置为避让后，气泡显示空间不足时，由原先居中覆盖父组件的方式改为平移覆盖父组件，且气泡箭头不指向宿主时，不再显示箭头。<br/>默认值：KeyboardAvoidMode.NONE <br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 58 59## PopupMessageOptions<sup>10+</sup>类型说明 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65| 名称 | 类型 | 必填 |说明 | 66| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 67| textColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置弹窗信息文本颜色。 | 68| font | [Font](ts-types.md#font) | 否 | 设置弹窗信息字体属性。<br/>**说明：** <br/>不支持设置family。 | 69 70## DismissPopupAction<sup>12+</sup>类型说明 71 72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76| 名称 | 类型 | 必填 | 说明 | 77| ------- | ----------------------------------------- | ---- | --------------------------------------------------------------- | 78| dismiss | function | 是 | popup关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。 | 79| reason | [DismissReason](#dismissreason12枚举说明) | 是 | 关闭原因，返回本次拦截popup消失的事件原因。 | 80 81## DismissReason<sup>12+</sup>枚举说明 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85| 名称 | 说明 | 86| ------------- | ------------------ | 87| PRESS_BACK | 点击Back键。 | 88| TOUCH_OUTSIDE | 点击组件外部区域。 | 89 90## CustomPopupOptions<sup>8+</sup>类型说明 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94| 名称 | 类型 | 必填 | 说明 | 95| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 96| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。<br />**说明：**<br />popup为通用属性，自定义popup中不支持再次弹出popup。对builder下的第一层容器组件不支持使用position属性，如果使用将导致气泡不显示。builder中若使用自定义组件，自定义组件的aboutToAppear和aboutToDisappear生命周期与popup弹窗的显隐无关，不能使用其生命周期判断popup弹窗的显隐。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 97| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 98| popupColor | number \| [Color](ts-types.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 提示气泡的颜色。如需去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。<br/>API version 10，默认值：'#4d4d4d'<br />API version 11及以后，默认值：透明色[TRANSPARENT](ts-appendix-enums.md#color)加模糊背景填充效果[COMPONENT_ULTRA_THICK](ts-universal-attributes-background.md#blurstyle9)<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 99| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。<br/>默认值：true<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 100| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true<br />**说明：**<br />如果要实现点击气泡内消失需要在builder中先放一个布局组件，然后再将Popup高级组件放在布局组件里面，再在布局组件的onClick事件中修改的传入bindPopup的变量（show: boolean）值。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 101| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 102| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 103| showInSubWindow<sup>9+</sup> | boolean | 否 | 取值为true时，气泡会显示在创建的子窗里，取值为false时，气泡会显示在对应的主窗中。<br />默认值：false<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 104| maskColor<sup>(deprecated)</sup> | [Resource](ts-types.md#resource) \| string \| number \| [Color](ts-types.md#color) | 否 | 设置气泡遮罩层颜色。<br />**说明：**<br />从 API version 10 开始废弃，建议使用`mask`替代。 | 105| mask<sup>10+</sup> | boolean \| { color : [ResourceColor](ts-types.md#resourcecolor) }| 否 | 设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 106| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | 否 | 设置popup与目标的间隙。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 107| offset<sup>10+</sup> | [Position](ts-types.md#position) | 否 | 设置popup组件相对于placement设置的显示位置的偏移。<br />**说明：**<br />不支持设置百分比。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 108| width<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 弹窗宽度。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 109| arrowPointPosition<sup>11+</sup> | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | 否 | 气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 110| arrowWidth<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。<br/>默认值：16<br/>单位：vp<br />**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 111| arrowHeight<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置箭头高度。<br/>默认值：8<br/>单位：vp<br />**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 112| radius<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置气泡圆角半径。<br/>默认值：20<br/>单位：vp<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 113| shadow<sup>11+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明) | 否 | 设置气泡阴影。<br/>默认值：ShadowStyle.OUTER_DEFAULT_MD <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 114| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 设置气泡模糊背景参数。<br />默认值：BlurStyle.COMPONENT_ULTRA_THICK <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 115| focusable<sup>11+</sup> | boolean | 否 | 设置气泡弹出后是否获焦。<br />默认值：false <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 116| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 自定义设置popup弹窗显示和退出的动画效果。<br/>**说明：**<br/>如果不设置，则使用默认的显示/退出动效。<br/>2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。<br/>3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 117| onWillDismiss<sup>12+</sup> | boolean \| Callback\<([DismissPopupAction](#dismisspopupaction12类型说明))> | 否 | 设置popup交互式关闭拦截开关及拦截回调函数，默认值为true，popup响应点击、左滑/右滑、三键back。<br />1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；如果设置为true，则正常响应退出事件；<br />2.如果设置为函数类型，则拦截退出事件且执行回调函数。<br />**说明：**<br />在onWillDismiss回调中，不能再做onWillDismiss拦截。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 118| followTransformOfTarget<sup>13+</sup> | boolean | 否 | 气泡绑定的宿主组件或其宿主组件的父容器添加了旋转、缩放等变换时，气泡是否能显示在对应变化后的位置上。<br/>默认值：false <br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 119| keyboardAvoidMode<sup>15+</sup> | [KeyboardAvoidMode](../js-apis-promptAction.md#keyboardavoidmode12枚举说明) | 否 | 气泡是否避让软键盘，默认不避让。设置为避让后，气泡显示空间不足时，由原先居中覆盖父组件的方式改为平移覆盖父组件，且气泡箭头不指向宿主时，不再显示箭头。<br/>默认值：KeyboardAvoidMode.NONE <br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 120 121## 示例 122 123### 示例1（弹出不同类型的气泡） 124 125该示例为bindPopup通过配置popup弹出PopupOptions、CustomPopupOptions类型的气泡。 126 127```ts 128// xxx.ets 129@Entry 130@Component 131struct PopupExample { 132 @State handlePopup: boolean = false 133 @State customPopup: boolean = false 134 135 // popup构造器定义弹框内容 136 @Builder popupBuilder() { 137 Row({ space: 2 }) { 138 Image($r("app.media.icon")).width(24).height(24).margin({ left: -5 }) 139 Text('Custom Popup').fontSize(10) 140 }.width(100).height(50).padding(5) 141 } 142 143 build() { 144 Flex({ direction: FlexDirection.Column }) { 145 // PopupOptions 类型设置弹框内容 146 Button('PopupOptions') 147 .onClick(() => { 148 this.handlePopup = !this.handlePopup 149 }) 150 .bindPopup(this.handlePopup, { 151 message: 'This is a popup with PopupOptions', 152 placementOnTop: true, 153 showInSubWindow:false, 154 primaryButton: { 155 value: 'confirm', 156 action: () => { 157 this.handlePopup = !this.handlePopup 158 console.info('confirm Button click') 159 } 160 }, 161 // 第二个按钮 162 secondaryButton: { 163 value: 'cancel', 164 action: () => { 165 this.handlePopup = !this.handlePopup 166 console.info('cancel Button click') 167 } 168 }, 169 onStateChange: (e) => { 170 console.info(JSON.stringify(e.isVisible)) 171 if (!e.isVisible) { 172 this.handlePopup = false 173 } 174 } 175 }) 176 .position({ x: 100, y: 150 }) 177 178 179 // CustomPopupOptions 类型设置弹框内容 180 Button('CustomPopupOptions') 181 .onClick(() => { 182 this.customPopup = !this.customPopup 183 }) 184 .bindPopup(this.customPopup, { 185 builder: this.popupBuilder, 186 placement: Placement.Top, 187 mask: {color:'#33000000'}, 188 popupColor: Color.Yellow, 189 enableArrow: true, 190 showInSubWindow: false, 191 onStateChange: (e) => { 192 if (!e.isVisible) { 193 this.customPopup = false 194 } 195 } 196 }) 197 .position({ x: 80, y: 300 }) 198 }.width('100%').padding({ top: 5 }) 199 } 200} 201``` 202 203 204 205### 示例2（设置气泡的文本样式） 206 207该示例为bindPopup通过配置messageOptions弹出自定义文本样式的气泡。 208 209```ts 210// xxx.ets 211 212@Entry 213@Component 214struct PopupExample { 215 @State handlePopup: boolean = false 216 217 build() { 218 Column({ space: 100 }) { 219 Button('PopupOptions').margin(100) 220 .onClick(() => { 221 this.handlePopup = !this.handlePopup 222 }) 223 .bindPopup(this.handlePopup, { 224 // PopupOptions类型气泡的内容 225 message: 'This is a popup with PopupOptions', 226 messageOptions: { 227 // 气泡的文本样式 228 textColor: Color.Red, 229 font: { 230 size: '14vp', 231 style: FontStyle.Italic, 232 weight: FontWeight.Bolder 233 } 234 }, 235 placement: Placement.Bottom, 236 enableArrow: false, // 气泡弹出时不显示箭头 237 targetSpace: '15vp', 238 onStateChange: (e) => { 239 console.info(JSON.stringify(e.isVisible)) 240 if (!e.isVisible) { 241 this.handlePopup = false 242 } 243 } 244 }) 245 }.margin(20) 246 } 247} 248``` 249 250 251 252### 示例3（设置气泡的样式） 253 254该示例为bindPopup通过配置arrowHeight、arrowWidth、radius、shadow、popupColor，实现气泡箭头以及气泡本身的样式。 255 256```ts 257// xxx.ets 258 259@Entry 260@Component 261struct PopupExample { 262 @State customPopup: boolean = false 263 @State handlePopup: boolean = false 264 265 build() { 266 Column({ space: 100 }) { 267 Button("popup") 268 .margin({ top: 50 }) 269 .onClick(() => { 270 this.customPopup = !this.customPopup 271 }) 272 .bindPopup(this.customPopup, { 273 message: "this is a popup", 274 arrowHeight: 20, // 设置气泡箭头高度 275 arrowWidth: 20, // 设置气泡箭头宽度 276 radius: 20, // 设置气泡的圆角 277 shadow: ShadowStyle.OUTER_DEFAULT_XS, // 设置气泡的阴影 278 }) 279 280 Button('PopupOptions') 281 .onClick(() => { 282 this.handlePopup = !this.handlePopup 283 }) 284 .bindPopup(this.handlePopup, { 285 width: 300, 286 message: 'This is a popup with PopupOptions', 287 arrowPointPosition: ArrowPointPosition.START, // 设置箭头的位置 288 backgroundBlurStyle: BlurStyle.NONE, // 关闭气泡的模糊背景 289 popupColor: Color.Red, // 设置气泡的背景色 290 autoCancel: true, 291 }) 292 } 293 .width('100%') 294 } 295} 296``` 297 298 299 300### 示例4（设置气泡的动效） 301 302该示例为bindPopup通过配置transition，实现气泡的显示和退出动效。 303 304```ts 305// xxx.ets 306@Entry 307@Component 308struct PopupExample { 309 @State handlePopup: boolean = false 310 @State customPopup: boolean = false 311 312 // popup构造器定义弹框内容 313 @Builder popupBuilder() { 314 Row() { 315 Text('Custom Popup with transitionEffect').fontSize(10) 316 }.height(50).padding(5) 317 } 318 319 build() { 320 Flex({ direction: FlexDirection.Column }) { 321 // PopupOptions 类型设置弹框内容 322 Button('PopupOptions') 323 .onClick(() => { 324 this.handlePopup = !this.handlePopup 325 }) 326 .bindPopup(this.handlePopup, { 327 message: 'This is a popup with transitionEffect', 328 placementOnTop: true, 329 showInSubWindow: false, 330 onStateChange: (e) => { 331 console.info(JSON.stringify(e.isVisible)) 332 if (!e.isVisible) { 333 this.handlePopup = false 334 } 335 }, 336 // 设置弹窗显示动效为透明度动效与平移动效的组合效果，无退出动效 337 transition:TransitionEffect.asymmetric( 338 TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine( 339 TransitionEffect.translate({ x: 50, y: 50 })), 340 TransitionEffect.IDENTITY) 341 }) 342 .position({ x: 100, y: 150 }) 343 344 // CustomPopupOptions 类型设置弹框内容 345 Button('CustomPopupOptions') 346 .onClick(() => { 347 this.customPopup = !this.customPopup 348 }) 349 .bindPopup(this.customPopup, { 350 builder: this.popupBuilder, 351 placement: Placement.Top, 352 showInSubWindow: false, 353 onStateChange: (e) => { 354 if (!e.isVisible) { 355 this.customPopup = false 356 } 357 }, 358 // 设置弹窗显示动效与退出动效为缩放动效 359 transition:TransitionEffect.scale({ x: 1, y: 0 }).animation({ duration: 500, curve: Curve.Ease }) 360 }) 361 .position({ x: 80, y: 300 }) 362 }.width('100%').padding({ top: 5 }) 363 } 364} 365``` 366 367 368 369### 示例5（为气泡添加事件） 370 371该示例为bindPopup通过配置onWillDismiss，实现当气泡退出时，拦截退出事件并执行回调函数。 372 373```ts 374// xxx.ets 375 376@Entry 377@Component 378struct PopupExample { 379 @State handlePopup: boolean = false 380 build() { 381 Column() { 382 Button('PopupOptions') 383 .onClick(() => { 384 this.handlePopup = true 385 }) 386 .bindPopup(this.handlePopup, { 387 message: 'This is a popup with PopupOptions', 388 messageOptions: { 389 textColor: Color.Red, 390 font: { 391 size: '14vp', 392 style: FontStyle.Italic, 393 weight: FontWeight.Bolder 394 } 395 }, 396 placement: Placement.Bottom, 397 enableArrow: false, 398 targetSpace: '15vp', 399 onStateChange: (e) => { 400 if (!e.isVisible) { 401 this.handlePopup = false 402 } 403 }, 404 onWillDismiss: ( 405 (dismissPopupAction: DismissPopupAction) => { 406 console.info("dismissReason:" + JSON.stringify(dismissPopupAction.reason)) 407 if (dismissPopupAction.reason == DismissReason.PRESS_BACK) { 408 dismissPopupAction.dismiss() 409 } 410 } 411 ) 412 }) 413 }.margin(20) 414 } 415} 416``` 417 418 419 420### 示例6（为气泡拦截退出事件） 421 422该示例通过配置onWillDismiss的boolean类型为false时，拦截气泡的退出事件。 423 424```ts 425// xxx.ets 426 427@Entry 428@Component 429struct PopupExample { 430 @State handlePopup: boolean = false 431 build() { 432 Column() { 433 Button('PopupOptions') 434 .onClick(() => { 435 this.handlePopup = true 436 }) 437 .bindPopup(this.handlePopup, { 438 message: 'This is a popup with PopupOptions', 439 messageOptions: { 440 textColor: Color.Red, 441 font: { 442 size: '14vp', 443 style: FontStyle.Italic, 444 weight: FontWeight.Bolder 445 } 446 }, 447 placement: Placement.Bottom, 448 enableArrow: false, 449 targetSpace: '15vp', 450 followTransformOfTarget: true, 451 onStateChange: (e) => { 452 let timer = setTimeout(()=>{this.handlePopup = false},6000) 453 if (!e.isVisible) { 454 this.handlePopup = false 455 clearTimeout(timer) 456 } 457 }, 458 onWillDismiss: false 459 }) 460 }.margin(20) 461 } 462} 463``` 464 465 466
