鸿蒙开发:弹窗交互(promptAction )

简介: 点击按钮实现不同方式的弹窗


实现效果

  • 点击按钮实现不同方式的弹窗
  • showToast

  • showDialog

  • showActionMenu

代码实现

  1. 引入'@ohos.promptAction'
import promptAction from '@ohos.promptAction';
  1. 通过promptAction 实现系统既定的弹窗
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Show_Page {
  @State message: string = 'Hello World';
  showToast() {
    promptAction.showToast({
      message: "登录成功", //显示内容
      duration: 2000, //显示持续时间
      bottom: 400//设置显示的距离底部位置
    })
  }
  showDialog() {
    promptAction.showDialog({
      title: "提示",
      message: "您确定要删除嘛?",
      buttons: [
        {
          text: "取消",
          color: "#000"
        },
        {
          text: "确定",
          color: "#000"
        }
      ]
    }).then((data) => {
      console.log(data.index.toString());
    })
  }
  showActionMenu() {
    promptAction.showActionMenu({
      title: "选择字体",
      buttons: [
        {
          text: "测试1",
          color: "#ccc"
        },
        {
          text: "测试2",
          color: "#ccc"
        },
        {
          text: "测试3",
          color: "#ccc"
        },
        {
          text: "测试4",
          color: "#ccc"
        },
        {
          text: "测试5",
          color: "#ccc"
        }
      ]
    }).then((data) => {
      console.log(data.index.toString());
    })
  }
  build() {
    Column() {
      Button() {
        Text("ShowToast").fontColor(Color.White).fontSize(18)
      }
      .width("90%")
      .height(40)
      .margin({ top: 40 })
      .onClick(() => {
        this.showToast();
      })
      Button() {
        Text("ShowDialog").fontColor(Color.White).fontSize(18)
      }
      .width("90%")
      .height(40)
      .margin({ top: 40 })
      .onClick(() => {
        this.showDialog();
      })
      Button() {
        Text("ShowActionMenu").fontColor(Color.White).fontSize(18)
      }
      .width("90%")
      .height(40)
      .margin({ top: 40 })
      .onClick(() => {
        this.showActionMenu();
      })
    }
    .height('100%')
    .width('100%')
  }
}


相关文章
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
126 0
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
2月前
|
存储 SQL 前端开发
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
101 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
|
3月前
|
编译器 程序员 开发者
详解HarmonyOS NEXT系统中ArkTS和仓颉的混合开发
本文介绍了鸿蒙系统中ArkTs与仓颉语言的混合开发方法,讲解了如何通过DevEco Studio创建混合项目、目录结构特点及组件调用方式,强调编译器自动化处理大幅简化开发流程,提升了开发体验。
HarmonyOS NEXT仓颉开发语言实战案例:图片预览器
本文介绍了如何使用仓颉语言实现图片放大预览器。通过弹窗组件`CustomDialogController`与`Swiper`容器结合,实现全屏图片浏览效果,支持多图切换与点击关闭功能,适配动态广场场景下的图片预览需求。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
本文介绍了使用仓颉语言开发类似朋友圈的动态广场页面,包含导航栏和状态列表。通过Column、Row、List等组件实现页面结构,并使用Grid适配图片展示。结合数据绑定与组件化思想,完成动态内容展示。
|
3月前
|
前端开发
HarmonyOS NEXT仓颉开发语言实现画板案例
本文介绍了使用仓颉开发语言实现画板功能的案例,通过Canvas组件实现画布绘制,并利用贝塞尔曲线使画笔跟随触摸轨迹生成平滑曲线。内容包含画布初始化、触控事件处理及清空功能,展示了仓颉语言在图形绘制中的应用技巧。
详解HarmonyOS NEXT仓颉开发语言中的全局弹窗
仓颉语言提供全局弹窗模块prompt_action,支持无需页面依赖的弹窗功能。包含三种预设弹窗:文字提示、对话框及菜单弹窗,也可自定义内容并动态控制关闭。适用于各类交互场景,提升开发效率。

热门文章

最新文章