鸿蒙开发:弹窗交互(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%')
  }
}


相关文章
|
9天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
|
2天前
|
API 开发者 Windows
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
107 85
uniapp 极速上手鸿蒙开发
|
3天前
鸿蒙开发:wrapBuilder传递参数
本文,主要简单了介绍了一下,非UI使用的情况下,wrapBuilder传递数据问题,除了以上的方式之外,还有其它的方式可以实现,在实际的开发中,还是具体问题具体分析。
74 61
鸿蒙开发:wrapBuilder传递参数
|
1天前
|
存储
鸿蒙开发:自定义一个搜索模版
这样的一个模版,可以简单的分为,三个部分,分别是上边的搜索框,中间的历史搜索和下边的热门搜索,搜索框,我们直接可以使用系统的组件Search,历史搜索,由于是内容不一的搜索的内容,这里使用弹性布局Flex,下边的热门搜索,条目规格一致,这里我们直接使用Grid网格组件。
40 23
鸿蒙开发:自定义一个搜索模版
|
3天前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
25 10
鸿蒙开发:弹性布局Flex
|
6天前
|
安全 API
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
37 13
鸿蒙开发:实现AOP代码插桩能力
|
3天前
|
容器
鸿蒙开发:相对布局RelativeContainer
当然了,RelativeContainer组件还有着其它的属性,但是最重要的也就是位置的摆放,其实也就是相对于锚点组件的摆放;通过上述的案例,我们不难发现,所谓的左上右下,反着来就是对的,比如在锚点上边,我用bottom,在锚点下面,我用top,在实际的开发中,可极大节约我们的开发时间。
鸿蒙开发:相对布局RelativeContainer
|
2天前
|
人工智能 前端开发
鸿蒙开发:实现AI打字机效果
具体的效果,根据业务情况而定,有两种模式,一种主动的流式输出,也就是数据以流式的形式进行返回,前端直接用组件加载即可,第二种就是刻意的流式展示,也就是在拿到数据之后,前端实现流式输出,进行打字机展示。
29 13
|
8天前
|
安全
鸿蒙开发:校验构造传参装饰器@Require
@Require装饰器依赖ArkTs的类型检查,仅在编译阶段拦截类型错误和缺失参数,对于运行时才能确定的动态值,如从网络请求获取的数据,仍需在生命周期函数中进行二次校验。
49 18
|
4天前
鸿蒙开发:wrapBuilder来封装全局@Builder
首先第一点,在同一个UI组件内,同一个wrapBuilder只能初始化一次,第二点就是WrappedBuilder对象的builder属性方法只能在struct内部使用。

热门文章

最新文章