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 17 18```ts 19@Entry 20@Component 21struct PopupExample { 22 @State handlePopup: boolean = false 23 24 build() { 25 Column() { 26 Button('PopupOptions') 27 .onClick(() => { 28 this.handlePopup = !this.handlePopup 29 }) 30 .bindPopup(this.handlePopup, { 31 message: 'This is a popup with PopupOptions', 32 }) 33 }.width('100%').padding({ top: 5 }) 34 } 35} 36``` 37 38 39 40 41 42## 带按钮的提示气泡 43 44通过primaryButton、secondaryButton属性为气泡最多设置两个Button按钮，通过此按钮进行简单的交互；开发者可以通过配置action参数来设置想要触发的操作。 45 46 47 48```ts 49@Entry 50@Component 51struct PopupExample22 { 52 @State handlePopup: boolean = false 53 build() { 54 Column() { 55 Button('PopupOptions').margin({top:200}) 56 .onClick(() => { 57 this.handlePopup = !this.handlePopup 58 }) 59 .bindPopup(this.handlePopup, { 60 message: 'This is a popup with PopupOptions', 61 primaryButton:{ 62 value:'Confirm', 63 action: () => { 64 this.handlePopup = !this.handlePopup 65 console.info('confirm Button click') 66 } 67 }, 68 secondaryButton: { 69 value: 'Cancel', 70 action: () => { 71 this.handlePopup = !this.handlePopup 72 } 73 }, 74 }) 75 }.width('100%').padding({ top: 5 }) 76 } 77} 78``` 79 80 81 82 83 84## 自定义气泡 85 86开发者可以使用构建器CustomPopupOptions创建自定义气泡，\@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式。 87 88 89 90```ts 91@Entry 92@Component 93struct Index { 94 @State customPopup: boolean = false 95 // popup构造器定义弹框内容 96 @Builder popupBuilder() { 97 Row({ space: 2 }) { 98 Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 }) 99 Text('This is Custom Popup').fontSize(15) 100 }.width(200).height(50).padding(5) 101 } 102 build() { 103 Column() { 104 Button('CustomPopupOptions') 105 .position({x:100,y:200}) 106 .onClick(() => { 107 this.customPopup = !this.customPopup 108 }) 109 .bindPopup(this.customPopup, { 110 builder: this.popupBuilder, // 气泡的内容 111 placement:Placement.Bottom, // 气泡的弹出位置 112 popupColor:Color.Pink // 气泡的背景色 113 }) 114 } 115 .height('100%') 116 } 117} 118``` 119 120 121使用者通过配置placement参数将弹出的气泡放到需要提示的位置。弹窗构造器会触发弹出提示信息，来引导使用者完成操作，也让使用者有更好的UI体验。 122 123 124 125 126 127 128```ts 129@Entry 130@Component 131struct Index { 132 @State customPopup: boolean = false 133 // popup构造器定义弹框内容 134 @Builder popupBuilder() { 135 Row({ space: 2 }) { 136 Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain) 137 Column(){ 138 Text('控制人生').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%') 139 Text('想要跟唱时，数千万歌曲任你选择，人声随心调整。').fontSize(12).fontColor('#ffeeeeee').width('100%') 140 } 141 }.width(230).height(80).padding(5) 142 } 143 build() { 144 Row() { 145 Text('我要K歌') 146 Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain) 147 .onClick(() => { 148 this.customPopup = !this.customPopup 149 }) 150 .bindPopup(this.customPopup, { 151 builder: this.popupBuilder, 152 }) 153 } 154 .margin(20) 155 .height('100%') 156 } 157} 158``` 159
