【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件_鴻蒙前端消息提示組件

简介

弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。

---

下面是所有涉及到的弹窗组件官方文档，请一切以官方文档为准

警告对话弹框 官方文档

操作列表弹框 官方文档

文本滑动选择器弹窗 官方文档

日期滑动选择期弹窗 官方文档

时间滑动选择器弹窗 官方文档

自定义弹窗 官方文档

---

消息提示

概述

Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下

使用说明

可使用@ohos.promptAction模块中的showToast()方法显示Toast提示，使用时需要先导入@ohos.promptAction模块，如下

import promptAction from '@ohos.promptAction'
1

showToast()方法的参数定义如下

showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})
1

● message
message属性用于设置提示信息

● duration
duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]

● bottom
bottom属性用于设置提示信息到底部的距离

示例

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct ToastPage {
  build() {
    Column() {
      Button('提示信息')
        .onClick(() => {
          promptAction.showToast({
            message: '网络连接已断开',
            duration: 2000,
            bottom: 50
          });
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

警告对话框

概述

AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下

可使用全局方法AlertDialog.show()显示警告对话框，具体用法可参考相关案例或者官方文档。

下面给出一个案例

@Entry
@Component
struct AlertDialogPage {
  build() {
    Column() {
      Button('删除')
        .backgroundColor(Color.Red)
        .onClick(() => {
          AlertDialog.show(
            {
              title: '删除该记录？', //弹窗标题
              message: '删除后无法恢复，您确认要删除吗？', //弹窗信息
              autoCancel: true, //点击遮障层时，是否关闭弹窗
              alignment: DialogAlignment.Bottom, //弹窗位置
              offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量
              primaryButton: { //主要按钮，位于左侧
                value: '确认', //按钮内容
                fontColor: Color.Red, //字体颜色
                action: () => { //点击回调
                  console.log('确认删除')
                }
              },
              secondaryButton: { //次要按钮，位于右侧
                value: '取消',
                action: () => {
                  console.log('取消删除')
                }
              },
              cancel: () => { //点击遮罩层取消时的回调
                console.info('Closed callbacks')
              }
            }
          )
        })

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

---

操作列表弹框

概述

ActionSheet（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。具体效果如下

使用说明

可使用全局方法ActionSheet.show()显示操作列表弹窗，具体用法可参考相关案例或者官方文档。

下面给出一个案例参考

@Entry
@Component
struct ActionSheetPage {
  build() {
    Column() {
      Button('选择操作')
        .onClick(() => {
          ActionSheet.show({
            title: '文件操作', //弹窗标题
            message: '请选择你要对该文件执行的操作', //弹窗内容
            autoCancel: true, //点击遮障层时，是否关闭弹窗
            alignment: DialogAlignment.Bottom, //弹窗位置
            offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
            confirm: { //底部按钮
              value: '取消', //按钮文本内容
              action: () => { //按钮回调函数
                console.log('点击按钮取消')
              }
            },
            // cancel: () => { //点击遮障层关闭弹窗时的回调
            //   console.log('点击遮障层取消')
            // },
            sheets: [ //操作选项列表
              {
                icon: $r('app.media.icon_copy'), //图标
                title: '复制', //文本
                action: () => { //回调
                  console.log('复制文件')
                }
              },
              {
                icon: $r('app.media.icon_cut'),
                title: '剪切',
                action: () => {
                  console.log('剪切文件')
                }
              },
              {
                icon: $r('app.media.icon_delete'),
                title: '删除',
                action: () => {
                  console.log('删除文件')
                }
              }
            ]
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

---

选择器弹窗

概述

选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等，各选择器效果如下

TextPickerDialog（文本滑动选择器弹窗）

给出一个案例

@Entry
@Component
struct TextPickerDialogPage {
  fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']
  @State selectedIndex: number = 0

  build() {
    Column({ space: 50 }) {
      Text(this.fruits[this.selectedIndex])
        .fontWeight(FontWeight.Bold)
        .fontSize(30)

      Button("选择文本")
        .margin(20)
        .onClick(() => {
          TextPickerDialog.show({
            range: this.fruits, //设置文本选择器的选择范围
            selected: this.selectedIndex, //设置选中的索引
            onAccept: (value: TextPickerResult) => { //确定按钮的回调函数
              this.selectedIndex = value.index;
            },
            onCancel: () => { //取消按钮的回调函数
              console.info('取消选择')
            },
            onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数
              console.info(`当前文本:${JSON.stringify(value)}`)
            }
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

DatePickerDialog（日期滑动选择期弹窗）

给出一个案例

@Entry
@Component
struct DatePickerDialogPage {
  @State date: Date = new Date("2010-1-1");

  build() {
    Column({ space: 50 }) {
      Text(`${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`)
        .fontWeight(FontWeight.Bold)
        .fontSize(30)

      Button("选择日期")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"), //设置选择器的其实日期
            end: new Date("2100-12-31"), //设置选择器的结束日期
            selected: this.date, //设置当前选中的日期
            onAccept: (value: DatePickerResult) => { //确定按钮的回调
              this.date.setFullYear(value.year, value.month, value.day)
            },
            onCancel: () => { //取消按钮的回调
              console.info('取消选择')
            },
            onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数
              console.info(`当前日期:${JSON.stringify(value)}`)
            }
          })
        })

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---

TimePickerDialog（时间滑动选择器弹窗）

给出一个案例

@Entry
@Component
struct TimePickerDialogPage {
  @State time: Date = new Date('2020-01-01T00:00:00')

  build() {
    Column({ space: 50 }) {

      Text(`${this.time.getHours()}:${this.time.getMinutes()}`)
        .fontWeight(FontWeight.Bold)
        .fontSize(30)

      Button("选择时间")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.time, //设置当前选中的时间
            useMilitaryTime: true, //是否使用24小时制
            onAccept: (value: TimePickerResult) => { //确认按钮的回调
              this.time.setHours(value.hour, value.minute);
            },
            onCancel: () => { //取消按钮的回调
              console.info('取消选择')
            },
            onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数
              console.info(`当前时间:${JSON.stringify(value)}`)
            }
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

使用说明

具体用法可参考相关案例或者官方文档，各选择器的官方文档地址如下
类型 文档地址

TextPickerDialog（文本滑动选择器弹窗） 官方文档

DatePickerDialog（日期滑动选择期弹窗） 官方文档

TimePickerDialog（时间滑动选择器弹窗） 官方文档

---

自定义弹窗

概述

当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如

给出一个示例

@Entry
@Component
struct CustomDialogPage {
  @State answer: string = '?'
  controller: CustomDialogController = new CustomDialogController({
    builder: TextInputDialog({
      confirm: (value) => {
        this.answer = value;
      }
    }),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -30 }
  })

  build() {
    Column({ space: 50 }) {
      Row() {
        Text('1+1=')
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
        Text(this.answer)
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }

      Button('作答')
        .onClick(() => {
          this.controller.open();
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}


@CustomDialog
struct TextInputDialog {
  controller: CustomDialogController = new CustomDialogController({ builder: TextInputDialog() })
  confirm: (value: string) => void;
  value: string = '';

  build() {
    Column({ space: 20 }) {
      Text('请输入你的答案')
      TextInput({ placeholder: '请输入数字' })
        .type(InputType.Number)
        .onChange((value) => {
          this.value = value;
        })
      Row({ space: 50 }) {
        Button('取消')
          .onClick(() => {
            this.controller.close();
          })
        Button('确认').onClick(() => {
          this.confirm(this.value);
          this.controller.close();
        })
      }
    }.padding(20)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

使用说明
显示自定义弹窗需要使用CustomDialogController，具体用法可参考相关案例或者官方文档。