1# ExceptionPrompt 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fengluochenai--> 5<!--Designer: @YanSanzo--> 6<!--Tester: @tinygreyy--> 7<!--Adviser: @HelloCrease--> 8 9 10异常提示，适用于有异常需要提示异常内容的情况。 11 12 13> **说明：** 14> 15> 该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 16> 17 18 19## 导入模块 20 21```ts 22import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'; 23``` 24 25 26## 子组件 27 28无 29 30## 属性 31 32不支持[通用属性](ts-component-general-attributes.md)。 33 34## ExceptionPrompt 35 36ExceptionPrompt({ options: PromptOptions, onTipClick?: ()=>void, onActionTextClick?: ()=>void }) 37 38**装饰器类型：**\@Component 39 40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 45 46**参数：** 47 48 49| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 50| -------- | -------- | -------- | -------- | -------- | 51| options | [PromptOptions](#promptoptions) | 是 | \@Prop | 指定当前异常提示的配置信息。 | 52| onTipClick | ()=>void | 否 | - | 点击左侧提示文本的回调函数。 | 53| onActionTextClick | ()=>void | 否 | - | 点击右侧图标按钮的回调函数。 | 54 55## PromptOptions 56 57PromptOptions定义options的类型。 58 59**系统能力：** SystemCapability.ArkUI.ArkUI.Full 60 61**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 62 63| 名称 | 类型 | 必填 | 说明 | 64| -------- |----------------------------------------------------------------------------------| -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 65| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 指定当前异常提示的异常图标样式。<br/>默认不设置或设置为undefined，异常图标不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 66| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md#symbolglyphmodifier) | 否 | 指定当前异常提示的异常Symbol图标样式，优先级大于icon。<br/>默认不设置或设置为undefined，Symbol图标不显示。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 67| tip | [ResourceStr](ts-types.md#resourcestr) | 否 | 指定当前异常提示的文字提示内容。<br />支持默认内置四种状态文字资源如下：<br />1.无网络状态：显示网络未连接：引用ohos_network_not_connected。<br />2.网络差状态：显示网络连接不稳定，请点击重试：引用ohos_network_connected_unstable。<br />3.连不上服务器状态：显示无法连接到服务器，请点击重试：引用ohos_unstable_connect_server。<br />4.有网但是获取不到内容状态：显示无法获取位置，请点击重试：引用ohos_custom_network_tips_left。<br/>默认不设置或设置为undefined，文字提示内容不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 68| marginType | [MarginType](#margintype) | 是 | 指定当前异常提示的边距样式。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 69| actionText | [ResourceStr](ts-types.md#resourcestr) | 否 | 指定当前异常提示的右侧图标按钮的文字内容。 <br/>默认不设置或设置为undefined，文字内容不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 70| marginTop | [Dimension](ts-types.md#dimension10) | 是 | 指定当前异常提示的距离顶部的位置。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 71| isShown | boolean | 否 | 指定当前异常提示的显隐状态。<br />true：显示状态。<br />false：隐藏状态。<br/>默认值：false<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 72 73## MarginType 74 75MarginType定义marginType的类型。 76 77**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 82 83| 名称 | 值 | 说明 | 84| -------- | -------- | -------- | 85| DEFAULT_MARGIN | 0 | 默认边距：<br />边距1：引用ohos_id_card_margin_start。<br />边距2：引用ohos_id_card_margin_end。 | 86| FIT_MARGIN | 1 | 可适配边距：<br /> 边距1：引用ohos_id_max_padding_start。<br /> 边距2：引用ohos_id_max_padding_end。 | 87 88## 事件 89不支持[通用事件](ts-component-general-events.md)。 90 91## 示例 92### 示例1（设置异常提示） 93 94该示例展示了如何设置异常提示的异常图标、异常提示的文字、边距样式和右侧图标按钮的文字内容。 95 96```ts 97import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'; 98 99@Entry 100@Component 101struct Index { 102 @State options: PromptOptions = { 103 icon: $r('sys.media.ohos_ic_public_fail'), 104 tip: '异常提示', 105 marginType: MarginType.DEFAULT_MARGIN, 106 actionText: '设置网络', 107 marginTop: 80, 108 isShown: true, 109 } 110 111 build() { 112 Column() { 113 ExceptionPrompt({ 114 options: this.options, 115 onTipClick: () => { 116 // 单击左侧的文本切换到连接状态 117 }, 118 onActionTextClick: () => { 119 // 点击“设置网络”按钮，打开设置网络弹窗界面 120 }, 121 }) 122 } 123 } 124} 125``` 126 127 128 129### 示例2（设置弹窗类型的异常提示） 130 131该示例使用自定义弹窗设置弹窗类型的异常提示。 132 133```ts 134import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'; 135 136@CustomDialog 137struct CustomDialogExample { 138 @Link textValue: string; 139 @Link inputValue: string; 140 @State options: PromptOptions = { 141 icon: $r('sys.media.ohos_ic_public_fail'), 142 tip: '异常提示！', 143 marginType: MarginType.DEFAULT_MARGIN, 144 actionText: '设置', 145 marginTop: 5, 146 isShown: true, 147 }; 148 cancel: () => void = () => { 149 }; 150 confirm: () => void = () => { 151 }; 152 controller?: CustomDialogController; 153 154 // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog， 155 // 那么此处需要将指向自己的controller放在最后 156 build() { 157 Column() { 158 ExceptionPrompt({ 159 options: this.options, 160 }) 161 TextInput({ placeholder: '', text: this.textValue }).margin({ top: 70 }).height(60).width('90%') 162 .onChange((value: string) => { 163 this.textValue = value; 164 }) 165 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 166 Flex({ justifyContent: FlexAlign.SpaceAround }) { 167 Button('cancel') 168 .onClick(() => { 169 this.controller?.close(); 170 this.cancel(); 171 }).backgroundColor(0xffffff).fontColor(Color.Black) 172 Button('confirm') 173 .onClick(() => { 174 this.inputValue = this.textValue; 175 this.controller?.close(); 176 this.confirm(); 177 }).backgroundColor(0xffffff).fontColor(Color.Red) 178 }.margin({ bottom: 10 }) 179 } 180 } 181} 182 183@Entry 184@Component 185struct Index1 { 186 @State ButtonText: string = ''; 187 @State MAP_HEIGHT: string = '30%'; 188 @State duration: number = 2500; 189 @State tips: string = ''; 190 @State actionText: string = ''; 191 controller: TextInputController = new TextInputController(); 192 cancel: () => void = () => { 193 }; 194 confirm: () => void = () => { 195 }; 196 @State options: PromptOptions = { 197 icon: $r('sys.media.ohos_ic_public_fail'), 198 tip: '', 199 marginType: MarginType.DEFAULT_MARGIN, 200 actionText: '', 201 marginTop: 80, 202 isShown: true, 203 } 204 @State textValue: string = ''; 205 @State inputValue: string = 'click me'; 206 dialogController: CustomDialogController | undefined = new CustomDialogController({ 207 builder: CustomDialogExample({ 208 cancel: this.onCancel, 209 confirm: this.onAccept, 210 textValue: $textValue, 211 inputValue: $inputValue, 212 }), 213 cancel: this.existApp, 214 autoCancel: true, 215 alignment: DialogAlignment.Bottom, 216 offset: { dx: 0, dy: -20 }, 217 gridCount: 4, 218 customStyle: false, 219 }) 220 221 aboutToDisappear() { 222 this.dialogController = undefined; // 将dialogController置空 223 } 224 225 onCancel() { 226 console.info('Callback when the first button is clicked'); 227 } 228 229 onAccept() { 230 console.info('Callback when the second button is clicked'); 231 } 232 233 existApp() { 234 console.info('Click the callback in the blank area'); 235 } 236 237 build() { 238 Column() { 239 Button('Click Me') 240 .width('30%') 241 .margin({ top: 420 }) 242 .zIndex(999) 243 .onClick(() => { 244 if (this.dialogController != undefined) { 245 this.dialogController.open(); 246 } 247 }) 248 } 249 .height('100%') 250 .width('100%') 251 } 252} 253``` 254 255 256 257### 示例3（设置Symbol类型图标） 258 259从API version 18开始，该示例通过设置PromptOptions的属性symbolStyle，展示了自定义Symbol类型图标。 260 261```ts 262import { ExceptionPrompt, MarginType, SymbolGlyphModifier } from '@kit.ArkUI'; 263 264@Entry 265@Component 266struct Index { 267 build() { 268 Column() { 269 ExceptionPrompt({ 270 options: { 271 icon: $r('sys.symbol.house'), 272 tip: '异常提示', 273 marginType: MarginType.DEFAULT_MARGIN, 274 actionText: '设置网络', 275 marginTop: 80, 276 isShown: true, 277 }, 278 }) 279 ExceptionPrompt({ 280 options: { 281 icon: $r('sys.symbol.house'), 282 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]), 283 tip: '异常提示', 284 marginType: MarginType.DEFAULT_MARGIN, 285 actionText: '设置网络', 286 marginTop: 200, 287 isShown: true, 288 }, 289 }) 290 } 291 } 292} 293``` 294 295
