HarmonyOs 查看官方文档使用弹窗

1. 学会查看官方文档

HarmonyOS跟上网上的视频学习一段时间后，基本也就入门了，但是有一些操作网上没有找到合适教学的视频，这时，大家就需要养成参考官方文档的习惯了，因为官方的开发文档是我们学习深度任何一门语言或框架的途径，官网的开发文档写的足够全面，可以在其中学到一些网上视频所没有的内容。

官网文档ArkUI链接：

ArkUI简介-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkui-overview-V5

2. 模态弹窗

官网文档ArkUI-使用模态弹窗链接：

模态弹窗-使用弹窗-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-modal-dialog-V5

通过查看文档，可以知道模态类，弹窗使用的组件，以及对应的使用场景

注意参考文档适用的版本

2.1 AlertDialog（警告弹窗）组件应用示例

使用AlertDialog注销账号的示例：

      Button('注销账号').onClick(() => {AlertDialog.show({title: '提示',message: '您确定要注销账号？',autoCancel: true,alignment: DialogAlignment.Bottom,gridCount: 4,offset: { dx: 0, dy: -20 },primaryButton: {value: '确认',action: () => {console.info('Callback when the first button is clicked')}},secondaryButton: {value: '取消',action: () => {console.info('Callback when the second button is clicked')}}})})

点击按钮后所显示的效果：

权限不够的拒绝弹框：

      Button('相机').onClick(() => {AlertDialog.show({title: '提示',message: '抱歉，您的未开启相机的权限',autoCancel: true,alignment: DialogAlignment.Bottom,gridCount: 4,offset: { dx: 0, dy: -20 },primaryButton: {value: '确认',action: () => {console.info('Callback when the first button is clicked')}}})})

点击按钮后所显示的效果：

2. 2 ActionSheet（列表选择弹窗）组件应用示例

可以用于选择一些列表中固定选项的场景

比如ActionSheet选择所更改的语言

  Button('更改语言').onClick(() => {ActionSheet.show({title: '更改语言',message: '当前语言：' + '中文',autoCancel: true,confirm: {value: '取消',action: () => {console.log('Get Alert Dialog handled')}},alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -50 },sheets: [{title: '中文',action: () => {console.log('中文')}},{title: '英语',action: () => {console.log('英语')}},{title: '日语',action: () => {console.log('日语')}}]})})

示例显示效果：

2.3 Popup（汽包）组件应用示例

      Button('退出').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: '您确认退出该界面？',placementOnTop: true,showInSubWindow: false,primaryButton: {value: '确认',action: () => {this.handlePopup = !this.handlePopupconsole.info('confirm Button click')}},// 第二个按钮secondaryButton: {value: '取消',action: () => {this.handlePopup = !this.handlePopupconsole.info('cancel Button click')}},onStateChange: (e) => {console.info(JSON.stringify(e.isVisible))if (!e.isVisible) {this.handlePopup = false}}})

示例显示效果：

2.4 Menu组件

Menu菜单我之前专门写了一篇文章，已经足够详细了，大家可以参考一下，链接如下所示：

HarmonyOs 学会查看官方文档实现菜单框-CSDN博客文章浏览阅读371次，点赞4次，收藏12次。HarmonyOs 学会查看官方文档实现菜单框https://blog.csdn.net/qq_69183322/article/details/142615637?fromshare=blogdetail&sharetype=blogdetail&sharerId=142615637&sharerefer=PC&sharesource=qq_69183322&sharefrom=from_link