未验证 提交 dde4f973 编写于 作者: D duangavin123 提交者: Gitee

update zh-cn/third-party-cases/diverse-dialogues.md.

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 c00a9147
# 弹的使用
# 弹的使用
## 场景说明
应用中经常用到弹窗,比如警告弹窗、日期选择弹窗、文本选择弹窗以及其他自定义弹窗等等。本例将为大家介绍如何使用不同的弹窗。
......@@ -8,11 +8,11 @@
![multi-dialogue](figures/multi-dialogue.gif)
示例中共涉及四类对话框
- 告警弹框:提示信息尚未保存。
- 日期选择弹框:选择出生日期。
- 文本选择弹框:选择性别。
- 自定义弹:填写兴趣爱好。
示例中共涉及四类弹窗
- 警告弹窗:提示信息尚未保存。
- 日期滑动选择器弹窗:选择出生日期。
- 文本滑动选择器弹窗:选择性别。
- 自定义弹:填写兴趣爱好。
## 运行环境
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
......@@ -22,37 +22,38 @@
## 实现思路
本例中涉及的4类弹及实现方案如下:
- 告警弹框:使用AlertDialog实现。
- 日期选择弹框:使用DatePickerDialog实现。
- 文本选择弹框:使用TextPickerDialog实现。
- 自定义弹:使用CustomDialogController实现。
本例中涉及的4类弹及实现方案如下:
- 警告弹窗:使用AlertDialog实现。
- 日期滑动选择器弹窗:使用DatePickerDialog实现。
- 文本滑动选择器弹窗:使用TextPickerDialog实现。
- 自定义弹:使用CustomDialogController实现。
## 开发步骤
由于本例重点讲解对话框的使用,所以开发步骤会着重讲解相关实现,不相关的内容不做介绍,全量代码可参考完整代码章节。
1. 首先,使用AlertDialog实现告警弹框
通过‘message’参数设置告警信息,‘alignment’设置弹框在界面中垂直方向的对齐方式;通过'primaryButton'和'secondaryButton'添加按钮。
1. 首先,使用AlertDialog实现警告弹窗
通过message参数设置告警信息,alignment设置弹窗在界面中垂直方向的对齐方式;通过primaryButton和secondaryButton添加按钮。
具体代码如下:
```ts
alertDialog(context: Context.UIAbilityContext) {
AlertDialog.show({
// 通过message设置告警信息
message: '当前数据未保存,是否确认离开?',
// 通过alignment设置弹在界面垂直方向的对齐方式,此处设置为底部对齐
// 通过alignment设置弹在界面垂直方向的对齐方式,此处设置为底部对齐
alignment: DialogAlignment.Bottom,
// 通过offset设置基于对齐位置的便宜量
offset: {
dx: 0,
dy: -20
},
// 弹中左起第一个按钮
// 弹中左起第一个按钮
primaryButton: {
value: '取消',
action: () => {
console.info('Callback cancel button is clicked');
}
},
// 弹中左起第二个按钮
// 弹中左起第二个按钮
secondaryButton: {
value: '确定',
action: () => {
......@@ -64,9 +65,10 @@
});
}
```
2. 使用DatePickerDialog实现日期选择弹框
通过start和end分别设置日期区间的起始时间和末尾时间;通过lunar设置使用农历还是阳历;使用onAccept监听选择的日期,本例中通过变量selectedDate将选中的日期设置给参数selected,这样弹弹出时的日期就默认为上次选中的日期。
2. 使用DatePickerDialog实现日期滑动选择器弹窗
通过start和end分别设置日期区间的起始时间和末尾时间;通过lunar设置使用农历还是阳历;使用onAccept监听选择的日期,本例中通过变量selectedDate将选中的日期设置给参数selected,这样弹弹出时的日期就默认为上次选中的日期。
具体代码如下:
```ts
datePickerDialog(dateCallback) {
DatePickerDialog.show({
......@@ -89,9 +91,10 @@
});
}
```
3. 使用TextPickerDialog实现文本选择弹框
通过range设置文本选择项,使用onAccept监听选择的文本项,本例中通过变量selectedGender将选中的性别的索引设置给参数selected,这样弹弹出时的性别就默认为上次选中的性别。
3. 使用TextPickerDialog实现文本滑动选择器弹窗
通过range设置文本选择项,使用onAccept监听选择的文本项,本例中通过变量selectedGender将选中的性别的索引设置给参数selected,这样弹弹出时的性别就默认为上次选中的性别。
具体代码如下:
```ts
textPickerDialog(sexArray: Resource, sexCallback) {
// 判断文本项的列表是否为空
......@@ -116,11 +119,11 @@
});
}
```
4. 使用CustomDialogController实现自定义弹
当现有弹框不能满足业务诉求时,开发者可以自行设计弹框的样式。在实现自定义弹框时,需要将弹框的UI放在被@CustomDialog修饰的自定义组件中,然后使用CustomDialogController的实例来控制弹框的弹出和关闭。
4. 使用CustomDialogController实现自定义弹
当现有弹窗不能满足业务诉求时,开发者可以自行设计弹窗的样式。在实现自定义弹窗时,需要将弹窗的UI放在被@CustomDialog修饰的自定义组件中,然后使用CustomDialogController的实例来控制弹窗的弹出和关闭。
具体代码如下:
```ts
// 使用@CustomDialog修饰自定义弹
// 使用@CustomDialog修饰自定义弹
@CustomDialog
struct CustomDialogFrame{
...
......@@ -137,7 +140,7 @@
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消')
.onClick(() => {
// 点击‘取消’,弹关闭
// 点击‘取消’,弹关闭
this.controller.close()
})
.backgroundColor('')
......@@ -145,7 +148,7 @@
Button('保存')
.onClick(() => {
this.inputValue = this.textValue
// 点击‘保存’,弹关闭
// 点击‘保存’,弹关闭
this.controller.close()
})
.backgroundColor(0xffffff)
......@@ -155,9 +158,9 @@
}
}
...
// 实例化自定义弹
// 实例化自定义弹
customDialogController: CustomDialogController = new CustomDialogController({
// 使用上文创建的自定义弹进行实例化
// 使用上文创建的自定义弹进行实例化
builder: CustomDialogFrame({
textValue: $textValue,
inputValue: $inputValue
......@@ -451,7 +454,7 @@ struct Index {
}
```
## 参考
- [警告弹](../application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md)
- [警告弹](../application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md)
- [日期滑动选择器弹窗](../application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md)
- [文本滑动选择器弹窗](../application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md)
- [自定义弹窗](../application-dev/ui/arkts-common-components-custom-dialog.md)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册