1# @ohos.arkui.advanced.Popup (气泡组件) 2 3Popup是用于显示特定样式气泡。 4 5> **说明：** 6> 7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11``` 12import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@ohos.arkui.advanced.Popup'; 13``` 14 15## 子组件 16 17无 18 19## Popup 20 21Popup(options: PopupOptions) 22 23**装饰器类型：**@Builder 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数**： 28 29| 名称 | 类型 | 必填 | 说明 | 30| ------- | ----------------------------- | ---- | --------------------- | 31| options | [PopupOptions](#popupoptions) | 是 | 定义Popup组件的类型。 | 32 33## PopupOptions 34 35PopupOptions定义Popup的具体式样参数。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| ----------- | ---------- | ------| --------------------------------- | 41| icon | [PopupIconOptions](#popupiconoptions) | 否 | 设置popup图标。<br />**说明：**<br />当size设置异常值或0时不显示。 | 42| title | [PopupTextOptions](#popuptextoptions) | 否 | 设置popup标题文本。 | 43| message | [PopupTextOptions](#popuptextoptions) | 是 | 设置popup内容文本。<br />**说明：**<br />message不支持设置fontWeight。 | 44| showClose | boolean \| [Resource](ts-types.md#resource) | 否 | 设置popup关闭按钮。<br />默认值：true | 45| onClose | () => void | 否 | 设置popup关闭按钮回调函数。| 46| buttons | [[PopupButtonOptions](#popupbuttonoptions)?,[PopupButtonOptions](#popupbuttonoptions)?] | 否 | 设置popup操作按钮,按钮最多设置两个。 | 47 48## PopupTextOptions 49 50PopupTextOptions设置文本样式。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54| 名称 | 类型 | 必填 | 描述 | 55| ---------- | ------------------------------------------------------------ | ---- | ------------------ | 56| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置文本内容。 | 57| fontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置文本字体大小。<br />默认值：`$r('sys.float.ohos_id_text_size_body2')` | 58| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_secondary')` | 59| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置文本字体粗细。<br />默认值：FontWeight.Regular | 60 61## PopupButtonOptions 62 63PopupButtonOptions定义按钮的相关属性和事件。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67| 名称 | 类型 | 必填 | 描述 | 68| --------- | ---------------------------------------------------- | ---- | ---------------------- | 69| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置按钮内容。 | 70| action | () => void | 否 | 设置按钮click回调。 | 71| fontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置按钮文本字体大小。 <br />默认值：`$r('sys.float.ohos_id_text_size_button2')` | 72| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置按钮文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_primary_activated')` | 73 74## PopupIconOptions 75 76PopupIconOptions定义icon（右上角图标）的属性。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80| 名称 | 类型 | 必填 | 描述 | 81| ------------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 82| image | [ResourceStr](ts-types.md#resourcestr) | 是 | 设置图标内容。 | 83| width | [Dimension](ts-types.md#dimension10) | 否 | 设置图标宽度。<br />默认值：32VP | 84| height | [Dimension](ts-types.md#dimension10) | 否 | 设置图标高度。<br />默认值：32VP | 85| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置图标填充颜色。 | 86| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 否 | 设置图标圆角。<br />默认值：`$r('sys.float.ohos_id_corner_radius_default_s')` | 87 88## 示例 89 90```ts 91// xxx.ets 92import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@ohos.arkui.advanced.Popup'; 93 94@Entry 95@Component 96struct PopupExample { 97 98 build() { 99 Row() { 100 // popup 自定义高级组件 101 Popup({ 102 //PopupIconOptions 类型设置图标内容 103 icon: { 104 image: $r('app.media.icon'), 105 width:32, 106 height:32, 107 fillColor:Color.White, 108 borderRadius: 16, 109 } as PopupIconOptions, 110 // PopupTextOptions 类型设置文字内容 111 title: { 112 text: 'This is a popup with PopupOptions', 113 fontSize: 20, 114 fontColor: Color.Black, 115 fontWeight: FontWeight.Normal, 116 117 } as PopupTextOptions, 118 //PopupTextOptions 类型设置文字内容 119 message: { 120 text: 'This is the message', 121 fontSize: 15, 122 fontColor: Color.Black, 123 } as PopupTextOptions, 124 showClose: false, 125 onClose: () => { 126 console.info('close Button click') 127 }, 128 // PopupButtonOptions 类型设置按钮内容 129 buttons: [{ 130 text: 'confirm', 131 action: () => { 132 console.info('confirm button click') 133 }, 134 fontSize: 15, 135 fontColor: Color.Black, 136 137 }, 138 { 139 text: 'cancel', 140 action: () => { 141 console.info('cancel button click') 142 }, 143 fontSize: 15, 144 fontColor: Color.Black, 145 },] as [PopupButtonOptions?, PopupButtonOptions?], 146 }) 147 } 148 .width(300) 149 .height(200) 150 .borderWidth(2) 151 .justifyContent(FlexAlign.Center) 152 } 153} 154``` 155 156
