1. 弹窗
1.1 Toast - 消息提示
- 常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。
import promptAction from '@ohos.promptAction'promptAction.showToast(options: {message: string | Resource, duration: number, bottom: string | number}): void
1.2 AlertDialog - 警告对话框
- 用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。
- 可使用全局方法
AlertDialog.show()显示警告对话框
1.3 ActionSheet - 列表选择弹窗
- 用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。
- 可使用全局方法
ActionSheet.show()显示操作列表弹窗。
1.4 选择器弹窗
- 用于让用户从一个列表中选择一个具体的值。
1.4.1 DatePickerDialog.show - 日期滑动选择器弹窗
- 可使用全局方法
DatePickerDialog.show()定义日期滑动选择器弹窗并弹出。
1.4.2 TimePickerDialog.show - 时间滑动选择器弹窗
- 可使用全局方法
TimePickerDialog.show()定义时间滑动选择器弹窗并弹出。
1.4.3 TextPickerDialog.show - 文本滑动选择器弹窗
- 可使用全局方法
TextPickerDialog.show()定义文本滑动选择器弹窗并弹出。
1.5 自定义弹窗
- 当现有组件不满足要求时，可考虑自定义弹窗。自定义弹窗允许开发者自定义弹窗内容和样式。
1.5.1 @CustomDialog 装饰器
- @CustomDialog 装饰器用于装饰自定义弹窗。此装饰器内进行自定义内容（也就是弹窗内容）
- 定义 @CustomDialog 装饰的自定义弹窗组件必须包含
CustomDialogController类型的属性。- 使用 被@CustomDialog 装饰的自定义弹窗组件也需要定义一个
CustomDialogController，为了通过它 设置弹窗样式、接收弹窗参数以及方法、.open() 启动弹窗等。- 自定义弹窗代码模块敲
dialog回车自动生成。- onAccept(value) => void：点击弹窗中的“确定”按钮时触发该回调。
- onCancel() => void：点击弹窗中的“取消”按钮时触发该回调。
- exitApp() => void：点击遮罩层时触发该回调。
1.5.2 代码案例如下
// 自定义弹窗组件内容
@CustomDialog
export struct TextInputDialog {@State textInputValue: string = ''controller: CustomDialogController = new CustomDialogController({builder: TextInputDialog()})confirm!: (value: string) => voidbuild() {Column({ space: 25 }) {Text('请输入你的答案').fontSize(16)TextInput({ placeholder: '请输入纯数字' }).type(InputType.Number).onChange((value) => {this.textInputValue = value})Row({ space: 35 }) {Button('取消').width(100).height(35).onClick(() => {this.controller.close()})Button('确认').width(100).height(35).onClick(() => {this.confirm(this.textInputValue)this.controller.close()})}}.backgroundColor(Color.White).padding(20)}
}// 引用自定义弹窗组件
import { TextInputDialog } from "./TextInputDialog"@Entry
@Component
struct Index {@State answer: string = "?"controller: CustomDialogController = new CustomDialogController({builder: TextInputDialog({confirm: (value) => {this.answer = value}}),autoCancel: false,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -10 },customStyle: false,gridCount: 4})build() {Column({ space: 20 }) {Row() {Text('1 + 1 = ').id('HelloWorld').fontSize(24).fontWeight(FontWeight.Bold)Text(this.answer).fontSize(24).fontWeight(FontWeight.Bold)}Button('作答', { type: ButtonType.Capsule }).width(80).height(35).onClick(() => {this.controller.open()})}.height('100%').width('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}
)
