HarmonyOs 查看官方文档使用弹窗

探索星辰大海

已于 2024-09-29 18:38:52 修改

阅读量400

点赞数 17

文章标签： harmonyos 华为

于 2024-09-29 18:29:35 首次发布

本文链接：https://blog.csdn.net/qq_69183322/article/details/142640486

版权

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.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: '取消',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })

示例显示效果：