【HarmonyOS】鸿蒙开发之prompt组件——第3.3章

prompt组件简介

prompt组件一共有三种弹出框:

1. showToast（）
2. showDialog（）
3. showActionMenu（）
   

一.显示一个Toast

showToast函数内参数说明如下:

message：提示文本，必填项。

duration：Toast 显示时间，单位毫秒，范围 1500, 10000，默认1500。

bottom：设置 Toast 的显示位置距离底部的间距。

代码实例:

Button("显示一个toast")
          .onClick(() => {
            promptAction.showToast({
              message: '案例一',
              duration: 2000,
              bottom:100
            });
          })

二.显示一个Dialog

普通Dialog

showDialog函数内参数说明如下:

title：对话框的标题。

message：对话框的内容。

buttons：对话框上的按钮，至少配置一个，最多三个

代码实例:

Button("显示一个toast")
          .fontSize(20)
          .onClick(() => {
            promptAction.showDialog({
              title: "标题",
              message: "内容",
              buttons: [
                {
                  text: "按钮一",
                  color: "#888888"
                },
                {
                  text: "按钮二",
                  color: "#999999"
                },
                {
                  text: "按钮三",
                  color: "#888888"
                }
              ]
            }, (error, index) => {
              console.log("当前点击按钮的索引值:"+index.index);
              var msg = error ? JSON.stringify(error) : "index: " + index.index;
              promptAction.showToast({
                message: msg
              })
            });
          })

运行结果:

对话框AlertDialog

AlertDialog类下 show函数内参数说明如下:

title：设置对话框的标题。

message：设置对话框显示的内容。

autoCancel：点击蒙层是否隐藏对话框。

cancel：点击蒙层的事件回调。

alignment：对话框的对齐方式。

offset：对话框相对于 alignment 的偏移量。

gridCount：对话框宽度所占用栅格数。

confirm 参数的配置说明如下：

value：设置按钮的显示文本。

fontColor：设置按钮的显示文本的颜色。

backgroundColor：设置按钮的背景色。

action：点击按钮的事件回调。

代码实例:

//全局声明

declare interface AlertDialogParam {
  title?: ResourceStr;
  message: ResourceStr;
  autoCancel?: boolean;
  cancel?: () => void;
  alignment?: DialogAlignment;
  offset?: Offset;
  gridCount?: number;
}
declare interface AlertDialogParamWithConfirm extends AlertDialogParam {
  confirm?: {
    value: ResourceStr;              // 按钮显示文字
    fontColor?: ResourceColor;       // 按钮文字颜色
    backgroundColor?: ResourceColor; // 按钮背景色
    action: () => void;              // 点击按钮的事件回调
  };
}
declare interface AlertDialogParamWithButtons extends AlertDialogParam {
  primaryButton: {
    value: ResourceStr;
    fontColor?: ResourceColor;
    backgroundColor?: ResourceColor;
    action: () => void;
  };
  secondaryButton: {
    value: ResourceStr;
    fontColor?: ResourceColor;
    backgroundColor?: ResourceColor;
    action: () => void;
  };
}
declare class AlertDialog {
  // 显示一个对话框
  static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons);
}

Button("显示一个alert弹出框")
          .margin({top:10})
          .fontSize(20)
          .onClick(() => {
            AlertDialog.show({
              title: "对话框标题",
              message: "对话框内容",
              autoCancel: true,
              cancel: () => {
                promptAction.showToast({
                  message: "点击蒙层消失"
                })
              },
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -20},
              primaryButton: {
                value: "确定",
                fontColor: "#ffffff",
                backgroundColor: "#007dfe",
                action: () => {
                  promptAction.showToast({
                    message: "我点击了缺点"
                  })
                }
              },
              secondaryButton: {
                value: "取消",
                fontColor: "#ffffff",
                backgroundColor: "#007dfe",
                action: () => {
                  promptAction.showToast({
                    message: "我点击了取消"
                  })
                }
              }
            });
          })

运行结果:

三.显示一个Menu(菜单)

showActionMenu函数内参数说明如下:

title： Menu 的显示标题。

buttons： Menu 显示的按钮数组 ，至少 1 个按钮，至多 6 个按钮。
代码实例:

Button("显示菜单")
          .fontSize(20)
          .onClick(() => {
            promptAction.showActionMenu({   // 显示一个菜单栏
              title: "ActionMenu标题", // 设置标题
              buttons: [              // 设置选项
                {
                  text: "按钮1",
                  color: "#aabbcc"
                },
                {
                  text: "按钮2",
                  color: "#bbccaa"
                },
                {
                  text: "按钮3",
                  color: "#ccaabb"
                }
              ]
            }, (error, index) => {    // 事件回调
              console.log("当前点击按钮的索引值:"+index.index);
              var msg = error ? JSON.stringify(error) : "index: " + index.index;
              promptAction.showToast({
                message: msg
              })
            })
          })

运行结果:

特别注意:

1. prompt组件不能单独使用，需要放在函数内
   错误写法:
   

正确写法:

2. 引用时改为import prompt from '@ohos.promptAction'(官方推荐)
   

✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下

📃 个人主页： \textcolor{green}{个人主页：} 个人主页： 沉默小管

📃 个人网站： \textcolor{green}{个人网站：} 个人网站： 沉默小管

📃 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站： 沉默小管导航网

📃 我的开源项目： \textcolor{green}{我的开源项目：} 我的开源项目： vueCms.cn

🔥 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545

👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复

如有错误，请多多指教