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