1# Popup控制 2 3给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 接口 11 12 13| 名称 | 参数类型 | 描述 | 14| ---------- | ------------------------------------- | --------------------------------------- | 15| bindPopup | show: boolean,<br/>popup: [PopupOptions](#popupoptions类型说明) \| [CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show: 弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup: 配置当前弹窗提示的参数。 | 16 17## PopupOptions类型说明 18 19| 名称 | 类型 | 必填 | 描述 | 20| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | 21| message | string | 是 | 弹窗信息内容。 | 22| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | 23| primaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第一个按钮。<br/>value: 弹窗里主按钮的文本。<br/>action: 点击主按钮的回调函数。 | 24| secondaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第二个按钮。<br/>value: 弹窗里辅助按钮的文本。<br/>action: 点击辅助按钮的回调函数。 | 25| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | 26| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 | 27| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 | 28 29## CustomPopupOptions<sup>8+</sup>类型说明 30 31| 名称 | 类型 | 必填 | 描述 | 32| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | 33| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | 34| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom | 35| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | 36| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。<br/>默认值：true | 37| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true | 38| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | 39| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 | 40| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 | 41 42 43## 示例 44```ts 45// xxx.ets 46@Entry 47@Component 48struct PopupExample { 49 @State handlePopup: boolean = false 50 @State customPopup: boolean = false 51 52 // popup构造器定义弹框内容 53 @Builder popupBuilder() { 54 Row({ space: 2 }) { 55 Image($r("app.media.image")).width(24).height(24).margin({ left: -5 }) 56 Text('Custom Popup').fontSize(10) 57 }.width(100).height(50).padding(5) 58 } 59 60 build() { 61 Flex({ direction: FlexDirection.Column }) { 62 // PopupOptions 类型设置弹框内容 63 Button('PopupOptions') 64 .onClick(() => { 65 this.handlePopup = !this.handlePopup 66 }) 67 .bindPopup(this.handlePopup, { 68 message: 'This is a popup with PopupOptions', 69 placementOnTop: true, 70 showInSubWindow:false, 71 primaryButton: { 72 value: 'confirm', 73 action: () => { 74 this.handlePopup = !this.handlePopup 75 console.info('confirm Button click') 76 } 77 }, 78 // 第二个按钮 79 secondaryButton: { 80 value: 'cancel', 81 action: () => { 82 this.handlePopup = !this.handlePopup 83 console.info('cancel Button click') 84 } 85 }, 86 onStateChange: (e) => { 87 console.info(JSON.stringify(e.isVisible)) 88 if (!e.isVisible) { 89 this.handlePopup = false 90 } 91 } 92 }) 93 .position({ x: 100, y: 50 }) 94 95 96 // CustomPopupOptions 类型设置弹框内容 97 Button('CustomPopupOptions') 98 .onClick(() => { 99 this.customPopup = !this.customPopup 100 }) 101 .bindPopup(this.customPopup, { 102 builder: this.popupBuilder, 103 placement: Placement.Top, 104 mask: {color: 0x33000000}, 105 popupColor: Color.Yellow, 106 enableArrow: true, 107 showInSubWindow: false, 108 onStateChange: (e) => { 109 if (!e.isVisible) { 110 this.customPopup = false 111 } 112 } 113 }) 114 .position({ x: 80, y: 200 }) 115 }.width('100%').padding({ top: 5 }) 116 } 117} 118``` 119 120 121
