鸿蒙开发:弹窗交互(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月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
135 0
|
18天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
89 0
|
18天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
178 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
18天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
50 0
|
18天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
149 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
18天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
76 0
|
18天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
81 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
|
7天前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
|
3月前
|
存储 SQL 前端开发
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
128 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发

热门文章

最新文章