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