1# 固定样式弹出框 2 3固定样式弹出框采用固定的布局格式，这使得开发者无需关心具体的显示布局细节，只需输入所需显示的文本内容，从而简化了使用流程，提升了便捷性。 4 5## 使用约束 6 7- 弹出框的弹出依赖UI的执行上下文，不可在UI上下文不明确的地方使用，具体约束参见[UIContext](../reference/apis-arkui/js-apis-arkui-UIContext.md#uicontext)说明。 8 9- 可以通过调用UIContext或getUIContext，在非UI页面或某些异步回调中使用本文中的接口。CalendarPickerDialog当前不支持此操作。 10 11- 操作菜单 (showActionMenu)、对话框 (showDialog)需先使用UIContext中的[getPromptAction()](../reference/apis-arkui/js-apis-arkui-UIContext.md#getpromptaction)方法获取到PromptAction对象，再通过该对象调用对应方法。 12 13- 列表选择弹出框 (ActionSheet)、警告弹出框 (AlertDialog)、选择器弹出框 (PickerDialog)中除CalendarPickerDialog都需先使用ohos.window中的[getUIContext()](../reference/apis-arkui/js-apis-window.md#getuicontext10)方法获取UIContext实例，再通过此实例调用对应方法。或者可以通过自定义组件内置方法[getUIContext()](../reference/apis-arkui/arkui-ts/ts-custom-component-api.md#getuicontext)获取。 14 15操作菜单 (showActionMenu)、对话框 (showDialog)、列表选择弹出框 (ActionSheet)、警告弹出框 (AlertDialog)可以设置isModal为false变成非模态弹窗。 16 17## 操作菜单 (showActionMenu) 18 19操作菜单通过UIContext中的getPromptAction方法获取到PromptAction对象，再通过该对象调用[showActionMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#showactionmenu11)接口实现，支持在回调或开发者自定义类中使用。 20 21创建并显示操作菜单后，菜单的响应结果会异步返回选中按钮在buttons数组中的索引。 22 23```ts 24import { PromptAction } from '@kit.ArkUI'; 25 26let uiContext = this.getUIContext(); 27let promptAction: PromptAction = uiContext.getPromptAction(); 28try { 29 promptAction.showActionMenu({ 30 title: 'showActionMenu Title Info', 31 buttons: [ 32 { 33 text: 'item1', 34 color: '#666666' 35 }, 36 { 37 text: 'item2', 38 color: '#000000' 39 }, 40 ] 41 }) 42 .then(data => { 43 console.info('showActionMenu success, click button: ' + data.index); 44 }) 45 .catch((err: Error) => { 46 console.error('showActionMenu error: ' + err); 47 }) 48} catch (error) { 49} 50``` 51 52 53 54## 对话框 (showDialog) 55 56对话框通过UIContext中的getPromptAction方法获取到PromptAction对象，再通过该对象调用[showDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#showdialog)接口实现，支持在回调或开发者自定义类中使用。 57 58创建并显示对话框，对话框响应后异步返回选中按钮在buttons数组中的索引。 59 60```ts 61// xxx.ets 62import { PromptAction } from '@kit.ArkUI'; 63 64let uiContext = this.getUIContext(); 65let promptAction: PromptAction = uiContext.getPromptAction(); 66try { 67 promptAction.showDialog({ 68 title: 'showDialog Title Info', 69 message: 'Message Info', 70 buttons: [ 71 { 72 text: 'button1', 73 color: '#000000' 74 }, 75 { 76 text: 'button2', 77 color: '#000000' 78 } 79 ] 80 }, (err, data) => { 81 if (err) { 82 console.error('showDialog err: ' + err); 83 return; 84 } 85 console.info('showDialog success callback, click button: ' + data.index); 86 }); 87} catch (error) { 88} 89``` 90 91 92 93## 选择器弹窗 (PickerDialog) 94 95选择器弹窗通常用于在用户进行某些操作（如点击按钮）时显示特定的信息或选项。 96 97### 生命周期 98 99弹窗提供了生命周期函数用于通知用户该弹窗的生命周期。 100生命周期的触发顺序可看各组件API参考。 101 102| 名称 |类型| 说明 | 103| ----------------- | ------ | ---------------------------- | 104| onDidAppear | () => void | 弹窗弹出时的事件回调。 | 105| onDidDisappear |() => void | 弹窗消失时的事件回调。 | 106| onWillAppear | () => void | 弹窗显示动效前的事件回调。 | 107| onWillDisappear | () => void | 弹窗退出动效前的事件回调。 | 108 109### 日历选择器弹窗 (CalendarPickerDialog) 110 111日历选择器弹窗提供日历视图，包含年、月和星期信息，通过[CalendarPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-calendarpicker-dialog.md)接口实现。开发者可调用show函数，定义并弹出日历选择器弹窗。 112 113通过配置 acceptButtonStyle、cancelButtonStyle可以实现自定义按钮样式。 114 115```ts 116// xxx.ets 117@Entry 118@Component 119struct CalendarPickerDialogExample { 120 private selectedDate: Date = new Date('2024-04-23') 121 122 build() { 123 Column() { 124 Button("Show CalendarPicker Dialog") 125 .margin(20) 126 .onClick(() => { 127 console.info("CalendarDialog.show") 128 CalendarPickerDialog.show({ 129 selected: this.selectedDate, 130 acceptButtonStyle: { 131 fontColor: '#2787d9', 132 fontSize: '16fp', 133 backgroundColor: '#f7f7f7', 134 borderRadius: 10 135 }, 136 cancelButtonStyle: { 137 fontColor: Color.Red, 138 fontSize: '16fp', 139 backgroundColor: '#f7f7f7', 140 borderRadius: 10 141 }, 142 onAccept: (date: Date)=>{ 143 // 当弹出框再次弹出时显示选中的是上一次确定的日期 144 this.selectedDate = date 145 } 146 }) 147 }) 148 }.width('100%') 149 } 150} 151``` 152 153 154 155### 日期滑动选择器弹窗 (DatePickerDialog) 156 157开发者可以利用指定的日期范围，创建日期滑动选择器弹窗，将日期信息清晰地展示在弹出的窗口上。 158 159日期滑动选择器弹窗通过UIContext中的[showDatePickerDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#showdatepickerdialog)接口实现。 160 161弹窗中配置lunarSwitch、showTime为true时，展示切换农历的开关以及时间，当checkbox被选中时，显示农历。当按下确定按钮时，弹窗会通过onDateAccept返回目前所选中的日期。如需弹窗再次弹出时显示选中的是上一次确定的日期，就要在回调中重新给selectTime进行赋值。 162 163```ts 164@Entry 165@Component 166struct DatePickerDialogExample { 167 @State selectTime: Date = new Date('2023-12-25T08:30:00'); 168 169 build() { 170 Column() { 171 Button('showDatePickerDialog') 172 .margin(30) 173 .onClick(() => { 174 this.getUIContext().showDatePickerDialog({ 175 start: new Date("2000-1-1"), 176 end: new Date("2100-12-31"), 177 selected: this.selectTime, 178 lunarSwitch: true, 179 showTime: true, 180 onDateAccept: (value: Date) => { 181 this.selectTime = value 182 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 183 }, 184 }) 185 }) 186 }.width('100%').margin({ top: 5 }) 187 } 188} 189 190``` 191 192 193 194该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。 195 196```ts 197@Entry 198@Component 199struct DatePickerDialogExample { 200 @State selectTime: Date = new Date('2023-12-25T08:30:00'); 201 202 build() { 203 Column() { 204 Button('showDatePickerDialog') 205 .margin(30) 206 .onClick(() => { 207 this.getUIContext().showDatePickerDialog({ 208 start: new Date("2000-1-1"), 209 end: new Date("2100-12-31"), 210 selected: this.selectTime, 211 textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } }, 212 selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } }, 213 acceptButtonStyle: { 214 fontColor: '#2787d9', 215 fontSize: '16fp', 216 backgroundColor: '#f7f7f7', 217 borderRadius: 10 218 }, 219 cancelButtonStyle: { 220 fontColor: Color.Red, 221 fontSize: '16fp', 222 backgroundColor: '#f7f7f7', 223 borderRadius: 10 224 } 225 }) 226 }) 227 }.width('100%').margin({ top: 5 }) 228 } 229} 230``` 231 232 233 234### 时间滑动选择器弹窗 (TimePickerDialog) 235 236开发者可根据24小时的时间区间，创建时间滑动选择器弹窗，将时间信息清晰地展示在弹出的窗口上。 237 238时间滑动选择器弹窗通过UIContext中的[showTimePickerDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#showtimepickerdialog)接口实现。 239 240该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。 241 242```ts 243// xxx.ets 244 245@Entry 246@Component 247struct TimePickerDialogExample { 248 @State selectTime: Date = new Date('2023-12-25T08:30:00'); 249 250 build() { 251 Column() { 252 Button('showTimePickerDialog') 253 .margin(30) 254 .onClick(() => { 255 this.getUIContext().showTimePickerDialog({ 256 selected: this.selectTime, 257 textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } }, 258 selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } }, 259 acceptButtonStyle: { 260 fontColor: '#2787d9', 261 fontSize: '16fp', 262 backgroundColor: '#f7f7f7', 263 borderRadius: 10 264 }, 265 cancelButtonStyle: { 266 fontColor: Color.Red, 267 fontSize: '16fp', 268 backgroundColor: '#f7f7f7', 269 borderRadius: 10 270 } 271 }) 272 }) 273 }.width('100%').margin({ top: 5 }) 274 } 275} 276 277``` 278 279 280 281### 文本滑动选择器弹窗 (TextPickerDialog) 282 283开发者可根据指定的选择范围，创建文本滑动选择器弹窗，将文本信息清晰地展示在弹出的窗口上。 284 285文本滑动选择器弹窗通过UIContext中的[showTextPickerDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#showtextpickerdialog)接口实现。 286 287该示例通过设置range的参数类型为TextCascadePickerRangeContent[]类型实现3列文本选择器弹窗。当按下确定按钮时，弹窗会通过onAccept返回目前所选中文本和索引值。如需弹窗再次弹出时显示选中的是上一次确定的文本，就要在回调中重新给select进行赋值。 288 289```ts 290@Entry 291@Component 292struct TextPickerDialogExample { 293 private fruits: TextCascadePickerRangeContent[] = [ 294 { 295 text: '辽宁省', 296 children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] }, 297 { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }] 298 }, 299 { 300 text: '吉林省', 301 children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] }, 302 { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }] 303 }, 304 { 305 text: '黑龙江省', 306 children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] }, 307 { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }] 308 } 309 ] 310 private select : number = 0; 311 build() { 312 Column() { 313 Button('showTextPickerDialog') 314 .margin(30) 315 .onClick(() => { 316 this.getUIContext().showTextPickerDialog({ 317 range: this.fruits, 318 selected: this.select, 319 onAccept: (value: TextPickerResult) => { 320 this.select = value.index as number 321 } 322 }) 323 }) 324 }.width('100%').margin({ top: 5 }) 325 } 326} 327``` 328 329 330 331## 列表选择弹窗 (ActionSheet) 332 333列表选择器弹窗适用于呈现多个操作选项，尤其当界面中仅需展示操作列表而无其他内容时。 334 335列表选择器弹窗通过UIContext中的[showActionSheet](../reference/apis-arkui/js-apis-arkui-UIContext.md#showactionsheet)接口实现。 336 337该示例通过配置width、height、transition等接口定义了弹窗的样式以及弹出动效。 338 339```ts 340@Entry 341@Component 342struct showActionSheetExample { 343 build() { 344 Column() { 345 Button('showActionSheet') 346 .margin(30) 347 .onClick(() => { 348 this.getUIContext().showActionSheet({ 349 title: 'ActionSheet title', 350 message: 'message', 351 autoCancel: false, 352 width: 300, 353 height: 300, 354 cornerRadius: 20, 355 borderWidth: 1, 356 borderStyle: BorderStyle.Solid, 357 borderColor: Color.Blue, 358 backgroundColor: Color.White, 359 transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY 360 .animation({ duration: 3000, curve: Curve.Sharp }) 361 .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })), 362 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 363 .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }).animation({ duration: 100, curve: Curve.Smooth }))), 364 confirm: { 365 value: 'Confirm button', 366 action: () => { 367 console.info('Get Alert Dialog handled') 368 } 369 }, 370 alignment: DialogAlignment.Center, 371 sheets: [ 372 { 373 title: 'apples', 374 action: () => { 375 } 376 }, 377 { 378 title: 'bananas', 379 action: () => { 380 } 381 }, 382 { 383 title: 'pears', 384 action: () => { 385 console.log('pears') 386 } 387 } 388 ] 389 }) 390 }) 391 }.width('100%').margin({ top: 5 }) 392 } 393} 394``` 395 396 397 398## 警告弹窗 (AlertDialog) 399 400需要向用户提问或得到用户的许可时，可使用警告弹窗。 401 402* 警告弹窗用来提示重要信息，但会中断当前任务，尽量提供必要的信息和有用的操作。 403* 避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。 404 405警告弹窗通过UIContext中的[showAlertDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#showalertdialog)接口实现。 406 407该示例通过配置width、height、transition等接口定义了多个按钮弹窗的样式以及弹出动效。 408 409```ts 410@Entry 411@Component 412struct showAlertDialogExample { 413 build() { 414 Column() { 415 Button('showAlertDialog') 416 .margin(30) 417 .onClick(() => { 418 this.getUIContext().showAlertDialog( 419 { 420 title: 'title', 421 message: 'text', 422 autoCancel: true, 423 alignment: DialogAlignment.Center, 424 offset: { dx: 0, dy: -20 }, 425 gridCount: 3, 426 transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY 427 .animation({ duration: 3000, curve: Curve.Sharp }) 428 .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })), 429 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 430 .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }) 431 .animation({ duration: 100, curve: Curve.Smooth }))), 432 buttons: [{ 433 value: 'cancel', 434 action: () => { 435 console.info('Callback when the first button is clicked') 436 } 437 }, 438 { 439 enabled: true, 440 defaultFocus: true, 441 style: DialogButtonStyle.HIGHLIGHT, 442 value: 'ok', 443 action: () => { 444 console.info('Callback when the second button is clicked') 445 } 446 }], 447 } 448 ) 449 }) 450 }.width('100%').margin({ top: 5 }) 451 } 452} 453``` 454 455 456 457 458
