1# Popup 2 3Popup是用于显示特定样式气泡。 4 5> **说明：** 6> 7> - 该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8>- 该组件不支持在Wearable设备上使用。 9> - 建议开发者结合[Popup控制](ts-universal-attributes-popup.md)中提供的自定义气泡功能一起使用。 10 11## 导入模块 12 13``` 14import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'; 15``` 16 17## 子组件 18 19无 20 21## Popup 22 23Popup(options: PopupOptions): void 24 25**装饰器类型：**@Builder 26 27**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数**： 32 33| 参数名 | 类型 | 必填 | 说明 | 34| ------- | ----------------------------- | ---- | --------------------- | 35| options | [PopupOptions](#popupoptions) | 是 | 定义Popup组件的类型。 | 36 37## PopupOptions 38 39PopupOptions定义Popup的具体式样参数。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43| 名称 | 类型 | 必填 | 说明 | 44| ----------- | ---------- | ------| --------------------------------- | 45| icon | [PopupIconOptions](#popupiconoptions) | 否 | 设置popup图标。<br />**说明：**<br />当size设置异常值或0时不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 46| title | [PopupTextOptions](#popuptextoptions) | 否 | 设置popup标题文本。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 47| message | [PopupTextOptions](#popuptextoptions) | 是 | 设置popup内容文本。<br />**说明：**<br />message不支持设置fontWeight。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 48| showClose | boolean \| [Resource](ts-types.md#resource) | 否 | 设置popup关闭按钮。<br />默认值：true<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 49| onClose | () => void | 否 | 设置popup关闭按钮回调函数。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 50| buttons | [[PopupButtonOptions](#popupbuttonoptions)?,[PopupButtonOptions](#popupbuttonoptions)?] | 否 | 设置popup操作按钮,按钮最多设置两个。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 51| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 52| maxWidth<sup>18+</sup> | [Dimension](ts-types.md#dimension10) | 否 | 设置popup的最大宽度，通过此接口popup可以自定义宽度显示。<br/>默认值：400vp<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 53 54## PopupTextOptions 55 56PopupTextOptions设置文本样式。 57 58**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 59 60**系统能力：** SystemCapability.ArkUI.ArkUI.Full 61 62| 名称 | 类型 | 必填 | 说明 | 63| ---------- | ------------------------------------------------------------ | ---- | ------------------ | 64| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置文本内容。 | 65| fontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置文本字体大小。<br />默认值：`$r('sys.float.ohos_id_text_size_body2')` <br/>string类型可选值：可以转化为数字的字符串（如'10'）或带长度单位的字符串（如'10px'），不支持设置百分比字符串。<br/>number：取值范围(0,+∞)。 | 66| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_secondary')` | 67| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置文本字体粗细。<br/>number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。<br />默认值：FontWeight.Regular | 68 69## PopupButtonOptions 70 71PopupButtonOptions定义按钮的相关属性和事件。 72 73**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77| 名称 | 类型 | 必填 | 说明 | 78| --------- | ---------------------------------------------------- | ---- | ---------------------- | 79| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置按钮内容。 | 80| action | () => void | 否 | 设置按钮click回调。 | 81| fontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置按钮文本字体大小。 <br />默认值：`$r('sys.float.ohos_id_text_size_button2')` | 82| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置按钮文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_primary_activated')` | 83 84## PopupIconOptions 85 86PopupIconOptions定义icon（左上角图标）的属性。 87 88**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 类型 | 必填 | 说明 | 93| ------------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 94| image | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置图标内容。 | 95| width | [Dimension](ts-types.md#dimension10) | 否 | 设置图标宽度。<br />默认值：32VP | 96| height | [Dimension](ts-types.md#dimension10) | 否 | 设置图标高度。<br />默认值：32VP | 97| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置图标填充颜色。 <br />**说明：**<br />仅针对svg图源生效。| 98| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 否 | 设置图标圆角。<br />默认值：`$r('sys.float.ohos_id_corner_radius_default_s')` | 99 100## 示例 101 102### 示例1（设置气泡样式） 103 104该示例通过配置PopupIconOptions、PopupTextOptions、PopupButtonOptions实现气泡的样式。 105 106```ts 107// xxx.ets 108import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'; 109 110@Entry 111@Component 112struct PopupExample { 113 114 build() { 115 Row() { 116 // popup 自定义高级组件 117 Popup({ 118 // PopupIconOptions类型设置图标内容 119 icon: { 120 image: $r('app.media.icon'), 121 width:32, 122 height:32, 123 fillColor:Color.White, 124 borderRadius: 16 125 } as PopupIconOptions, 126 // PopupTextOptions类型设置文字内容 127 title: { 128 text: 'This is a popup with PopupOptions', 129 fontSize: 20, 130 fontColor: Color.Black, 131 fontWeight: FontWeight.Normal 132 } as PopupTextOptions, 133 // PopupTextOptions类型设置文字内容 134 message: { 135 text: 'This is the message', 136 fontSize: 15, 137 fontColor: Color.Black 138 } as PopupTextOptions, 139 showClose: false, 140 onClose: () => { 141 console.info('close Button click') 142 }, 143 // PopupButtonOptions类型设置按钮内容 144 buttons: [{ 145 text: 'confirm', 146 action: () => { 147 console.info('confirm button click') 148 }, 149 fontSize: 15, 150 fontColor: Color.Black, 151 }, 152 { 153 text: 'cancel', 154 action: () => { 155 console.info('cancel button click') 156 }, 157 fontSize: 15, 158 fontColor: Color.Black 159 },] as [PopupButtonOptions?, PopupButtonOptions?] 160 }) 161 } 162 .width(300) 163 .height(200) 164 .borderWidth(2) 165 .justifyContent(FlexAlign.Center) 166 } 167} 168``` 169 170 171 172### 示例 2（设置镜像效果） 173该示例通过配置direction实现Popup的镜像效果。 174 175```ts 176// xxx.ets 177import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI' 178 179@Entry 180@Component 181struct PopupPage { 182 @State currentDirection: Direction = Direction.Rtl 183 184 build() { 185 Column() { 186 // popup 自定义高级组件 187 Popup({ 188 //PopupIconOptions 类型设置图标内容 189 direction: this.currentDirection, 190 icon: { 191 image: $r('app.media.icon'), 192 width: 32, 193 height: 32, 194 fillColor: Color.White, 195 borderRadius: 16, 196 } as PopupIconOptions, 197 // PopupTextOptions 类型设置文字内容 198 title: { 199 text: 'This is a popup with PopupOptions', 200 fontSize: 20, 201 fontColor: Color.Black, 202 fontWeight: FontWeight.Normal, 203 204 } as PopupTextOptions, 205 //PopupTextOptions 类型设置文字内容 206 message: { 207 text: 'This is the message', 208 fontSize: 15, 209 fontColor: Color.Black, 210 } as PopupTextOptions, 211 showClose: true, 212 onClose: () => { 213 console.info('close Button click') 214 }, 215 // PopupButtonOptions 类型设置按钮内容 216 buttons: [{ 217 text: 'confirm', 218 action: () => { 219 console.info('confirm button click') 220 }, 221 fontSize: 15, 222 fontColor: Color.Black, 223 224 }, 225 { 226 text: 'cancel', 227 action: () => { 228 console.info('cancel button click') 229 }, 230 fontSize: 15, 231 fontColor: Color.Black, 232 },] as [PopupButtonOptions?, PopupButtonOptions?], 233 }) 234 235 } 236 .justifyContent(FlexAlign.Center) 237 .width('100%') 238 .height('100%') 239 } 240} 241``` 242 243 244 245### 示例3（设置自定义宽度） 246该示例通过配置maxWidth实现Popup的自定义宽度效果。 247 248```ts 249// xxx.ets 250import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI' 251 252@Entry 253@Component 254struct PopupPage { 255 @State currentDirection: Direction = Direction.Rtl 256 257 build() { 258 Row() { 259 // popup 自定义高级组件 260 Popup({ 261 //设置自定义宽度 262 maxWidth:'50%', 263 //PopupIconOptions 类型设置图标内容 264 icon: { 265 image: $r('app.media.startIcon'), 266 width: 32, 267 height: 32, 268 fillColor: Color.White, 269 borderRadius: 16, 270 } as PopupIconOptions, 271 // PopupTextOptions类型设置文字内容 272 message: { 273 text: 'This is the message,This is the message,This is the message,This is the message', 274 fontSize: 15, 275 fontColor: Color.Black 276 } as PopupTextOptions, 277 showClose: false, 278 onClose: () => { 279 console.info('close Button click') 280 }, 281 // PopupButtonOptions类型设置按钮内容 282 buttons: [{ 283 text: 'confirm', 284 action: () => { 285 console.info('confirm button click') 286 }, 287 fontSize: 15, 288 fontColor: Color.Black, 289 }, 290 { 291 text: 'cancel', 292 action: () => { 293 console.info('cancel button click') 294 }, 295 fontSize: 15, 296 fontColor: Color.Black 297 },] as [PopupButtonOptions?, PopupButtonOptions?] 298 }) 299 } 300 .width(400) 301 .height(200) 302 .borderWidth(2) 303 .justifyContent(FlexAlign.Center) 304 } 305} 306``` 307 308
