prompt组件简介
prompt组件一共有三种弹出框:
- showToast()
- showDialog()
- 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
})
})
})
运行结果:
特别注意:
- prompt组件不能单独使用,需要放在函数内
错误写法:
正确写法:
文章来源:https://www.toymoban.com/news/detail-829329.html
- 引用时改为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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教文章来源地址https://www.toymoban.com/news/detail-829329.html
到了这里,关于【HarmonyOS】鸿蒙开发之prompt组件——第3.3章的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!