1# 气泡提示（Popup） 2 3 4Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。 5 6 7气泡分为两种类型，一种是系统提供的气泡[PopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#popupoptions类型说明)，一种是开发者可以自定义的气泡[CustomPopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8类型说明)。其中PopupOptions为系统提供的气泡，通过配置primaryButton、secondaryButton来设置带按钮的气泡。CustomPopupOptions通过配置[builder](../quick-start/arkts-builder.md)参数来设置自定义的气泡。 8 9 10## 文本提示气泡 11 12文本提示气泡常用于只展示带有文本的信息提示，不带有任何交互的场景。Popup属性需绑定组件，当bindPopup属性中参数show为true时会弹出气泡提示。 13 14在Button组件上绑定Popup属性，每次点击Button按钮，handlePopup会切换布尔值，当值为true时，触发bindPopup弹出气泡。 15 16```ts 17@Entry 18@Component 19struct PopupExample { 20 @State handlePopup: boolean = false 21 22 build() { 23 Column() { 24 Button('PopupOptions') 25 .onClick(() => { 26 this.handlePopup = !this.handlePopup 27 }) 28 .bindPopup(this.handlePopup, { 29 message: 'This is a popup with PopupOptions', 30 }) 31 }.width('100%').padding({ top: 5 }) 32 } 33} 34``` 35 36 37 38 39## 添加气泡状态变化的事件 40 41通过onStateChange参数为气泡添加状态变化的事件回调，可以判断当前气泡的显示状态。 42 43```ts 44@Entry 45@Component 46struct PopupExample { 47 @State handlePopup: boolean = false 48 49 build() { 50 Column() { 51 Button('PopupOptions') 52 .onClick(() => { 53 this.handlePopup = !this.handlePopup 54 }) 55 .bindPopup(this.handlePopup, { 56 message: 'This is a popup with PopupOptions', 57 onStateChange: (e)=> { // 返回当前的气泡状态 58 if (!e.isVisible) { 59 this.handlePopup = false 60 } 61 } 62 }) 63 }.width('100%').padding({ top: 5 }) 64 } 65} 66``` 67 68 69 70## 带按钮的提示气泡 71 72通过primaryButton、secondaryButton属性为气泡最多设置两个Button按钮，通过此按钮进行简单的交互，开发者可以通过配置action参数来设置想要触发的操作。 73 74```ts 75@Entry 76@Component 77struct PopupExample22 { 78 @State handlePopup: boolean = false 79 80 build() { 81 Column() { 82 Button('PopupOptions').margin({ top: 200 }) 83 .onClick(() => { 84 this.handlePopup = !this.handlePopup 85 }) 86 .bindPopup(this.handlePopup, { 87 message: 'This is a popup with PopupOptions', 88 primaryButton: { 89 value: 'Confirm', 90 action: () => { 91 this.handlePopup = !this.handlePopup 92 console.info('confirm Button click') 93 } 94 }, 95 secondaryButton: { 96 value: 'Cancel', 97 action: () => { 98 this.handlePopup = !this.handlePopup 99 } 100 }, 101 onStateChange: (e) => { 102 if (!e.isVisible) { 103 this.handlePopup = false 104 } 105 } 106 }) 107 }.width('100%').padding({ top: 5 }) 108 } 109} 110``` 111 112 113 114 115 116## 自定义气泡 117 118开发者可以使用构建器CustomPopupOptions创建自定义气泡，\@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式。 119 120```ts 121@Entry 122@Component 123struct Index { 124 @State customPopup: boolean = false 125 // popup构造器定义弹框内容 126 @Builder popupBuilder() { 127 Row({ space: 2 }) { 128 Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 }) 129 Text('This is Custom Popup').fontSize(15) 130 }.width(200).height(50).padding(5) 131 } 132 build() { 133 Column() { 134 Button('CustomPopupOptions') 135 .position({x:100,y:200}) 136 .onClick(() => { 137 this.customPopup = !this.customPopup 138 }) 139 .bindPopup(this.customPopup, { 140 builder: this.popupBuilder, // 气泡的内容 141 placement:Placement.Bottom, // 气泡的弹出位置 142 popupColor:Color.Pink, // 气泡的背景色 143 onStateChange: (e) => { 144 console.info(JSON.stringify(e.isVisible)) 145 if (!e.isVisible) { 146 this.customPopup = false 147 } 148 } 149 }) 150 } 151 .height('100%') 152 } 153} 154``` 155 156 157使用者通过配置placement参数将弹出的气泡放到需要提示的位置。弹窗构造器会触发弹出提示信息，来引导使用者完成操作，也让使用者有更好的UI体验。 158 159 160 161 162
