鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南

文章目录

一、消息提示框（showToast）

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

1、导入模块
import promptAction from '@ohos.promptAction';
  • 1
2、语法
showToast(options: ShowToastOptions): void
  • 1
3、参数
名称类型必填说明
messagestring、Resource是显示的文本信息。
durationnumber否默认值1500ms，取值区间：1500ms-10000ms。
bottomstring、number否设置弹窗边框距离屏幕底部的位置。默认值：80vp，设置了Alignment后不生效。
showModeToastShowMode否设置弹窗是否显示在应用之上。默认值：ToastShowMode.DEFAULT，默认显示在应用内。
alignment12+Alignment否对齐方式。默认值：undefined，默认底部偏上位置。
offset12+Offset否在对齐方式上的偏移。默认值：{dx:0, dy:0}，默认没有偏移。
4、示例
Button("提示信息")
.onClick(() => {
      promptAction.showToast({
        message: '网络连接已断开！'//弹窗内容
      });
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
5、效果

在这里插入图片描述

二、对话框（showDialog）

1、导入模块
import promptAction from '@ohos.promptAction';
  • 1
2、语法
showDialog(options: ShowDialogOptions): Promise
  • 1
  • 2
3、参数
名称类型必填说明
titlestring、Resource否标题文本。
messagestring、Resource是显示的文本信息。
buttonsArray否对话框中按钮的数组，结构为：{text:‘button’, color: ‘#666666’}，支持大于1个按钮。
alignment10+DialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default。
offset10+Offset否弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0 , dy: 0 }
4、示例
Button("删除")
.onClick(() => {
      promptAction.showDialog({
        title: '删除该记录？',//弹窗标题
        message: '删除后无法恢复，您确认要删除吗？',//弹窗内容
        buttons: [// 按钮的数组
          {
            text: '确认',
            color: '#ff0000'
          },
          {
            text: '取消',
            color: '#0000ff'
          },
        ],
      })
        .then(data => {
          console.info('click button: ' + data.index);
        })
        .catch((err: Error) => {
          console.info('showDialog error: ' + err);
        })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
5、效果

在这里插入图片描述

三、警告弹窗（AlertDialog）

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

1、语法
AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)
  • 1
  • 2
2、参数
名称类型必填说明
valueAlertDialogParamWithConfirm、AlertDialogParamWithButtons、AlertDialogParamWithOptions10+是定义并显示AlertDialog组件。
3、AlertDialogParam对象说明
名称类型必填说明
titleResourceStr否弹窗标题。
subtitle10+ResourceStr否弹窗副标题。
messageResourceStr是弹窗内容。
autoCancelboolean否点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
cancel() => void否点击遮障层关闭dialog时的回调。
alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default
offsetOffset否弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0 , dy: 0 }
gridCountnumber否弹窗容器宽度所占用栅格数。默认值：4
confirm{
value: ResourceStr,
fontColor?: ResourceColor,
backgroundColor?: ResourceColor,
action: () => void
}		否确认按钮的文本内容、文本色、按钮背景色和点击回调。
4、示例
Button('删除')
  .onClick(() => {
    AlertDialog.show(
      {
        title: '删除该记录？',//弹窗标题
        message: '删除后无法恢复，您确认要删除吗？',//弹窗内容
        autoCancel: true,//点击遮罩层，是否关闭弹窗
        primaryButton: { // 主要按钮，左侧
          value: '确认',
          fontColor:'#ff0000',
          action: () => {
            console.info('Button-clicking callback')
          }
        },
        secondaryButton: { // 次要按钮，右侧
          value: '取消',
          fontColor:'#0000ff',
          action: () => {
            console.info('Button-clicking callback')
          }
        },
        cancel: () => {
          console.info('showDialog cancel');
        }
      }
    )
  })
  • 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
5、效果

在这里插入图片描述

四、操作菜单（showActionMenu）

showActionMenu（操作菜单弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。

1、导入模块
import promptAction from '@ohos.promptAction';
  • 1
2、语法
showActionMenu(options: ActionMenuOptions): Promise
  • 1
3、参数
名称类型必填说明
optionsActionMenuOptions是操作菜单选项。
4、ActionMenuOptions选项
名称类型必填说明
titlestring、Resource否标题文本。
buttonsArray否对话框中按钮的数组，结构为：{text:‘button’, color: ‘#666666’}，支持1-6个按钮。按钮数量大于6个时，仅显示前6个按钮，之后的按钮不显示。
showInSubWindow11+boolean否某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。默认值：false，在子窗口不显示弹窗。
isModal11+boolean否弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。默认值：true，此时弹窗有蒙层。
5、示例
Button("操作菜单")
.onClick(() => {
  promptAction.showActionMenu({
    title: '上传图片',
    buttons: [
      {
        text: '拍照',
        color: '#909399'
      },
      {
        text: '从相册选择',
        color: '#E6A23C'
      },
      {
        text: '微信记录',
        color: '#67C23A'
      },
    ]
  })
    .then(data => {
      console.info('click button: ' + data.index);
    })
    .catch((err: Error) => {
      console.info('showActionMenu error: ' + err);
    })

})
  • 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
6、效果

在这里插入图片描述

五、操作列表弹窗（ActionSheet）

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

1、语法
ActionSheet.show(value: ActionSheetOptions)
  • 1
2、参数
名称类型必填说明
valueActionSheetOptions是配置列表选择弹窗的参数。
3、ActionSheetOptions对象说明
名称类型必填说明
titleResourceStr是弹窗标题。
subtitle10+ResourceStr否弹窗副标题。
messageResourceStr是弹窗内容。
autoCancelboolean否点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
cancel() => void否点击遮障层关闭dialog时的回调。
alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Bottom
offset{
dx: number		stringResource,
dy: number
confirm{
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: Resource、string,
action: () => void
}		否确认Button的使能状态、默认焦点、按钮风格、文本内容和点击回调。在弹窗获焦且未进行tab键走焦时，该按钮默认响应Enter键。
enabled：点击Button是否响应，true表示Button可以响应，false表示Button不可以响应。
默认值：true
defaultFocus：设置Button是否是默认焦点，true表示Button是默认焦点，false表示Button不是默认焦点。
默认值：false
style：设置Button的风格样式。
默认值：DialogButtonStyle.DEFAULT
value：Button文本内容。
action: Button选中时的回调。
sheetsArray是设置选项内容，每个选择项支持设置图片、文本和选中的回调。
4、SheetInfo接口说明
名称类型必填说明
titlestring 、 Resource是选项的文本内容。
iconstring 、 Resource否选项的图标，默认无图标显示。
action()=>void是选项选中的回调。
5、示例
Button("选择操作")
    .onClick(() => {
        ActionSheet.show({
          title: '文件操作',
          message: '请选择你要对该文件执行的操作',
          confirm: {
            value: '取消',
            action: () => {
              console.log('Get Alert Dialog handled')
            }
          },
          cancel: () => {
            console.log('actionSheet canceled')
          },
          sheets: [
            {
              title: '复制',
              icon: $r("app.media.copy"),
              action: () => {
                console.log('apples')
              }
            },
            {
              title: '剪切',
              icon: $r("app.media.shear"),
              action: () => {
                console.log('bananas')
              }
            },
            {
              title: '删除',
              icon: $r("app.media.delete"),
              action: () => {
                console.log('pears')
              }
            }
          ]
        })
    })
  • 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
6、效果

在这里插入图片描述

六、文本滑动选择器弹窗 (TextPickerDialog)

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

1、语法
TextPickerDialog.show(options: ShowToastOptions): void
  • 1
2、参数
名称类型必填说明
optionsTextPickerDialogOptions否配置文本选择器弹窗的参数。
3、TextPickerDialogOptions对象说明
名称类型必填说明
rangestring[] 、 Resource是设置文本选择器的选择范围。
selectednumber否设置选中项的索引值。默认值：0
valuestring否设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。
defaultPickerItemHeightnumber 、 string否设置选择器中选项的高度。
onAccept(value: TextPickerResult) => void否点击弹窗中的“确定”按钮时触发该回调。
onCancel() => void否点击弹窗中的“取消”按钮时触发该回调。
onChange(value: TextPickerResult) => void否滑动弹窗中的选择器使当前选中项改变时触发该回调。
4、TextPickerResult对象说明
名称类型说明
valuestring选中项的文本内容。
indexnumber选中项在选择范围数组中的索引值。
5、示例
Text(this.message)
Button("选择文本")
    .onClick(() => {
      TextPickerDialog.show({
        range: ['苹果', '西瓜', '鸭梨', '香蕉', '橙子'],
        selected: this.selected,
        onAccept: (value: TextPickerResult) => {
          this.selected = value.index
          this.message = value.value
        },
        onCancel: () => {
          console.info("TextPickerDialog:onCancel()")
        }
      })
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
6、效果

在这里插入图片描述

七、自定义弹窗 (CustomDialog)

自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

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

1、语法
CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
  • 1
2、参数
名称类型必填说明
builderCustomDialog是自定义弹窗内容构造器。
cancel() => void否点击遮障层退出时的回调。
autoCancelboolean否是否允许点击遮障层退出。默认值：true
alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default
offsetOffset否弹窗相对alignment所在位置的偏移量。
customStyleboolean否弹窗容器样式是否自定义。
默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。
gridCount8+number否弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应
3、CustomDialogController
dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
  • 1
4、方法

  • open()：显示自定义弹窗内容，允许多次使用，但如果弹框为SubWindow模式，则该弹框不允许再弹出SubWindow弹框。

  • close()：关闭显示的自定义弹窗，若已关闭，则不生效。

5、创建自定义弹窗

  • 使用@CustomDialog装饰器装饰自定义弹窗。

  • @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('我是内容')
      .fontSize(20)
      .margin({ top: 10, bottom: 10 })
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 创建构造器，与装饰器呼应相连。
dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
})
  • 1
  • 2
  • 3
  • 点击与onClick事件绑定的组件使弹窗弹出
Button('click me')
    .onClick(() => {
      this.dialogController.open()
    })
  • 1
  • 2
  • 3
  • 4
6、示例
@Entry
@Component
struct CustomDialog {
  @State answer: string = '?'
  // 创建构造器，与装饰器呼应相连。
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      // 确认按钮回调函数
      confirm: (val) => {
        this.onAccept(val)
      },
    })
  })

  // 确认
  onAccept(val: string) {
    this.answer = val
  }

  build() {
    Column({ space: 20 }) {
    Row() {
        Text('1+1=')
        Text(this.answer)
      }

      Button('作答')
        .onClick(() => {
          // 打开自定义弹窗
          this.dialogController.open()
        })

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}


// @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  confirm: (val: string) => void
  answer: string = ''

  build() {
    Column({ space: 20 }) {
      Text('请输入你的答案')
        .fontSize(20)
      TextInput({ placeholder: "请输入数字" })
        .type(InputType.Number)
        .onChange((value: string) => {
          this.answer = value
        })
      Row({ space: 40 }) {
        Button('取消')
          .onClick(() => {
            // 关闭弹窗
            this.controller.close()
          })
        Button('确定')
          .onClick(() => {
            // 关闭弹窗
            this.controller.close()
            // 确认按钮回调函数
            this.confirm(this.answer)
          })
      }
    }.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
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
7、效果

在这里插入图片描述

Ai+赢乐
微信名片
注：本文转载自blog.csdn.net的邹荣乐的文章"https://blog.csdn.net/shanghai597/article/details/140522220"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！