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

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】鸿蒙开发之prompt组件——第3.3章。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

prompt组件简介

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

  1. showToast()
  2. showDialog()
  3. showActionMenu()
    【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

一.显示一个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
              })
            });
          })

运行结果:
【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

对话框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: "我点击了取消"
                  })
                }
              }
            });
          })

运行结果:
【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

三.显示一个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
              })
            })
          })

运行结果:
【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

特别注意:

  1. prompt组件不能单独使用,需要放在函数内
    错误写法:
    【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

正确写法:
【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

  1. 引用时改为import prompt from ‘@ohos.promptAction’(官方推荐)
    【HarmonyOS】鸿蒙开发之prompt组件——第3.3章,鸿蒙开发入门到实战,harmonyos,prompt,华为

踩坑不易,还希望各位大佬支持一下 \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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教文章来源地址https://www.toymoban.com/news/detail-829329.html

到了这里,关于【HarmonyOS】鸿蒙开发之prompt组件——第3.3章的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【HarmonyOS】开发一个可以看小姐姐的鸿蒙应用 鸿蒙开发入门

    先整张效果图,丑点是丑点,但可以用,买不起鸿蒙系统手机的我,只配用虚拟机。 要说目前最火的手机操作系统,要我来看的话那必然是鸿蒙无疑。16号刚刚结束了第五次鸿蒙内测,在看到这次的内测名单之后,居然有970的机器,这是不是说明俺这手里奋战了三年的荣耀

    2024年02月15日
    浏览(94)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ListContainer

    目录 支持的XML属性 ListContainer的使用方法 ListContainer的常用接口 ListContainer的样式设置 ListContainer性能优化 ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。 ListContainer的共有XML属性继承自:Component ListContainer的自有XML属性见下表: 表1  ListContainer的

    2024年01月20日
    浏览(52)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 RadioButton

    目录 支持的XML属性 创建RadioButton 设置RadioButton 设置单选按钮的字体颜色 设置状态标志样式 RadioButton用于多选一的操作,需要搭配RadioContainer使用,实现单选效果。 RadioButton的共有XML属性继承自:Text RadioButton的自有XML属性见下表: 表1  RadioButton的自有XML属性

    2024年01月24日
    浏览(49)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PopupDialog

    目录 接口说明 构造方法 常用方法 创建和使用 创建参照的组件 创建气泡对话框 使用气泡对话框 修改对齐模式/

    2024年01月18日
    浏览(43)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PageSlider

    目录 支持的XML属性 PageSlider的创建和使用 PageSlider的常用方法 常用方法 响应页面切换事件 设置布局方向 设置缓存当前页面左右两侧的页面数

    2024年01月22日
    浏览(54)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 WebView

    目录 WebView的使用方法 浏览网页历史记录 使用JavaScript 观测Web状态 观测浏览事件 定制网址加载行为 加载资源文件或本地文件 WebView提供在应用中集成Web页面的能力。 说明 请使用真机

    2024年01月20日
    浏览(46)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件Switch

    目录 支持的XML属性 创建Switch 设置Switch Switch是切换单个设置开/关两种状态的组件。 Switch的共有XML属性继承自:Text Switch的自有XML属性见下表: 表1  Switch的自有XML属性 属性名称 中文描述 取值 取值说明 使用案例 text_state_on

    2024年01月18日
    浏览(58)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件Text

    目录 支持的XML属性 创建Text 设置Text 自动调节字体大小 跑马灯效果 场景示例 Text是用来显示字符串的组件,在界面上显示为一块文本区域。Text作为一个基本组件,有很多扩展,常见的有按钮组件Button,文本编辑组件TextField。 Text的共有XML属性继承自

    2024年01月19日
    浏览(41)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PageSliderIndicator

    目录 PageSliderIndicator的创建和使用 PageSliderIndicator的常用方法 关联PageSlider 响应页面切换事件 设置所选导航点的页面位置 设置导航点的背景 设置导航点之间的偏移量 PageSliderIndicator,

    2024年01月16日
    浏览(44)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TimePicker

    目录 支持的XML属性 使用TimePicker 显示样式配置 范围选择设置 TimePicker主要供用户选择时间。 TimePicker的共有XML属性继承自:StackLayout TimePicker的自有XML属性见下表: 表1  TimePicker的自有XML属性 属性名称 中文描述 取值 取值说明

    2024年02月21日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包