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