鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Dialog对话框组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Dialog对话框组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Dialog对话框组件

对话框的使用场景也很高频,比如 APP 上架应用市场要求 APP 首次启动要有服务协议和隐私权限提示弹框等,ArkUI开发框架提供了两种方式显示一个对话框,一种是使用 @ohos.promptAction 模块里提供的 API 显示,另一种是使用全局对话框 AlertDialog 显示。

  • 使用 @ohos.promptAction 模块里提供的 showDialog

declare namespace prompt {  
  // 显示一个对话框
  function showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void;
}

interface ShowDialogOptions {          // 对话框配置
  title?: string;                      // 标题
  message?: string;                    // 内容
  buttons?: [Button, Button?, Button?];// 按钮
}

interface Button {                     // 对话框按钮配置
  text: string;                        // 按钮文字
  color: string;                       // 按钮颜色
}

interface ShowDialogSuccessResponse {  // 成功回调
  index: number;
}
  • options:显示对话框的配置项, ShowDialogOptions 说明如下:

    • title:对话框的标题。
    • message:对话框的内容。
    • buttons:对话框上的按钮,至少配置一个,最多三个。

call:事件回调,并显示对话框的点击下标

import promptAction from '@ohos.promptAction';

@Entry @Component struct ToastTest {

  build() {
    Column({space: 10}) {

      Button("show dialog")
        .onClick(() => {
          promptAction.showDialog({
            title: "对话框标题",
            message: "对话框内容",
            buttons: [
              {
                text: "第一个按钮",
                color: "#aabbcc"
              },
              {
                text: "第二个按钮",
                color: "#bbccaa"
              },
              {
                text: "第三个按钮",
                color: "#ccaabb"
              }
            ]
          }, (error, index) => {
            var msg = error ? JSON.stringify(error) : "index: " + index;
            promptAction.showToast({
              message: msg
            })
          });
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

三、全局对话框 AlertDialog

除了使用 @ohos.promptAction  模块提供的 API 可以显示一个对话框外,还可以使用全局对话框 AlertDialog , AlertDialog 的源码其定义如下:

declare class AlertDialog {
  // 显示一个对话框
  static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons);
}

方法

show:显示一个对话框,参数 value 支持 AlertDialogParamWithConfirm 和 AlertDialogParamWithButtons,它们都继承自 AlertDialogParam , AlertDialogParam 定义如下:

declare interface AlertDialogParam {
  title?: ResourceStr;
  message: ResourceStr;
  autoCancel?: boolean;
  cancel?: () => void;
  alignment?: DialogAlignment;
  offset?: Offset;
  gridCount?: number;
}

属性
  • title:设置对话框的标题。
  • message:设置对话框显示的内容。
  • autoCancel:点击蒙层是否隐藏对话框。
  • cancel:点击蒙层的事件回调。
  • alignment:对话框的对齐方式。
  • offset:对话框相对于 alignment 的偏移量。
  • gridCount:对话框宽度所占用栅格数。

示例
import prompt from '@ohos.prompt';

@Entry @Component struct PromptTest {
  build() {
    Column({ space: 10 }) {

      Button("show dialog")
        .onClick(() => {
          AlertDialog.show({
            title: "对话框标题",
            message: "对话框内容",
            autoCancel: true,                  // 点击蒙层,隐藏对话框
            cancel: () => {                    // 点击蒙层的事件回调
              prompt.showToast({
                message: "点击蒙层消失"
              })
            },
            alignment: DialogAlignment.Bottom, // 设置对话框底部对齐
            offset: { dx: 0, dy: -20},         // 在Y轴方向上的偏移量
            confirm: {
              value: "确定按钮",
              fontColor: "#ff0000",
              backgroundColor: "#ccaabb",
              action: () => {
                prompt.showToast({
                  message: "点击按钮消失"
                })
              }
            }
          });
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。

  • 16
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我可以为您提供一个简单的 Vue Dialog 组件示例代码: ```vue <template> <div v-show="visible" class="dialog-wrapper"> <div class="dialog"> <div class="dialog-header"> <h3>{{ title }}</h3> <button class="close-btn" @click="closeDialog">X</button> </div> <div class="dialog-body"> <slot></slot> </div> <div class="dialog-footer"> <button class="btn-primary" @click="confirm">确认</button> <button class="btn-secondary" @click="closeDialog">取消</button> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, default: false, }, title: { type: String, default: '提示', }, }, methods: { confirm() { // 触发确认事件 this.$emit('confirm') }, closeDialog() { // 触发关闭事件 this.$emit('close') }, }, } </script> <style> .dialog-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .dialog { width: 400px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .dialog-header { padding: 10px; background: #f5f5f5; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .dialog-body { padding: 20px; } .dialog-footer { padding: 10px; background: #f5f5f5; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; display: flex; justify-content: flex-end; } .btn-primary { margin-right: 10px; padding: 5px 10px; background: #409eff; border: none; color: #fff; border-radius: 5px; cursor: pointer; } .btn-secondary { padding: 5px 10px; background: #fff; border: 1px solid #bbb; color: #333; border-radius: 5px; cursor: pointer; } </style> ``` 在上面的代码中,我们定义了一个名为 `Dialog` 的 Vue 组件,它有一个 `visible` 属性来控制对话框的显示与隐藏,还有一个 `title` 属性来设置对话框的标题。 对话框内部包含三个部分:头部、内容和底部按钮。头部包含一个标题和一个关闭按钮,内容部分使用了 Vue 的插槽来允许我们自定义对话框的内容,底部包含了两个按钮:确认和取消。 在组件内部,我们定义了 `confirm` 和 `closeDialog` 两个方法来分别触发确认和关闭事件(使用了 `$emit` 方法)。在外部使用该组件时,我们可以监听这两个事件来获取用户的操作结果。 最后,我们还为组件添加了一些简单的样式。这只是一个简单的示例代码,你可以根据自己的需求进行修改和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亚丁号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值